What I Built
Vitality is an interactive web app that turns everyday choices into clear, local climate math. Instead of abstract dashboards, users log commute, hydration (plastic bottles), travel, home electricity, food, and streaming in one flow. The app computes CO₂-equivalent on the device, shows a balance score, a full ledger, charts, a recovery plan (e.g. trees to offset, bus outlook), and “you vs nature” comparisons using simple, explainable yardsticks like a tree’s rough daily uptake—so impact feels tangible.
History saves per calendar day in the browser; photos beside each section are real bundled images. An optional Gemini API route can add warm coaching text from a short summary you send—all numbers stay authoritative from the app, not the model.
Demo
Code
*How I built this
*
Next.js 14 (App Router) + TypeScript for routing, layouts, and API routes.
Tailwind CSS + Framer Motion for the “eco-app” UI and motion.
Recharts for stacked impact visuals; Lexend via next/font.
Core logic as pure functions (vitalityMath, ledger) so scores and grams are repeatable and auditable.
History with localStorage and local date keys; past days are read-only.
next/image + assets under public/vitality/.
Gemini only in POST /api/gemini-coach with @google/generative-ai; GEMINI_API_KEY lives in .env.local / Vercel—never NEXT_PUBLIC_.
Deployed on Vercel from GitHub.
Top comments (0)