This is a submission for Weekend Challenge: Earth Day Edition
What I Built
GreenStep is a web app that shows you how to lower your carbon footprint and understand it better. Most people have a vague sense that their habits affect the planet but no clear picture of how much. GreenStep makes that happen.
You log your daily activities like driving to work, taking a flight, or eating a burger into the app, and it instantly tells you how much CO2 those activities produce. A live dashboard shows your footprint growing over time with charts, so you can see trends right away. The Google Gemini-powered AI layer looks at your personal activity data and gives you specific, actionable suggestions based on your habits. These are not general tips, but suggestions based on what you actually logged.
The goal was easy: show what was hidden. When you realise that your carbon footprint is a real number that changes with every choice you make, you start making different choices.
Demo
Deployed URL — https://green-step-ai.vercel.app
Screen recording — https://youtu.be/sAft5XNsWeU?si=hrqVKmSPTdfvtoWH
Code
GitHub repo — https://github.com/cybort360/greenStep-AI
How I Built It
Stack: React, Next.js, Tailwind CSS
Frontend: I used React and Next.js to build the UI. The activity logging form is easy to use; just choose a category (transport, food, energy, shopping), fill in the details, and submit. Each submission hits an API route that uses standard emissions factors from the EPA and IPCC datasets to calculate the CO2e value.
Charts and Dashboard: The progress dashboard uses Recharts to show line and bar charts of your footprint over days and weeks. You can see which categories add the most to your total. For most people, transport is the biggest one.
Google Gemini: The app sends a structured summary of a user's recent activities to the Gemini API after they log them. The prompt breaks down the activities by category and asks Gemini to come up with three to five specific, ranked suggestions based on what would have the biggest impact on that user. The response streams back and shows up right away in the UI. This isn't a list of general tips; Gemini looks at your real data and reacts to it. If you've flown three times this month, for instance, it will put that ahead of telling you to switch to LED bulbs.
Backboard: I used Backboard to keep the app's data in sync in real time. When you log an activity, your dashboard updates right away without having to refresh the page. Backboard keeps track of the live state so that your totals and charts show new entries as soon as they are made. When the main loop is "log something, see its effect right away," this made the experience feel responsive instead of static and also give the AI memory.
Key Decision: I made the activity input on purpose very simple. I wanted there to be no friction between a user's daily moment ("I just drove 30 miles") and logging it. People often give up on complicated carbon calculators because they ask for too much up front. GreenStep only asks for the bare minimum to get a useful number, and then it lets Gemini fill in the rest.
Prize Categories
Best Use of Google Gemini: Gemini powers the AI recommendation engine. It receives a personalized summary of the user's logged activity data and generates ranked, specific suggestions for reducing their footprint. The integration is core to the product. Without it, GreenStep is just a calculator. With it, it becomes an advisor.
Best Use of Backboard: Backboard drives the real-time sync layer. Activity logs written by the user propagate instantly to the dashboard, keeping charts and totals live without requiring manual refreshes or polling. It made the feedback loop between "I did this" and "here is its impact" feel immediate.
Top comments (0)