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 ).

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

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 — top bar of the site
• Start learning — opens the learning page
• 🎨 Artists gallery — opens the artists page
• Feature cards — information only

• Footer — links and site info at the bottom

• Header

• Theme toggle — switches light / dark theme

• Sign in — opens the auth modal

• Sign out — ends the session; progress no longer saves to the cloud

• Unlock with M-Pesa — opens the M-Pesa payment modal

• Admin (admin users only) — opens the admin dashboard

• Lessons list

• Free lesson row — opens that lesson (content, diagram, 3D model, quiz)

• Paid / locked lesson row — asks for M-Pesa unlock if not paid; opens the lesson if paid or admin

• Progress marks — show saved attempts / mastery when signed in

• Lessons workspace

• Lesson title & summary — topic overview

• Lesson body text — teaching content

• Diagram (LessonVisual) — SVG preview of the solid

• 3D model viewer — drag to rotate, scroll to zoom (background always dark)

• View in your space — opens AR on supported phones

• Model credit line — shows 3D model author / licence

• Play audio — speaks lesson text (ElevenLabs, or browser voice if the API fails)

• Answer options — choose one multiple-choice answer

• Check answer — marks right/wrong, shows explanation, saves progress if signed in

• Get a hint — Gemma tutor hint (up to 3 levels)

• Footer

• Home — go to home

• Lessons — lessons page

• Artists gallery — go to artists gallery

• Admin — go to admin dashboard

• Submit a 3D model — go to artists submit form

• Auth modal

• Sign in — log in with email + password (if email is verified)

• Need an account? Register — switch to the registration form

• Name / Email / Password — account fields

• Send verification code — saves the account and sends a 6-digit OTP email (or logs the OTP if Resend is not set)

• Verification code (OTP) — enter the 6-digit code

• Verify & continue — confirms OTP, signs you in, closes the modal

• Resend code — sends a new OTP (expires in 10 minutes)

• Back to sign in — return to the login form

• Already registered? Sign in — switch to the login form

• Pay modal (M-Pesa)

• M-Pesa phone number — number that receives the STK PIN prompt

• Pay with M-Pesa — starts STK Push; order stays pending until success

• I’ve paid — check status — checks Daraja/DB; unlocks only if payment completed

• Close — closes the modal without unlocking

• Artists page — gallery

• ← Back to Math Quest — go to home

• Open 3D model — opens the model URL in a new tab

• ☕ Buy me a coffee (PayPal) — opens PayPal donate / paypal.me for that artist

• 📱 M-Pesa — copies the M-Pesa number for Send Money

• Artists page — submit form

• Display name — public artist name

• Email — contact for moderation

• Model title — name of the model

• Model URL — public https link to .glb or model page

• Bio (optional) — short description

• License (optional) — e.g. CC-BY, CC0

• PayPal — email or paypal.me for tips

• M-Pesa number — phone for tips (at least one of PayPal or M-Pesa required)

• Submit for review — saves as pending until an admin approves

• Admin — Gemma briefing

• Summary — short overview of platform health

• Highlights — key stats (users, revenue, AI)

• What to check — issues to review (pending pay, OTP, errors)

• Approvals pending — artist queue status

• Open Artists & tips — switches to the Artists tab

• Admin — tabs

• Overview — KPI cards + metrics table

• Payments — confirmed M-Pesa payments table

• Users — recent users (verified / paid)

• AI services — Gemma + ElevenLabs event log table

• Artists & tips — submissions + PayPal/M-Pesa + approve/reject

• Admin — artist actions

• Approve — publishes models to the public gallery

• Reject — keeps the model off the public gallery

• ← Home — go to home

• Lessons — go to the lessons page

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