Making recycling easier, smarter, and more accessible.
🚧 Currently in development for a hackathon 🚧
Recycling can be confusing.
Different materials have different recycling rules, and what can be recycled may depend on the local recycling program. People may also have trouble finding nearby places that accept specific materials.
RecycleRight aims to simplify this process:
IDENTIFY → UNDERSTAND → RECYCLE
Users can enter a material such as:
- Plastic
- Glass
- Metal
RecycleRight provides basic information about how the material should be handled.
RecycleRight can access the user's camera and capture an image of an item.
Current workflow:
SCAN AN ITEM
↓
OPEN CAMERA
↓
TAKE PHOTO
↓
CAPTURE IMAGE
The camera system is currently being developed toward a more advanced item-recognition feature.
The website uses responsive CSS so that the interface can adapt to smaller screen sizes.
| Technology | Purpose |
|---|---|
HTML |
Website structure |
CSS |
Styling and responsive layout |
JavaScript |
Application logic and interactivity |
MediaDevices API |
Accessing the user's camera |
Canvas API |
Capturing camera frames |
Git / GitHub |
Version control and project development |
More technologies and APIs will be added as development continues.
Users will eventually be able to find recycling locations near them.
ENTER LOCATION
↓
CHOOSE MATERIAL
↓
FIND NEARBY LOCATIONS
↓
DISPLAY RECYCLING OPTIONS
The long-term goal is to allow users to photograph an item and have RecycleRight help identify it.
📷 PHOTO
↓
IMAGE RECOGNITION
↓
"PLASTIC BOTTLE"
↓
♻️ RECYCLING INFORMATION
RecycleRight will provide useful information about:
- Whether an item is recyclable
- How to prepare it for recycling
- Where it can be recycled
- Local recycling requirements
Potential future features include:
- ⭐ Recycling points and rewards
- 📊 Recycling statistics
- 📚 Educational articles
- 🧴 More material categories
- 📍 Better location filtering
- 🤖 Improved image recognition
This project is helping me develop my web development and software engineering skills.
Current learning areas include:
- JavaScript DOM manipulation
- Event listeners
- Functions
- Variables
- Conditional logic
- Arrays and objects
- Browser APIs
- Camera access
- Canvas rendering
- Responsive CSS
- Git and GitHub
- APIs
- JSON
- Frontend development
- Basic website structure
- Responsive styling
- Material input
- Material-based recycling responses
- Camera access
- Live camera preview
- Photo capture using Canvas
- Improved scanner interface
- Recycling information database
- Recycling location finder
- Map integration
- Item recognition
- Final hackathon polish
RecycleRight/
│
├── index.html
├── style.css
├── script.js
└── README.md
The goal of RecycleRight is to create a simple tool that helps people answer:
"What should I do with this item?"
Instead of searching through different websites and recycling rules, users should eventually be able to use RecycleRight to:
IDENTIFY AN ITEM
↓
UNDERSTAND HOW TO DISPOSE OF IT
↓
FIND A RECYCLING LOCATION
↓
RECYCLE IT CORRECTLY
GitHub Repository: RecycleRight — Hackathon Project
Ankitha Mukund
Built as a learning project and hackathon submission.
Don't just throw it away. Know the right way.