An intelligent web application for automated waste type classification and environmental education
Recyclens is a modern, user-friendly platform designed to help users identify and properly manage different types of waste through artificial intelligence. The application leverages computer vision to classify waste into three categories: organic, inorganic, and hazardous (B3) waste, promoting environmental responsibility and proper waste management practices.
- AI Waste Scanner: Upload images to automatically classify waste types using machine learning
- Waste Education: Learn about different waste categories:
- Organic Waste (Sampah Organik)
- Inorganic Waste (Sampah Anorganik)
- Hazardous Waste (Sampah B3)
- Blog Section: Stay updated with articles about environmental sustainability and waste management best practices
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Fast Navigation: Smooth page transitions with React Router
- Modern UI: Built with Tailwind CSS and complemented by icon libraries
- Framework: React 19 - UI library
- Build Tool: Vite 6.2 - Next-generation build tool
- Styling: Tailwind CSS 4.1 - Utility-first CSS framework
- Routing: React Router DOM 7.4 - Client-side routing
- Icons:
- Carousel: React Slick
- ML Integration: Connected to railway-hosted ML API for waste prediction
- Code Quality: ESLint for JavaScript linting
- Node.js v14 or higher
- npm or yarn package manager
- Git (optional, for cloning the repository)
-
Clone the repository
git clone <repository-url> cd recyclens-fe
-
Install dependencies
npm install # or yarn install -
Environment Setup (if needed for API configuration)
- The application is configured to connect to the ML API at:
https://web-production-c8bf2.up.railway.app/predict - Update API endpoints in api/predict.js if necessary
- The application is configured to connect to the ML API at:
npm run devThe application will be available at http://localhost:5173 with hot module replacement (HMR) enabled.
npm run buildCreates an optimized production build in the dist directory.
npm run previewServes the production build locally for testing.
npm run lintRuns ESLint to check for code quality issues.
recyclens-fe/
├── api/
│ ├── blogs.js # Blog API integration
│ └── predict.js # ML waste prediction API handler
├── public/ # Static assets
├── src/
│ ├── components/
│ │ └── layout/
│ │ ├── navbar.jsx # Navigation component
│ │ └── footer.jsx # Footer component
│ ├── pages/
│ │ ├── home.jsx # Home page with hero section
│ │ ├── about.jsx # About page
│ │ ├── scan.jsx # Waste scanner/prediction page
│ │ ├── blog.jsx # Blog listing page
│ │ ├── contact.jsx # Contact page
│ │ └── education/ # Educational pages
│ │ ├── organik.jsx # Organic waste info
│ │ ├── anorganik.jsx # Inorganic waste info
│ │ └── berbahaya.jsx # Hazardous waste info
│ ├── assets/ # Images and media files
│ │ └── image/
│ │ ├── Article/ # Blog article images
│ │ ├── background/ # Background images
│ │ └── team/ # Team images
│ ├── App.jsx # Main app component with routing
│ ├── App.css # App styles
│ ├── main.jsx # React DOM entry point
│ └── index.css # Global styles
├── eslint.config.js # ESLint configuration
├── vite.config.js # Vite configuration
├── tailwind.config.js # Tailwind CSS configuration
├── postcss.config.js # PostCSS configuration
├── package.json # Project dependencies
└── index.html # HTML entry point
| Route | Page | Description |
|---|---|---|
/ |
Home | Landing page with hero section |
/about |
About | About Recyclens and its mission |
/scan |
Scan | Waste classification scanner |
/organik |
Organic Waste | Educational content on organic waste |
/anorganik |
Inorganic Waste | Educational content on inorganic waste |
/b3 |
Hazardous Waste | Educational content on hazardous waste |
/blog |
Blog | Environmental sustainability articles |
/contact |
Contact | Contact and support page |
- Upload Image: Users visit the
/scanpage and upload a waste item image - AI Processing: The image is sent to the ML API for classification
- Result: The system returns the waste category and handling recommendations
- Education: Users can learn more through educational pages tailored to each waste type
This project is configured for Vercel deployment:
npm run build
# Deploy using Vercel CLI
vercel deployCheck vercel.json for deployment configuration.
Ensure the API endpoint is correctly set in your deployment environment:
- ML API Base:
https://web-production-c8bf2.up.railway.app
| Script | Command | Description |
|---|---|---|
| Dev | npm run dev |
Start development server with HMR |
| Build | npm run build |
Build for production |
| Lint | npm run lint |
Check code quality |
| Preview | npm run preview |
Preview production build |
If port 5173 is in use, Vite will automatically try the next available port. Check the terminal output.
- Verify the ML API endpoint is accessible
- Check network connectivity
- Review browser console for CORS issues
# Clear cache and reinstall
rm -rf node_modules package-lock.json
npm install
npm run buildContributions are welcome! Please follow these steps:
- Create a feature branch (
git checkout -b feature/YourFeature) - Make your changes
- Run linting (
npm run lint) - Commit your changes (
git commit -m 'Add YourFeature') - Push to the branch (
git push origin feature/YourFeature) - Open a Pull Request
This project is part of the Recyclens initiative. All rights reserved.
For questions, issues, or support:
- Visit the Contact Page
- Check out the About Page
- React and Vite communities for excellent tools
- Tailwind CSS for beautiful styling framework
- All contributors and team members dedicated to environmental sustainability
Happy recycling with Recyclens! 🌍♻️