Green Commute Planner

Inspiration

Living in a busy European city, I grew frustrated with how much my daily commute contributed to carbon emissions – and how hard it was to find simple, all-in-one tools for sustainable travel. I wanted to create something that made green commuting easy, rewarding, and visually engaging – no jargon, just actionable steps for everyday people.

What it does

Green Commute Planner is a web platform that lets users plan multi-modal eco-friendly routes (cycling, transit, carpool), find nearby bike-sharing stations, match with carpool partners, and track carbon savings/health rewards – all in a sleek, intuitive interface designed for urban commuters.

How we built it

I started by mapping the core user journey (from hero section to tabbed features) and defining a nature-focused color palette. I built the UI with HTML5/CSS3 (using Flexbox/Grid for responsiveness), added smooth animations via CSS and JavaScript (Intersection Observer for scroll triggers), and used SVG icons for lightweight, scalable visuals. The glassmorphism nav and gradient animations were hand-coded for that immersive feel.

Challenges we ran into

The biggest hurdle was syncing staggered animations (for feature cards/route results) to feel natural – too fast and it felt chaotic, too slow and it lagged. I also struggled to balance mobile responsiveness with the desktop’s visual richness (e.g., hero gradient scaling on small screens).

Accomplishments that we're proud of

Nailing the fluid, immersive animations that make the platform feel alive (without sacrificing performance) – and creating a fully responsive design that works seamlessly on both European city commuters’ laptops and mobile phones. Users love the carbon savings tracking – it turns abstract eco-impact into tangible numbers.

What we learned

I deepened my understanding of CSS gradient animations and Intersection Observer, but more importantly, I learned how to prioritize user-centric design for sustainability: simplicity beats complexity when encouraging everyday eco-behavior change. I also mastered balancing visual flair (glassmorphism, floating icons) with accessibility.

What's next for this project

First, I want to integrate real-time public transit APIs to pull live schedule data. Then, add a user profile section to track long-term carbon savings, and partner with local city councils to link the platform to real green incentive programs (e.g., transit discounts for frequent carpoolers). Finally, expand support for more North American cities to reach more commuters.

Built With

• backdropfilter
• flexbox
• githubpages
• grid