repo: https://github.com/codedreww/canadian-archive.git check it out: https://canadian-archive.vercel.app/
Inspiration
We wanted to make learning Canadian history fun, not something that feels like a textbook or a boring timeline you scroll through once and forget.
When we saw the prompt “Preserve today for tomorrow: Why archives matter”, it clicked. Archives aren’t just dusty records they’re how future generations understand who we were, what we believed, and how we changed. If knowledge isn’t preserved and made accessible, it slowly disappears or gets rewritten.
So instead of building a traditional archive viewer, we asked: What if learning history felt like exploring a game world?
That’s where Canadian Archive came from, a gamified, interactive way to experience Canadian history through preserved, source-backed eras.
What it does
Canadian Archive is a gamified experience where users explore Canadian history through interactive eras and nodes.
Users can:
Move through different historical eras (like Origins, Contact, Confederation, Modern, Digital)
Click on “nodes” that represent important events
Learn what happened, why it mattered, and how it shaped Canada today
See how preserved records help us understand these moments
Each event is source-backed and structured like a mini experience, not just a paragraph of text. The goal isn’t to overwhelm users with dates — it’s to make them feel the progression of history and understand how archives preserve national identity.
We also added a chatbot powered by Gemini, so users can:
Ask follow-up questions
Dive deeper into specific events
Explore “what if” scenarios
It turns history into something interactive and explorable rather than static.
How we built it
We built Canadian Archive using:
Next.js + JavaScript for the frontend
SVG and DOM Web APIs to render the interactive 8-bit map and era exploration, driven by a custom requestAnimationFrame game loop
Gemini API to power the AI chatbot for deeper learning and engagement
The map is fully interactive, and each era is designed like a level you can explore. We leaned into a retro 8-bit theme to make the experience feel more playful and less academic.
Challenges we ran into
We don't really have any experience on making any game loop before...
So we were learning:
How to render interactive maps
How to handle sprites and layouts
How to structure the scene
At the same time, we were figuring out the retro 8-bit visual direction. Designing something that feels nostalgic but still clean and readable was harder than we expected.
We also had to think carefully about how to split Canadian history into meaningful eras without oversimplifying it. Deciding what to include and what not to, was a big challenge.
A lot of it was learning on the spot and adjusting as we went.
Accomplishments that we're proud of
We’re really proud of the UI and the overall experience.
The 8-bit retro theme ended up giving the project personality, and it made exploring history feel more like a game than a lecture. Seeing users move through eras and interact with the nodes felt incredibly satisfying.
What we learned
We learned that coming up with a solid idea is honestly one of the hardest parts, narrowing it down and committing to one direction took real discussion and iteration. We learned a lot about teamwork: listening to each other, brainstorming openly, and building on each other’s ideas instead of shutting them down. And most importantly, we ended up learning a lot about Canadian history itself, especially how different eras connect and why preserving those stories actually matters.
What's next for canadian-archive
Right now, Canadian Archive is a focused prototype, but there’s a lot of room to grow. We want to expand the gamified design with more interactive features, deeper exploration within each era, and more historical events and perspectives. We could add richer source integration, multimedia content, and even new eras to make the experience more immersive and complete. The goal would be to keep building it into something that makes learning history engaging while still staying grounded in real, preserved records.
Built With
- gemini
- javascript
- nextjs
- pixi2d
Log in or sign up for Devpost to join the conversation.