EcoSaver GDG Competition
overview
EcoSaver was built and deployed in a 7-day sprint for a Google Developer Group competition. The app provides AI-generated environmental recommendations personalised to the user's home setup, habits, and location delivered via structured JSON output from the Gemini API, not free-form text.
The core engineering challenge was getting reliable structured output from the Gemini API under competition time constraints. Rather than parsing free-form prose, we designed a prompt that instructs the model to respond with a schema-validated JSON object: recommendation categories, action items, estimated CO₂ impact, and priority scores. The app validates the schema client-side and falls back gracefully if the model returns malformed output.
Three.js was used for a 3D globe visualization showing the user's estimated carbon footprint relative to global averages. Netlify was configured with a CI/CD pipeline for zero-downtime continuous deployment from the main branch every push to main triggered a build and deployed to the CDN edge within 90 seconds.
architecture
User Input (habits, location, home type)
│
▼
Prompt Builder
└── structured prompt with schema instruction
│
▼
Google Gemini API
└── response: JSON { recommendations[], impact, priority }
│
▼
Schema Validator (client-side)
├── valid ──► render recommendation cards
└── invalid ──► retry with repaired prompt / fallback UI
│
▼
Three.js Globe
└── visualize CO₂ footprint vs global averageThe key insight was treating the Gemini API as a structured data source rather than a chat interface. The prompt includes an explicit JSON schema definition and instructs the model to respond only with valid JSON matching that schema. This makes the AI output predictable enough to drive UI rendering without a backend parsing layer.
technical.decisions
Free-form AI text responses require complex parsing to drive UI elements. By including an explicit JSON schema in the prompt and instructing the model to respond strictly in that format, we get output that maps directly to React component props. Client-side schema validation with a fallback catches the ~5% of responses that deviate.
A 7-day sprint means frequent, rapid deployments. Netlify's GitHub integration provides automatic build-and-deploy on every push with zero configuration, preview deployments for branches, and CDN distribution out of the box. This eliminated deployment as a time concern during the sprint.
A 2D bar chart would have been faster to build but a 3D globe communicates the global context of individual carbon footprints more effectively. The globe was scoped to a single interactive component with a minimal Three.js setup not a full 3D application keeping bundle size and complexity manageable.
outcomes
- Delivered and deployed within 7-day competition window
- Structured JSON output from Gemini API drives all UI rendering
- Zero-downtime Netlify CI/CD deploys in under 90 seconds
- Three.js globe visualization for CO₂ context