Inspiration
Living in a city where single-use plastic and food waste felt inescapable, I wanted to create something tangible to make sustainable living accessible. Seeing friends struggle to find bulk stores or swap out plastic products sparked the idea: a one-stop guide tailored to our daily lives.
What it does
Zero Waste Guide empowers eco-conscious folks to track waste, find plastic-free product swaps, locate local bulk stores, and join community sustainability challenges—all with a sleek, intuitive design.
How we built it
I started with core HTML structure, layered Tailwind CSS for responsive, modern styling (glassmorphism, gradients), and added JavaScript for animations, tab interactions, and Chart.js integration for waste data visualization. All assets (fonts, icons, Chart.js) use CDNs for fast loading.
Challenges we ran into
Balancing smooth animations with accessibility (respecting prefers-reduced-motion) was tricky—ensuring animations enhanced UX without overwhelming users. Also, making the responsive layout work seamlessly across mobile/desktop required endless testing.
Accomplishments that we're proud of
Crafting a visually striking UI (animated gradients, micro-interactions) that’s still functional and accessible. The waste audit chart and progress bar animations make data engaging, and the community challenge feature feels truly inclusive.
What we learned
I deepened my understanding of CSS keyframe animations, Chart.js customization, and responsive design best practices. Most importantly, I learned to center user needs—prioritizing usability over flashy design for a tool people actually want to use.
What's next for this project
Expand bulk store data to cover more regions, add user-generated content for DIY recipes, integrate local waste collection schedules, and build a mobile-friendly PWA version for on-the-go access.
Log in or sign up for Devpost to join the conversation.