Inspiration
Studying is usually reduced to quizzes and tutorial questions, which rarely keep students engaged for long. We wondered what would happen if learning felt more like a game - a 3D world where knowledge drives combat, similar to Pokémon battles. Inspired by skill-based games, we built a system where answering correctly lets players attack, progress, and compete. The same course content powers both exploration and battles, turning the syllabus into an interactive experience.
Games motivate players through clear goals, instant feedback, progression, and friendly competition - the same elements that keep people engaged for hours. StudyGo applies these principles to learning: students level up by mastering concepts, challenge friends in real-time battles, and see their progress through rankings and achievements. By combining gameplay mechanics with academic content, StudyGo transforms studying from a passive task into an active and competitive experience.
What it does
StudyGo turns course material into two play styles:
Exploration mode: Students choose a course and a week, then enter a 3D world. They move, find checkpoints on the map, and at each checkpoint answer a multiple-choice question drawn from that course and week. Correct answers earn points; at the end, their final score is saved and shown on the leaderboard.
Battle mode: Also tied to the selected course and week. In a turn-based fight, the player chooses “Fight” and then picks a move (e.g. Thunderbolt, Quick Attack). The game shows a random MCQ from the same course and week; a correct answer makes the move hit (deal damage), a wrong one makes it miss.
How we built it
We built the frontend with Next.js, React, and TypeScript, and used Three.js for both 3D games (terrain, characters, camera, and movement). We added raycasting so the character stays on the ground, shortest-path rotation for natural turning, and a 3DS-style battle UI with HP bars and a command menu. The backend is Express with Supabase for courses, weeks, and questions; the frontend fetches questions by course and week. We used 3D assets (e.g. Poly Pizza tree and torii, Quaternius nature pack) and procedural textures for bark, sakura, and stone lanterns, and designed the battle flow so it’s ready for optional 2-player over WebSocket.
Challenges we ran into
We had to fix the character and Pokémon “sinking” into the ground by using mesh bounding boxes and setting position so the base sits on the floor. Turning the character sometimes caused a long spin the wrong way until we implemented shortest-path rotation and normalized angles. Wiring “correct = hit, wrong = miss” into the battle loop and picking one random question per move took care to keep it fair and clear. We also hit a keyword clash between two libraries both exposing the same upload helper and fixed it by using the fully qualified keyword in the shared CSV upload resource.
Accomplishments that we're proud of
We’re proud that one question API powers both exploration checkpoints and battle moves so the whole game is tied to real course content. We built a full 3D exploration scene with a clear aesthetic and a working battle flow from FIGHT through move choice, question, hit/miss, enemy turn, and win/lose. We got smooth controls with no sinking or jitter, and we reused the main game’s scenery in the battle overworld so both modes feel like one world.
What we learned
We learned to use Three.js raycasting and bounding boxes for terrain following and placing models on the ground, and how much game feel depends on small numbers (e.g. damage) and clear feedback like “But it missed!” We got practice bringing in external 3D assets (OBJ/MTL, GLB, FBX) and scaling and positioning them in a shared scene, and we saw how to keep the frontend ready for 2P (role and WebSocket URL) without blocking the single-player experience.
What's next for StudyGo
Next we’d add more moves, simple animations, and battle messages, support more schools and courses, and optionally tie in tutorials or hints from the same API. We’d also polish with sound, more environments, and a short “how to play” so new users understand the exploration-and-battle loop in under a minute.
Built With
- express.js
- next.js
- react
- supabase
- three.js
- typescript
- websocket
Log in or sign up for Devpost to join the conversation.