Power Suits C: Citizen Hero

Citizen Hero turns everyday problems into AI-powered Hero Quests with missions, steps & SGXP rewards. v2 adds Raindrop-deployed backend, Vultr storage, health & quest APIs and a live HUD.

Comment

Inspiration

Citizen Hero was born out of a desire to empower everyday people—especially kids and solopreneurs—who want to make a difference but don’t know where to start. Turning “I care” into “I did” is hard, so we wrapped civic engagement in a fun, sci-fi-themed experience that encourages action.

What it does

The web app invites users to enter a mission idea, choose how they want to help (raise supplies, raise awareness, or organize helpers), and our Suit Brain generates a Hero Quest. Each quest includes a name, mission summary, 3–5 concrete steps, Super Greatness Experience Points (SGXP) rewards for each step, plus reflection prompts and safety notes. Players can save quests to their Suit Log and share them with others. When deployed with Raindrop API keys, the generator uses Raindrop SmartInference to craft richer quests; without credentials it falls back to a local rule-based generator.

How we built it

The frontend is a single-page UI built with HTML and JavaScript that uses a tiny config.js to automatically select the API base URL (localhost for development and our Raindrop URL for production). All fetch calls reference this base URL. The backend is a Python/Flask API deployed on Raindrop’s MCP; a manifest.yaml defines the service and environment variables. We added a db.py module for Postgres helpers (init_schema, insert_quest, list_quests and get_quest_by_id) and rewrote app.py to use them. It now exposes a health check (/healthz), manages a session cookie, enables CORS and provides /quests/<id> and /quests endpoints backed by Vultr Managed PostgreSQL. Local development uses SQLite; production uses Vultr. Environment variables (RAINDROP_API_URL, RAINDROP_API_KEY, DATABASE_URL, APP_ENV) live in .env.example. The repo includes updated documentation and a live HUD deployed as a static site.

Challenges we ran into

Connecting the frontend and backend while supporting both local dev and cloud deployment required careful URL handling. Designing prompts that produced actionable quests and handling the fallback when SmartInference is not enabled took iteration. Ensuring reliable storage with SmartSQL/SmartMemory and integrating the Vultr database required debugging, as did configuring CORS and session cookies across hosts.

Accomplishments that we’re proud of

We delivered a working prototype that transforms any idea into a playable quest with clear steps and XP rewards. The v2 build deploys the backend on Raindrop, integrates a genuine Vultr Postgres database, includes a health‑check and quest retrieval API, and automatically switches between local and production configs. The app runs locally or in the cloud, stores quests in a database and presents them through a polished HUD. We’re proud of shipping a full stack AI application within the hackathon timeline.

What we learned

We learned how to build applications on Raindrop’s platform, how to design prompts for SmartInference, and how to leverage Vultr’s managed PostgreSQL. We gained experience deploying via Raindrop MCP, managing environment variables securely, and building a single-page web app that runs anywhere. The project taught us to scope features to build a polished MVP quickly.

What’s next for Power Suits C: Citizen Hero

Next we plan to add voice-based interactions, multiplayer quests, leaderboards and a “Civic City” map. We want to expand into schools, youth organizations and communities to turn compassion into action.

Built With

Share this project:

Updates