STEM-tective

Inspiration

As STEM students who have taken calculus and other technical courses, we know how abstract and intimidating these subjects can feel. A derivative, an integral, or a biological question can look like hieroglyphs or random blobs inside a cell wall

That inspired us to build STEM-tective, a game that makes STEM feel more like solving a mystery. Instead of memorizing formulas in isolation, players become detectives using math, biology, and computer science to crack cases, analyze evidence, and catch suspects.

What It Does

STEM-tective is an interactive, story-driven quiz game that turns STEM concepts into criminal investigations.

Players enter a detective world where each case can only be solved through science, math, or logic. Every investigation presents an academic question wrapped in a narrative scenario. Players might calculate a derivative to intercept a getaway car, identify a biology concept to analyze lab evidence, or solve a computer science logic problem to stop a rogue algorithm.

Correct answers move the case forward and secure the evidence. Wrong answers allow the suspect to escape, but the game still teaches through explanations and recommended tutorial videos via Youtube. At the end of each session, players receive a performance breakdown, topic-labeled review links, streak tracking, and saved best scores.

How We Built It

We built STEM-tective with React, TypeScript, and Vite, using Tailwind CSS for the interface. Math formulas are rendered with KaTeX, allowing calculus problems to display cleanly in LaTeX-style formatting.

The game uses a structured question bank across calculus, biology, and computer science, with difficulty modes that change which questions are selected. We also integrated the Google Gemini API so players can generate custom investigation cases around a topic of their choice. If Gemini is unavailable, the app falls back to the built-in case library.

The animated detective mascot was built as a React component using CSS, SVG elements, Lucide icons, and Motion animations. The background uses animated floating STEM symbols that change based on the selected subject. We also added Firebase support for authentication and Firestore-based persistence.

Challenges We Ran Into

One of our biggest challenges was pivoting after 14 hours. Our original idea was a physical therapy wellness app that used Google MediaPipe to detect exercise movements, but accurate movement parameters were difficult to define in the time we had, and hardware limitations made testing and accuracy difficult to track.

After pivoting, we had to rebuild quickly around a new concept. Expanding from a calculus-only game into a multi-subject STEM game forced us to rethink the data structure, difficulty system, and UI flow. We also ran into merge conflicts that nearly wiped out hours of progress during the hackathon, which made version control a very real part of the challenge.

Another challenge was making the game feel educational without feeling like homework. We spent a lot of time balancing story, feedback, animations, and explanations so the experience felt like solving cases rather than taking a standard quiz.

Accomplishments We’re Proud Of

We’re proud of how quickly our team adapted after changing ideas mid-hackathon. The final concept came together into something that feels playful, polished, and genuinely useful.

We’re especially proud of the case-based storytelling. Each question has a reason to exist inside the detective world, which makes the learning feel more engaging. We’re also proud that the questions are academically meaningful, with explanations and tutorial links so players can learn from mistakes instead of just seeing whether they were right or wrong.

The multi-subject system, Gemini-generated custom cases, animated mascot, floating subject-specific backgrounds, streak tracking, best scores, and personalized review recommendations all helped make the app feel more complete.

What We Learned

We learned that strong educational tools do not have to feel like traditional studying. Wrapping real STEM content in a compelling narrative changed how we thought about presenting information. It pushed us to care not only about correctness, but also about motivation, feedback, and emotional pacing.

We also learned a lot about React state management, structured data design, AI-generated content validation, Firebase setup, and recovering from Git problems under pressure.

What’s Next For STEM-tective

Next, we want to expand the case library with more STEM subjects, including physics, chemistry, and statistics. We also want to add more interactive problem types, such as graph-based calculus puzzles where players manipulate curves, slopes, and areas directly.

A different more complex storyline would also be beneficial to the game, allowing for a more engaging experience to interact with the application.