Inspiration
Climate topics feel abstract; we wanted a hands‑on way to “feel” the trade‑offs. Tech for Social Good theme: use a browser game to reach classrooms quickly. Make systems thinking approachable with visible numbers and immediate feedback.
What it does
A lightweight strategy game where you balance income vs. planetary harm. Start with “bad systems” (Oil/Coal/Deforestation) and invest in “good systems” (Solar/Wind/Sustainable Farm/Reforestation). Manage Planet Health, Population Health, and Resources; time a “Heal” action on cooldown. Lose when planet or population hits zero; get a score and narrative summary.
How we built it
Frontend: Next.js 14 (App Router), Tailwind CSS, TypeScript. Game loop/visuals: Phaser integrated into the Next.js app. Auth stack ready with NextAuth v5 (game is public by default). Built with AI agents under human direction: the human set scope, reviewed code, and integrated components; AI generated most of the implementation. Polished UX: confirm modal for surrender, clear HUD, dark-only theme, and a structured README + 1‑page overview.
Challenges we ran into
Balancing mechanics so income/consumption/damage feel fair and teach trade‑offs. Next.js hydration nuances with theming (resolved via class strategy + suppressHydrationWarning). Integrating Phaser scenes cleanly within the React/Next lifecycle. Routing/auth rules so the game loads at “/” while keeping other flows intact. Linting quirks (e.g., Next.js img rule) and keeping types clean during fast iteration.
Accomplishments that we're proud of
A fully playable browser game that makes climate trade‑offs tangible in minutes. Clear, surfaced metrics (income per second, required resources, damage/sec). Clean UX touches: ambient music with Submission-ready docs: README with quick-start + HACKATHON_OVERVIEW.md with mechanics and demo script. Transparent AI disclosure and responsibly directed AI-assisted development.
What we learned
AI can be a strong force multiplier when a human provides direction and code review. Visible, simple numbers drive understanding and “aha” moments in systems education.
What's next for Save a Planet
Onboarding/tutorial flow and difficulty modes. More systems/events (disasters, policies, tech upgrades) and rebalance passes. Persistence (save states), leaderboards, and classroom/teacher dashboards. Mobile optimization, accessibility audits, localization. PWA packaging and analytics to measure learning impact.
Log in or sign up for Devpost to join the conversation.