Inspiration
I noticed that a lot of climate apps feel distant, technical, or guilt-heavy. People want to help—but it’s hard to connect today’s small choices to any real impact. We need something friendly, instant, and personal. Choice2Change shows how everyday decisions—bus vs. car, beef vs. veg, AC vs. fan—change your footprint right now, in numbers you can understand. It’s built like a simple coaching loop: make a choice → see the CO₂ update instantly → get a gentle suggestion for a cleaner swap. No jargon, no lectures—just clear feedback and small wins that anyone can act on today.
What it does
Daily Choice Simulator across three areas: Transport, Diet, Energy — tap simple chips (e.g., bus vs. car, beef vs. veg, AC vs. fan) and see the impact instantly.
Instant CO(_2)e total with a per-category breakdown and a friendly emoji rating (🌱 low / ⚠️ medium / 🔥 high).
AI-powered suggestions that propose small, high-impact swaps (e.g., “take the bus today” or “go plant-forward for dinner”), showing the estimated CO(_2)e saved.
Charts & graphs that visualize your footprint split by category and the day’s total at a glance.
28-day history with a heatmap (to spot streaks) and a sparkline (to see dips/spikes).
Auto-save to local storage (no account needed) + CSV export for your own analysis.
Climate News banner + a small, curated 3-story grid with resilient thumbnails (local/remote fallbacks) so news informs without overwhelming.
Earth’s Mood popup — a playful micro-coach that mirrors your rating and offers encouragement.
Math
Total footprint for the day
$$ C_{\text{total}} \;=\; C_{\text{transport}} \;+\; C_{\text{diet}} \;+\; C_{\text{energy}} $$
How I built it
Frontend: React (functional components + hooks).
UI: Custom CSS (dark/gradient cards, chips, tiles) + lucide-react icons.
Viz: SVG sparkline and a CSS-grid heatmap (4×7 weeks × days).
Data & Storage: Emission factors (kg CO₂e per unit); localStorage keyed by ISO date for daily values.
News: NewsAPI / GNews when available, RSS fallback (proxied) with robust image fallback (local cover → Unsplash backup).
Export: Client-side CSV (no backend).
Transport uses km × factor (car/bus/train/fuel type), diet sums meal item factors, energy combines kWh × grid factor, heating fuel, and appliance heuristics (kWh/h × hours).
Challenges I ran into
Reliable thumbnails for news items—many RSS entries lack images. I added a deterministic, layered fallback and defensive parsing.
Chronology & averages: fixing the heatmap week order and making the 7-day average match expectations (normalized over 7, not “average of available”).
Simplicity vs. realism: choosing factors that are understandable while still meaningful across regions.
CORS on RSS: solved with a proxy fallback and resilient XML parsing.
Accomplishments that I'm proud of
A UI people want to touch. Friendly, lightweight, and fast—climate data without the “dashboard dread.”
History that motivates. A 28-day heatmap + sparkline makes streaks and dips obvious at a glance.
Built-in resilience. Smart fallbacks for news thumbnails and feeds (API → RSS), plus safe defaults when data is missing.
Privacy by design. Entirely client-side—no sign-up, no server, quick demos, and portable.
AI that guides choices. Integrated lightweight machine learning models to provide personalized climate tips and insights, blending data-driven AI with user-friendly development.
What I learned
Micro-UX matters. Chips, soft gradients, and tiny animations make the app feel approachable and boost engagement.
Design the failure path. “No image? No problem.” “No API key? Use RSS.” Graceful degradation builds trust.
Action beats abstraction. People respond to specific swaps (“bus today,” “plant-based dinner”) more than big totals.
Make math legible. Rounding, per-category chips, and simple visuals help non-experts understand impact quickly.
What's next for Choice2Change
Personal daily goal + streaks. Set a target (e.g., ≤ 12 kg CO₂e/day), earn streaks, and get gentle reminders that celebrate consistency—not perfection.
“What-if” preview chips. See the difference before you commit. Each chip shows the estimated change in emissions (ΔCO₂e) for swaps like Car → Bus or Beef → Veg, so choices feel informed, not guessy.
Installable & offline (PWA). Add to homescreen and use the app without a network; data syncs when you’re back online.
Fast onboarding presets. One-tap profiles—Commuter, Student, Remote—to prefill typical behaviors and reduce first-run friction.
Regional factors & accessibility. Use local emission factors (grid mix, transport averages), improve contrast/keyboard support, and add screen-reader friendly labels.
Built With
- api
- blob-+-url.createobjecturl-(csv-export)-svg-(custom-sparkline)-+-custom-charts-via-your-beautifulcharts-component-news-sources:-newsapi-/-gnews-(optional-via-react-app-newsapi-key
- css3
- custom-properties
- domparser-(rss)
- google-news
- gradients)-lucide-react-(icons)-localstorage-(on-device-persistence)-web-apis:-fetch
- javascript
- lucide-react
- react
- rss
- svg
