Turning Daily Habits into Magic: A Gemini-Powered Eco Dashboard for Kids

This is a submission for Weekend Challenge: Earth Day Edition

What I Built

Teaching kids about carbon emissions and sustainability can sometimes feel like a dry science lecture. I wanted to build something that turns daily environmental habits into an interactive, rewarding experience.

Eco-Hero Dashboard is a kid-friendly, interactive web application. Children can log their daily "green" activities—like recycling plastic, riding a bike, or saving water—by clicking engaging UI cards. Once they log at least three actions, the app uses the Google Gemini API to instantly write and display a custom, 3-paragraph adventure story where the child is the hero saving the planet using the exact actions they just logged.

My goal was to blend modern web architecture with AI to create a fun, educational loop for Earth Day!

Demo

Code

Live Application: https://planetary-mu.vercel.app/
Github url:https://github.com/revansh1710/planetary

How I Built It

1. The Frontend (Angular)
   I utilized modern Angular Components to keep the boilerplate to an absolute minimum. To manage the state of the child's clicked activities, I completely bypassed heavy libraries like NgRx and used Angular Signals. This allowed for a hyper-clean, reactive UI that effortlessly tracked the "action count" and unlocked the AI feature.

2. Security & Privacy First (Node.js Express Proxy)
   When building apps for kids, privacy is paramount. I built a lightweight Express backend deployed on Render to act as a secure middleman.

Key Protection: It keeps the Gemini API key completely off the client side.

Data Sanitization: The frontend never asks for or sends Personally Identifiable Information (PII) like the child's name. It only sends an anonymous array of actions (e.g., ["Recycled plastic", "Saved water"]) to the backend.

1. The Brains (Google Gemini 2.5 Flash) I utilized the @google/generative-ai SDK on my Node proxy to handle the story generation. I opted for the gemini-2.5-flash model because speed is critical for keeping a child's attention.

Prize Categories

Best Use of Google Gemini