-
HOME
-
HOW IT WORKS
-
CALCULATION
Inspiration
The idea for WasteWise came from a simple but widespread daily problem — most people want to dispose of waste correctly, but often don’t know whether an item should be recycled, thrown in organic waste, or treated as hazardous.
We noticed that improper waste disposal contributes to environmental pollution, recycling failures, and health risks. During the hackathon, we aimed to build a lightweight, practical tool that anyone could use to quickly find out how to dispose of everyday items responsibly.
Our goal was to create a browser-based sustainability assistant that is fast, intuitive, and encourages correct waste management through instant guidance.
How we built it
WasteWise was built entirely with HTML, CSS, and JavaScript, making it fully functional in the browser without any backend.
The user can type in the name of a waste item — like “battery”, “plastic cup”, or “mask” — and the app instantly identifies the waste category and shows the proper disposal method using rule-based logic in JavaScript.
Key components include:
Home page: Project introduction with navigation
Generate page: User enters item names and receives disposal instructions
Rule-based waste classification engine in JS for instant results
Result display: Waste category, disposal tips, eco-friendly alternatives, and upcycling suggestions
Accessibility and UX features:
Text Size Adjuster (A-, A, A+, A++)
Search History dynamically updated
Multi-language Toggle (English, Spanish, French)
Virtual Field Trip (visual recycling facility tour)
Circular Economy Map (showing how recycled items are reborn)
Waste-Free Recipes (e.g., cooking with food scraps)
Custom Item Illustrations
Progress Animations (growing plant with each search)
Waste Decomposition Timeline
Waste Prep Checklist
Alternative Eco-Friendly Suggestions
Upcycling Ideas
Bulk Shopping Tips
Offline Mode Indicator
Dark/Light Mode Toggle
We focused on keeping the interface clean, interactive, and beginner-friendly, so that anyone can use the app immediately.
What we learned
Through building WasteWise, we learned how to:
Create a sustainability-focused application with practical real-world impact
Implement rule-based classification in JavaScript
Connect frontend forms with dynamic interactive displays
Build a multi-page navigation structure for smooth UX
Present environmental information clearly and intuitively
The project reinforced the idea that small digital tools can drive meaningful environmental awareness.
Challenges we ran into
Some of the main challenges included:
Designing accurate waste categories for a wide variety of items
Handling spelling variations and unknown items gracefully
Keeping the logic simple yet useful
Creating a responsive UI that works across devices and screen sizes
By testing with multiple example items and iterating on the design, we improved both accuracy and usability.
Accomplishments we’re proud of
Fully functional waste disposal guidance tool built entirely in the browser
Instant classification into recycle, organic, or hazardous waste
Practical and educational real-world use case
Clean multi-page interface with intuitive navigation
Working MVP completed within the hackathon timeline
Integration of 15 interactive and gamified features to enhance engagement
What’s next
Future improvements could include:
Image upload for automatic waste identification using computer vision
Expanding the item database with more categories
Adding location-based disposal guidelines according to local regulations
Daily eco-tips and awareness messages
Fully mobile-friendly version for broader accessibility
WasteWise has the potential to become a daily companion for responsible waste management, helping users take small actions that collectively benefit the planet.
Log in or sign up for Devpost to join the conversation.