https://github.com/ztacole/recyclens-fe
https://github.com/ztacole/recyclens-fe
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ztacole/recyclens-fe
- Owner: ztacole
- Created: 2025-04-16T12:59:03.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-16T15:17:48.000Z (about 1 year ago)
- Last Synced: 2025-04-16T20:02:52.709Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://recyclens-fe.vercel.app
- Size: 94.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Recyclens - AI-Powered Waste Classification System
> 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.
---
## 🌟 Features
- **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
---
## 🛠️ Tech Stack
- **Framework**: [React 19](https://react.dev) - UI library
- **Build Tool**: [Vite 6.2](https://vitejs.dev) - Next-generation build tool
- **Styling**: [Tailwind CSS 4.1](https://tailwindcss.com) - Utility-first CSS framework
- **Routing**: [React Router DOM 7.4](https://reactrouter.com) - Client-side routing
- **Icons**:
- [React Icons 5.5](https://react-icons.github.io/react-icons)
- [Font Awesome](https://fontawesome.com)
- [Lucide React](https://lucide.dev)
- **Carousel**: [React Slick](https://react-slick.neostack.com)
- **ML Integration**: Connected to railway-hosted ML API for waste prediction
- **Code Quality**: ESLint for JavaScript linting
---
## 📋 Prerequisites
- Node.js v14 or higher
- npm or yarn package manager
- Git (optional, for cloning the repository)
---
## 🚀 Installation
1. **Clone the repository**
```bash
git clone
cd recyclens-fe
```
2. **Install dependencies**
```bash
npm install
# or
yarn install
```
3. **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](api/predict.js) if necessary
---
## 💻 Development
### Start Development Server
```bash
npm run dev
```
The application will be available at `http://localhost:5173` with hot module replacement (HMR) enabled.
### Build for Production
```bash
npm run build
```
Creates an optimized production build in the `dist` directory.
### Preview Production Build
```bash
npm run preview
```
Serves the production build locally for testing.
### Lint Code
```bash
npm run lint
```
Runs ESLint to check for code quality issues.
---
## 📁 Project Structure
```
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
```
---
## 🔗 Available Routes
| 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 |
---
## 🧠 How It Works
1. **Upload Image**: Users visit the `/scan` page and upload a waste item image
2. **AI Processing**: The image is sent to the ML API for classification
3. **Result**: The system returns the waste category and handling recommendations
4. **Education**: Users can learn more through educational pages tailored to each waste type
---
## 🌐 Deployment
### Vercel
This project is configured for Vercel deployment:
```bash
npm run build
# Deploy using Vercel CLI
vercel deploy
```
Check `vercel.json` for deployment configuration.
### Environment Variables
Ensure the API endpoint is correctly set in your deployment environment:
- ML API Base: `https://web-production-c8bf2.up.railway.app`
---
## 📝 Scripts Reference
| 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 |
---
## 🐛 Troubleshooting
### Port Already in Use
If port 5173 is in use, Vite will automatically try the next available port. Check the terminal output.
### API Connection Issues
- Verify the ML API endpoint is accessible
- Check network connectivity
- Review browser console for CORS issues
### Build Errors
```bash
# Clear cache and reinstall
rm -rf node_modules package-lock.json
npm install
npm run build
```
---
## 🤝 Contributing
Contributions are welcome! Please follow these steps:
1. Create a feature branch (`git checkout -b feature/YourFeature`)
2. Make your changes
3. Run linting (`npm run lint`)
4. Commit your changes (`git commit -m 'Add YourFeature'`)
5. Push to the branch (`git push origin feature/YourFeature`)
6. Open a Pull Request
---
## 📄 License
This project is part of the Recyclens initiative. All rights reserved.
---
## 📧 Contact & Support
For questions, issues, or support:
- Visit the [Contact Page](/contact)
- Check out the [About Page](/about)
---
## 🙏 Acknowledgments
- 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! 🌍♻️**