Fetching latest headlines…
Vitality for Earth Day
NORTH AMERICA
🇺🇸 United StatesApril 20, 2026

Vitality for Earth Day

0 views0 likes0 comments
Originally published byDev.to


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.

Comments (0)

Sign in to join the discussion

Be the first to comment!