DEV Community

Cover image for Scrapify.ai
YOGARATHNAM-S
YOGARATHNAM-S Subscriber

Posted on

Scrapify.ai

🌱 Scrapify.AI

AI-powered waste analysis and scrap donation platform to protect the environment

🚀 Overview

Scrapify.AI is a modern web application that combines artificial intelligence with environmental sustainability. It helps users identify recyclable materials through AI-powered image analysis and facilitates scrap material donations through a community-driven platform.

✨ Features

🤖 AI Waste Analyzer

  • Smart Image Recognition: Upload photos of items to instantly determine if they're recyclable
  • Detailed Analysis: Get comprehensive waste type, sustainability, and recyclability ratings
  • Google Gemini Integration: Powered by Google's advanced AI for accurate results
  • Drag & Drop Interface: Easy-to-use file upload with instant preview

🤝 Scrap Donation Platform

  • Community Marketplace: Browse and discover available scrap materials from donors
  • Easy Donation Process: List your scrap materials with AI-powered categorization
  • Location-Based Listings: Find donors and materials in your area
  • Material Categories: Support for metals, plastics, paper, electronics, and more

🎨 Modern User Experience

  • Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
  • Clean Interface: Intuitive design with smooth animations and transitions
  • Real-time Updates: Instant feedback and loading states
  • Accessibility: Built with accessibility best practices

🛠️ Technology Stack

  • Frontend: Next.js 15.1.6, React 19, TailwindCSS
  • UI Components: Lucide React icons, Styled Components
  • File Handling: React Dropzone
  • AI Integration: Google Gemini 2.0 Flash API
  • Deployment: Vercel-ready configuration

📦 Installation

Prerequisites

  • Node.js 18+
  • npm or yarn
  • Google AI API key

Setup Instructions

  1. Clone the repository 
   git clone https://github.com/YOGARATHNAM-S/Scrapify.AI.git
   cd Scrapify.AI
Enter fullscreen mode Exit fullscreen mode
  1. Install dependencies 
   npm install
Enter fullscreen mode Exit fullscreen mode
  1. Environment Configuration

Create a .env.local file in the root directory:

   NEXT_PUBLIC_GOOGLE_API_KEY=your_google_ai_api_key_here
Enter fullscreen mode Exit fullscreen mode

To get your Google AI API key:

  • Visit Google AI Studio
  • Create a new project and generate an API key
  • Enable the Generative Language API
  1. Run the development server 
   npm run dev
Enter fullscreen mode Exit fullscreen mode
  1. Open your browser

Navigate to http://localhost:3000

🚀 Usage

AI Waste Analyzer

  1. Navigate to the AI Waste Analyzer page
  2. Upload an image by dragging and dropping or clicking to select
  3. Analyze - Click the "Analyze Image" button
  4. Review the AI-generated results including:
    • Waste type identification
    • Sustainability rating
    • Recyclability score
    • Disposal recommendations

Scrap Donation Platform

  1. Browse existing donations on the main donation page
  2. View Details - Click on any donation to see more information
  3. Add Donation - Use the form to list your own scrap materials:
    • Upload an image of your scrap
    • AI will automatically categorize the material
    • Add description and location details
    • Submit to make it available to the community

📁 Project Structure 

Scrapify.AI/
├── app/                    # Next.js app directory
│   ├── page.js            # Homepage
│   ├── layout.js          # Root layout
│   ├── globals.css        # Global styles
│   ├── scanner/           # AI waste analyzer
│   │   └── page.jsx
│   └── donation/          # Scrap donation platform
│       └── page.jsx
├── components/            # Reusable React components
│   ├── Card.jsx          # Feature cards
│   ├── CustomButton.jsx  # Styled buttons
│   └── Navbar.jsx        # Navigation component
├── public/               # Static assets
│   ├── scrap*.jpg       # Sample scrap images
│   └── *.svg           # Icons and logos
├── package.json         # Dependencies and scripts
├── tailwind.config.mjs  # TailwindCSS configuration
├── next.config.mjs      # Next.js configuration
└── README.md           # Project documentation
Enter fullscreen mode Exit fullscreen mode

🔧 Available Scripts

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm start - Start production server
  • npm run lint - Run ESLint

🌍 Environmental Impact

Scrapify.AI contributes to environmental sustainability by:

  • Reducing Waste: Helping users identify recyclable materials
  • Promoting Reuse: Facilitating donation and exchange of scrap materials
  • Education: Providing detailed information about waste management
  • Community Building: Connecting people interested in sustainable practices

🤝 Contributing

We welcome contributions! Here's how you can help:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Development Guidelines

  • Follow the existing code style and conventions
  • Write clear commit messages
  • Test your changes thoroughly
  • Update documentation as needed

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👥 Team

🔮 Future Enhancements

  • [ ] User authentication and profiles
  • [ ] Advanced filtering and search for donations
  • [ ] Mobile app development
  • [ ] Integration with local recycling centers
  • [ ] Gamification with sustainability points
  • [ ] Multi-language support
  • [ ] Real-time chat between donors and recipients

📞 Support

If you encounter any issues or have questions:

🙏 Acknowledgments

  • Google AI for providing the Gemini API
  • The open-source community for the amazing tools and libraries
  • Environmental organizations inspiring sustainable technology solutions

Made with 💚 for a sustainable future

Top comments (0)