Plastic Free Living

Inspiration

Living in [EU/US city], I watched single-use plastic pile up in my neighborhood—at grocery stores, in bathrooms, even during outdoor trips. I wanted a tool that didn’t just preach sustainability, but made it actionable. Seeing local plastic bans take effect, I knew people needed clear, practical support to adapt—so Plastic Free Living was born.

What it does

It’s a holistic platform for anyone wanting to cut plastic: audit daily plastic use to find waste hotspots, browse trusted sustainable product alternatives, locate package-free stores nearby, and join community challenges to track progress toward zero-waste goals. Every feature is built to fit real, everyday life.

How we built it

I started with core UX principles, mapping out how users would move from "wanting to change" to "taking action." Using HTML5 and CSS3, I built responsive layouts that work on phones, tablets, and desktops—critical for on-the-go store searches or at-home audit tracking. JavaScript powered scroll-triggered animations (via IntersectionObserver) and interactive elements like product filters and progress trackers, while CSS gradients/transforms brought the natural, warm visual identity to life.

Challenges we ran into

The biggest hurdle was balancing animation polish with performance—too many motion effects risked lag on older devices. I had to refine animations to use only GPU-accelerated properties (transform/opacity) and add support for reduced-motion preferences, ensuring accessibility for all users. Responsive navigation was another pain point; perfecting the hamburger menu transition for mobile while keeping the frosted-glass desktop nav intact took multiple iterations.

Accomplishments that we're proud of

Creating a platform that’s both visually engaging and genuinely useful—every animation serves a purpose (guiding attention, rewarding interaction) rather than just looking flashy. The responsive design works flawlessly across all devices, and the focus on real-world usability (like regional plastic ban guidance) makes sustainability feel achievable, not overwhelming.

What we learned

I deepened my understanding of accessible animation practices and how to center user needs (not just aesthetics) in web design. I also learned that sustainability tools need to be practical first—users don’t want jargon, they want clear steps and local resources. Most importantly, I saw how small, intentional design choices (like hover micro-interactions) make eco-friendly actions feel rewarding.

What's next for this project

First, expand the product directory to include more regional brands and price points, reflecting diverse budgets. Then, add community features—user-submitted tips and success stories—to foster connection. Long-term, integrate local plastic policy updates to keep the shopping guide hyper-relevant, and explore partnerships with zero-waste retailers to make sustainable swaps even easier to access.

Built With

• css3
• html5
• intersectionobserver-api
• javascript