Math Quest：互動式 3D／AR 數學學習

Taylor

Posted on Oct 18 AI-assisted

Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle Submission 💸

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle

What I Built

Well, at times learning is hard for some people, especially Mathematics (and maybe Physics 😅️ ) but we'll focus on some math. Most people would love to learn with visuals in order to make it easier and maybe after a while they will pay for it with our local currency ( Kenya ). 3D models help interactivity and learners can get detailed experience especially for spheres and 3d shapes. 3D artists can also get some coffee( payment appreciation) for their contribution to better models.

Math Quest is a mobile-first web app that teaches geometry through interactive 3D solids—cubes like spheres, cylinders, cones, pyramids, hemispheres, and compass:

• Learners read a short explanation ( there's also a voice narrator ), explore a diagram and a rotatable model (with optional AR on supported phones), answer a quick check, and request tutor hints when stuck.
• Ten lessons are free; extra content unlocks after a confirmed M-Pesa payment. Accounts use email OTP to reduce fake sign-ups.
• An admin dashboard tracks users, verified payments, revenue, and voice-service errors.
• A public artists gallery lets 3D creators submit model links and share PayPal or M-Pesa details for tips. Built with Next.js, MongoDB, and Safaricom Daraja, deployable on Render. Currently I am using publicly available models but I have credited the authors within the website as per their licenses.

The problem

• Learners need geometry they can See and Move — not only flat textbook diagrams
• 3D artists need a way to showcase their skills

Who's using it

1. Pupils & parents - Short quests on any phone and free core lessons
2. Teachers / tutors - Admin insights
3. 3D artists - Submit models and get tips (PayPal / Mpesa)

Features map

  Math Quest Landing page
      │
      ├── Learning
      │     ├── 10 free 3D geometry lessons
      │     ├── 2 paid advanced lessons
      │     ├── Interactive diagrams
      │     ├── GLB models + AR (where supported)
      │     ├── Quiz + mastery progress
      │     └── Step-by-step tutor hints
      │
      ├── Access & trust
      │     ├── Email OTP registration
      │     ├── Session auth (JWT cookie)
      │     └── M-Pesa unlock (confirmed only)
      │
      ├── Community
      │     ├── Artists submit model links
      │     └── Buy-me-a-coffee (PayPal / M-Pesa)
      │
      └── Ops
            ├── Admin: users, revenue, payments
            ├── Failure analytics
            └── Artist approve / reject

Demo

Here is a link from Render : https://mathquest-hlil.onrender.com/

Code

Here is my code of which I have included an example of what is in my .env file for anyone to try out and run on local to at least view the admin on local ( My email is the only admin on Render ).

Math Quest

Interactive 3D geometry lessons in the browser — rotate models, optional AR, tutor hints, email OTP sign-up, M-Pesa unlock, and an admin dashboard with Gemma briefing.

Stack: Next.js 14 · TypeScript · MongoDB Atlas · Safaricom Daraja · Render

Install

Fork the repo

git clone <your-repo-url>
cd math-quest
cp .env.example .env.local
# fill in at least JWT_SECRET (and MONGODB_URI for accounts/payments)

npm install
npm run dev

Open http://localhost:3000.

Environment

Copy .env.example → .env.local (local) or set the same keys on Render. Add your keys.

Admin

Sign in with an email listed in ADMIN_EMAILS, then open /admin.
Gemma (if configured) summarises highlights, what to…

How I Built It

1. I used local Ollama and installed Gemma model
2. I used local Gemma for improving my local project files
3. I used Gemma to provide hints for learners in the project using API from Google AI studio
4. I used ElevenLabs text-to-speech free credit for audio for the readers who also need articulation. Some other educational voice ID was not free so I used the free one provided in Developers dashboard
5. I used Gemma-powered admin briefing that summarizes highlights, issues to check, and pending approvals using API from Google AI studio.
6. I use MongoDB to preserve lesson history , API errors and user data

Project Tech stack

Layer      | Choice
--------------------------------------------------------------
Frontend   | "Next.js 14 (App Router), TypeScript, CSS", Gemma
3D / AR    | Google <model-viewer> + .glb
Backend    | Next.js API routes
Database   | MongoDB Atlas
Payments   | Safaricom Daraja (STK Push + Query + callback)
Auth       | Email OTP + JWT cookie
Audio      | ElevenLabs + browser fallback
Hosting    | Render
_______________________________________________________________

List of screens and controls

• Landing page

• Header

• Lessons List

• Lessons Workspace

• Footer

• Auth modal

• Pay modal (M-Pesa)

• Artists page — gallery

• Artists page — submit form

• Admin — Gemma briefing

• Admin — tabs

• Admin — artist actions

Why Does Open Innovation Matter?

The project is created based on open source models and it makes these possible :
Access: Runs in the browser on shared or low-end phones—no app install.
Local payments: M-Pesa matches how families in Kenya already pay.
Pedagogy: 3D + hints support spatial thinking better than static notes alone.
Integrity: OTP reduces bot sign-ups; only confirmed payments unlock content.
Creators: Artists can share better models and receive tips without the app storing huge binary files.

My Agent Session

My First User

Prize Categories

• Best Use of Render
• Best Use of Gemma
• Best Use of ElevenLabs
• Best Use of MongoDB Atlas