Inspiration
Most learning apps teach everyone the same way. Same explanation, same speed, same questions. But every student is different, and when a student gets an answer wrong, the app just says "wrong." It never asks why.
We wanted to build something that works like a good teacher: one that notices how you think, finds the real reason behind your mistake, and explains it again in a way that clicks.
What it does
LearnTwin is an AI learning platform where you learn from a friendly 3D mentor who talks to you.
- Learn, don't just practice. Every new skill starts with a spoken lesson. The mentor explains while an animated 3D scene shows the idea: fractions split into pieces, an equation as a balance scale, a loop counting from zero, a map scale growing into kilometres.
- Three mentors, three subjects.
- Nova teaches Mathematics
- Byte teaches Programming
- Atlas teaches Geography
- A Learning Twin for every student. It is a live model of what you know and how you learn. It watches your answers, finds the reason for a mistake (for example, "counts list positions from 1 instead of 0"), and updates itself.
- Mistakes lead to a new explanation. If you pick a wrong answer, the mentor doesn't just ask another question. She teaches the idea again in a different way, with the picture.
- Talk to it. You can answer by voice or by tapping. The mentor speaks, and her mouth moves with the words.
- Gamified, but gentle. XP, levels, streaks and a simple growth graph. Mistakes are shown as "a tricky spot we found," never as failure. A new student sees no progress until they play.
- Save your progress. Sign in with email or Google, or just continue as a guest.
How we built it
- Next.js 16, React 19 and TypeScript for the app
- three.js for the animated 3D lesson scenes, and three-vrm to run the 3D anime mentors
- Groq API to find why an answer was wrong and to write the mentors' feedback. Groq Whisper listens to spoken answers, and Groq speech is used for the mentors' voices, with the browser's built-in voice as a backup
- Firebase Authentication (email and Google) and Firestore to save each student's progress
- Framer Motion, Tailwind CSS, React Flow and Recharts for animation, design, the skill map and the growth graph
- Zod to check everything the AI sends back
The AI only proposes a diagnosis. Our own engine checks the answer against a trusted answer key, and it decides how the Twin changes and what to teach next. If the AI is unavailable, the app switches to a built-in demo mode and keeps working.
Challenges we ran into
- Making it feel like a lesson and not a quiz. We rebuilt the main screen several times before the mentor was teaching first and testing second.
- Turning ideas like "loops" and "time zones" into simple 3D scenes that animate step by step.
- Keeping the AI's answers safe and reliable: checking its output, and never letting it grade an answer by itself.
- Keeping secret keys out of the browser and the build.
Accomplishments we're proud of
- A working end-to-end loop: teach → check → find the reason → re-teach → improve
- 15 skills across 3 subjects, each with its own spoken lesson and animated 3D scene
- Voice in and voice out, with a talking 3D character
- The app never shows a broken error. If something fails, it quietly falls back.
What we learned
Good teaching is mostly about finding why a student is stuck. A wrong answer is useful information, not a failure. We also learned how much a spoken, visual explanation can help compared with a wall of text.
What's next
- More subjects and more lessons, reviewed by real teachers
- Testing with real students and educators before making any claims about results
- Letting students explain their thinking in their own words
- Teacher and parent views
- More languages and accessibility checks
SDG alignment: SDG 4, Quality Education
SDG 4 is about inclusive and equitable quality education for everyone. Fair does not mean the same for everyone. It means the right help for each person.
LearnTwin supports this by:
- Adapting to each learner, instead of treating everyone the same
- Finding the hidden reason behind mistakes, so students who fall behind quietly get help
- Teaching with voice and visuals, so learners who struggle with reading or typing can still take part
- Being free to try in a browser, with no sign-up needed
- Supporting lifelong learning across different subjects with one Twin that remembers what you know
LearnTwin is a prototype on a small curriculum. We have not tested it with real learners, and we make no claims about improved learning results.
Built with
Next.js, React, TypeScript, three.js, three-vrm, Groq API (chat, Whisper, speech), Firebase (Auth and Firestore), Framer Motion, Tailwind CSS, React Flow, Recharts, Zod, Netlify
Log in or sign up for Devpost to join the conversation.