STEMZap

Innovative STEM Learning Platform

Comment

Inspiration

We wanted to make algebra and STEM concepts as engaging as video games—turning problem‑solving into an adventure. Drawing on gamification best practices, we envisioned a platform where learners earn badges and streaks, choose fun themes (Adventure, Space, Underwater), and even write code to solve puzzles. Integrating an AI tutor (“Alex the Explorer”) felt like the perfect way to bring personalized help directly into the learning flow.

What it does

  • Dynamic Puzzles: Presents linear, fraction, and coding challenges tailored to each user’s education level and preferred theme .
  • AI‑Powered Tutor: Uses Google’s Gemini API to answer algebra and STEM questions conversationally .
  • Progress Tracking: Updates scores, streaks, and badges on each correct answer; shows performance charts by puzzle type .
  • Leaderboards & Social: Real‑time top‑10 leaderboard and share‑achievement functionality for friendly competition and social encouragement .

How we built it

  • Frontend: React with React Router for navigation, Tailwind CSS for styling, and Framer Motion for animations. We applied theme‑specific CSS classes (e.g. theme-adventure, theme-space, theme-underwater) to change backgrounds and UI details on the fly .
  • Backend: Node.js + Express routes handle authentication, puzzle retrieval, answer submission, hints, feedback, progress, and leaderboards .
  • Database: MongoDB with Mongoose models—Puzzle schema stores questions, answers, hints, standards, and daily‑challenge flags; User schema tracks preferences, performance map, streaks, and seen puzzles .
  • APIs & Auth: Axios for client‑server communication; JWT tokens secure endpoints; bcrypt for hashed passwords .

Challenges we ran into

  • Daily Challenges: Ensuring each user only sees one daily puzzle per UTC day required careful date normalization and fallback logic when puzzles ran out .
  • Theming Performance: Dynamically switching large CSS gradients and animations without jank across themes took several rounds of optimization.
  • AI Tutor Reliability: Sanitizing user queries and handling API key errors from Gemini demanded robust error handling and retries .
  • State Management: Coordinating progress, performance stats, and seen‑puzzles arrays in React state while avoiding stale closures in hooks was tricky.

Accomplishments that we’re proud of

  • Seamless Gamification: Badges, confetti animations, motivational messages, and social‑share integration deliver real “level-up” feelings.
  • Full‑Stack Cohesion: A clean separation of concerns between React components and Express routes, with shared TypeScript‑style interfaces in comments.
  • AI Tutor Integration: Embedding a real LLM into the learning flow—students get instant, jargon‑free explanations.
  • Scalable Data Model: Using Mongoose Maps for performance stats lets us add new puzzle types without schema migrations.

What we learned

  • React & Framer Motion: Advanced hooks patterns, context for theming, and animation choreography.
  • Express Middleware: Crafting reusable auth middleware and centralized error handling for a clean API.
  • MongoDB Modeling: When to use arrays vs. Maps, indexing strategies (seenPuzzles, lastDailyChallengeDate) for speed .
  • LLM Best Practices: Prompt engineering, input sanitization, and gracefully degrading when AI is unavailable.

What’s next for STEMZap

  • New Themes & Languages: Add “Jungle” and “Cyberpunk” themes, plus support for C++ and Java coding puzzles.
  • Adaptive Learning: Use performance data to surface more problems in users’ weak topics and adjust difficulty automatically.
  • Collaborative Mode: Real‑time pair programming puzzles and group challenges.
  • Mobile App: A React Native version for offline practice and push‑notification reminders.

Built With

Share this project:

Updates