SkillCity

Inspiration

We were inspired by the game Overwatch, the novel Warcross, and the movie Spiderman: Into the Spiderverse. We wanted an engaging way to interact with new information and continuously improve, and felt that navigating different boroughs of a city and defeating enemies along the way was the perfect way to do that!

What it does

SkillCity is a web-based learning game where players battle through a futuristic map by answering subject-based questions. Correct answers give the users ammo, which allows them to defeat cyborgs and unlock progression along district paths. Players can track wins, losses, and advancement through topic nodes, and see leaderboards to compre progress and compete with others.

How we built it

We built SkillCity with Next.js, TypeScript, and Tailwind for the front end, Gemini for AI interactions, and Supabase for the backend/database.

Challenges we ran into

Creating the map and splitting it properly into different districts
Implementing splatter animations whenever the user shoots a cyborg
Implementing the red beacon to get ammo by answering questions

Accomplishments that we're proud of

The user can freely move around in the level they are currently playing in (large area for them to explore)
AI agent can play against and talk to users
Implemented 3 separate topics

What we learned

We learnt about the learning process! It is important to not just offer a lot of information, but rather lots of feedback per topic the user is trying to learn. By giving support on all these topics, users are able to get much more value per level they play.

What's next for SkillCity

We would like to add a multiplayer option so users can play against their friends and explore different parts of the city the quickest! SkillCity will also allow users to create parts of the city depending on what subject they are hoping to study. They would describe the subject in a text box, and our AI backend would generate a custom path just for them!