GreenStep AI

Adedeji Olamide — Mon, 20 Apr 2026 03:12:37 +0000

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.

Why I Want to Be a Front-End Developer and How HNG Will Help Me Achieve My Goals

Adedeji Olamide — Fri, 31 Jan 2025 21:13:25 +0000

My Motivation: Bridging Creativity and Technology

From the moment I built my first webpage, I was hooked. Front-end development captivated me with its blend of creativity and technical precision, transforming lines of code into visually stunning, user-friendly interfaces. But my aspirations don’t stop there. My ultimate goal is to become a blockchain developer, creating decentralized applications (dApps) that empower users with transparency and security.

Front-end development is the perfect foundation for this journey. Blockchain technology thrives on user adoption, and intuitive interfaces are critical for making complex systems accessible. By mastering front-end skills like HTML, CSS, and JavaScript, I aim to build seamless experiences that bridge users with blockchain’s transformative potential.

How HNG Will Accelerate My Growth

The HNG Internship is a launchpad for aspiring developers like me. Here’s how it aligns with my goals:

1. Mastering Core Front-End Technologies

HNG emphasizes hands-on learning with modern web development tools. Their focus on JavaScript—a language pivotal for both front-end and blockchain development—will strengthen my ability to create dynamic interfaces. JavaScript frameworks like React, which HNG covers extensively, are also widely used in blockchain projects for building dApp frontends.

2. Collaboration and Real-World Projects

The internship’s collaborative environment mirrors real-world tech teams. Working on projects with peers will teach me agile workflows and version control, skills essential for contributing to open-source blockchain platforms. Moreover, HNG’s network includes professionals who can offer mentorship on integrating front-end systems with blockchain backends.

3. Pathway to Blockchain Development

While HNG’s web development program hones my front-end expertise, their JavaScript-centric curriculum (see HNG’s JavaScript Developer Hiring) prepares me for backend logic. This duality is crucial for blockchain, where smart contracts (often written in JavaScript-based languages like Solidity) require robust front-end integration.

My Goals for the HNG Internship

Build a Strong Foundation in Front-End Development

Action Plan: Complete all tasks diligently, focusing on responsive design and JavaScript frameworks.
Outcome: Create portfolio projects showcasing interactive web apps.

Explore Blockchain Integration

Action Plan: Use HNG’s resources to learn how APIs connect frontends with blockchain networks. Experiment with libraries like Web3.js.
Outcome: Develop a basic dApp interface that interacts with a blockchain testnet.

Network with Industry Professionals

Action Plan: Engage actively in HNG’s community, seek feedback, and connect with mentors experienced in blockchain.
Outcome: Gain insights into transitioning from front-end to blockchain roles.

The HNG Internship isn’t just a stepping stone—it’s a catalyst. By refining my front-end skills here, I’ll be equipped to tackle the unique challenges of blockchain development. Every button I design, every API I integrate, and every line of JavaScript I write brings me closer to my goal: building decentralized solutions that redefine how we interact with technology.