Somos Héroes
Case study: Somos Héroes.
Problem
Somos Héroes is a classroom storytelling game based on the hero’s journey. Run in person, it needs paper notebooks, physical cards and dice. The owner of the method wanted a web version so schools anywhere could play, evaluate and show their students’ stories without printed material.What I did
- Web developer (freelance), working alone: design, code and deployment, with a demo every week.
- Built the student flow (hero, characters, journey map, the nine stages and the full story), sign-in with three user roles, teacher approval, class invite codes and a small editor for the intro videos.
Stack and architecture
- Firebase with no servers to run: Auth, Firestore, Storage, Cloud Functions and Hosting.
- React and TypeScript front end that talks to Firestore and Storage directly; security rules are the authorisation layer and Cloud Functions handle only privileged operations.
- Roles through custom claims; Spanish and English from day one. Built for use by minors under Spanish data-protection law.
Outcome
- Students write their story stage by stage and record it as audio in the browser, with a teleprompter.
- Teachers score the stories on six criteria; the same criteria drive peer voting.
- A public world map shows the participating schools and the stories their teachers choose to share.
- Live at somosheroes.web.app.