WayneHacks 4 — GreenUpDoe!
▶ Watch the presentation video ← https://youtu.be/7GzSNTZBR4U?si=NLX5OKGjYseMf1Gf
GreenUpDoe! — Explore Your City. Connecting Neighborhoods.
GreenUpDoe! is a Detroit-focused sustainability web app that lets residents calculate their personal carbon footprint in under 60 seconds, see a breakdown of their impact across transport, diet, energy, and flights, and discover local Detroit events and transit options to reduce that impact. A built-in rewards system lets users earn points by checking into real Detroit events, redeem vouchers at partner venues, and track their green streak over time. The app is rooted in the city — tied to the Joe Louis Greenway Partnership, DDOT/SMART/QLine transit info, MoGo bike share, and Eastern Market.
| Name | Role |
|---|---|
| Stephanie Moreno | UI Design / Point System Features |
| Maha Uddin | Backend / Node.js / React |
| Aiso Penaloza | Data / Research / Presentation |
| Adrian Penaloza | Presentation / Research / Data |
wassupitzmaha-waynehack/
├── carbon-backend/ # Node.js/Express API server
│ ├── server.js # Entry point — starts the API on port 5000
│ ├── routes/calculate.js # POST /api/calculate — main endpoint
│ ├── logic/
│ │ ├── calculateEmissions.js # Core carbon math
│ │ └── getSuggestions.js # Generates personalized action tips
│ └── data/emissions.json # Emission factors (transport, diet, energy, flights)
│
└── carbon-frontend/ # React app (Create React App)
└── src/
├── App.js # Router — all page routes defined here
├── pages/
│ ├── Home.js # Landing page with hero + info sections
│ ├── Quiz.js # 5-question carbon footprint quiz
│ ├── Results.js # Results page (routes to ResultsPage component)
│ ├── Events.js # Detroit local events with filter + transit info
│ ├── Transit.js # Detroit transit guide (DDOT, SMART, QLine, etc.)
│ ├── Greenway.js # Joe Louis Greenway info page
│ ├── Partners.js # Partner venues + organizer-listed events
│ └── Rewards.js # Points, streaks, check-in codes, voucher redemption
├── components/
│ ├── Navbar.js # Fixed nav with user avatar + points display
│ ├── QuizCard.js # Individual quiz question card
│ ├── ProgressBar.js # Quiz step progress indicator
│ ├── ResultsPage.js # Full results UI with chart, breakdown, suggestions
│ └── SuggestionCard.js # Individual action tip card
├── data/
│ ├── eventsData.js # Seed dataset of Detroit events
│ └── questions.js # Quiz question definitions
└── utils/
└── storage.js # All localStorage helpers (events, codes, activity log)
| File | What it does |
|---|---|
carbon-backend/logic/calculateEmissions.js |
Takes quiz answers, multiplies by emission factors, returns kg CO₂/year broken down by category |
carbon-backend/logic/getSuggestions.js |
Sorts emission categories highest-first, picks random tips from a curated pool per category |
carbon-frontend/src/pages/Quiz.js |
Walks user through 5 questions, POSTs to backend, navigates to results |
carbon-frontend/src/components/ResultsPage.js |
Renders grade, radial chart, breakdown grid, AI tips, and relevant local events |
carbon-frontend/src/utils/storage.js |
Single source of truth for all localStorage — events, check-in codes, vouchers, activity log |
carbon-frontend/src/data/eventsData.js |
Seed data for 6 real Detroit events with points, transit routes, and admission info |
- Node.js v18 or higher
- npm
git clone https://github.com/wassupitzmaha/waynehack.git
cd waynehackcd carbon-backend
npm install
npm start
# API runs on http://localhost:3001cd ../carbon-frontend
npm install
npm start
# App opens at http://localhost:3000- Open http://localhost:3000
- Click Take the Quiz and answer 5 questions
- View your carbon footprint score, breakdown, and personalized tips
- Explore Events, Transit, and Greenway
- Sign up as user and start earning points
- Sign up as organizer and register local events
Note: The frontend calls
http://localhost:3001/api/calculate— make sure the backend is running before submitting the quiz.
| Layer | Technology |
|---|---|
| Frontend | React 19, React Router v7, Recharts |
| Backend | Node.js, Express 5 |
| State | Browser localStorage (no database needed) |
| Styling | Inline CSS / custom design system |
| Data | Static JSON emission factors + seeded event data |
