Learning Made Fun

A generative educational platform that uses Gemini 3.0 to code on-the-fly, building instant, engaging curriculums with dynamic visuals, minigames, 3D simulations and persona-based tutoring.

Comment

Inspiration

We wanted to solve the "Wikipedia problem"—where learning a new complex topic feels like staring at a wall of text. We asked: What if the textbook could talk back? What if the diagrams could spin? Traditional online courses are static and linear. We wanted to build something that adapts to the user's curiosity in real-time. By leveraging the speed of Gemini 3.0 Flash, we realized we could generate not just text, but entire interactive applications on the fly.

What it does

Learning Made Fun is an AI-powered educational web app that generates personalized curriculums on any topic—from "Quantum Physics" to "Sourdough Baking."

  • Curriculum Generation: Users enter a topic and difficulty level. The app instantly builds a 10-12 lesson course structure.

  • AI Personas: For every topic, Gemini generates a unique tutor persona (e.g., "Commander Shepard" for space, "Gordon" for cooking) to guide the user.

  • Dynamic 3D Visualizations: This is the core magic. When a lesson starts, the AI generates React Three Fiber code in real-time to render interactive 3D scenes relevant to the content (e.g., a solar system model or a molecular structure).

  • Interactive Chat: Users can converse with their AI tutor, asking follow-up questions and getting answers that are context-aware of the current lesson.

How we built it

  • We adopted a Frontend-First architecture to keep the experience fast and responsive.

  • Core AI: We used the Google GenAI SDK directly in the browser to communicate with Gemini 3.0 Flash. We relied heavily on Structured JSON Schemas to ensure the AI output was reliable and type-safe for our application state.

  • Frontend Framework: Built with React and TypeScript with AI Studio.

  • 3D Rendering: We utilized Three.js and React Three Fiber (@react-three/drei). The AI generates configuration code which the frontend dynamically interprets to render scenes.

  • UI/UX: Styled with Tailwind CSS and animated with Framer Motion for a sleek, modern feel. Icons provided by Lucide-React.

  • State: LocalStorage is used to persist chat history and curriculum progress, allowing for a seamless user experience without a heavy backend.

Challenges we ran into

  • Generating Valid 3D Code: Asking an LLM to generate React Three Fiber code that renders without crashing was difficult. We had to iterate extensively on our system prompts to ensure Gemini returned valid, renderable components rather than pseudo-code.

  • Latency vs. Quality: Balancing the depth of the curriculum with the speed of generation was a challenge. We optimized this by streaming responses where possible and using the Flash model for its incredible speed.

  • Prompt Engineering for JSON: Ensuring the AI consistently returned the specific JSON structure required for our TypeScript interfaces (for lessons, avatars, and quizzes) took precise prompt tuning.

Accomplishments that we're proud of

  • The "Magic" Moment: Seeing the first 3D solar system spin up automatically based only on the text prompt "Orbital Mechanics."

  • Client-Side AI: Successfully implementing the entire AI flow in the browser without needing a complex Python backend or serverless functions.

  • Persona Consistency: The AI tutors feel distinct and fun. The "Baking Master" speaks very differently from the "Physics Professor," adding a layer of immersion we didn't expect to work so well.

What we learned

  • Gemini's Versatility: We learned that Gemini 3.0 isn't just a text generator; it's a logic engine capable of acting as a junior developer, writing functional code for visual components on demand.

  • The Power of Structured Output: Using JSON schemas transformed our development process, turning unstructured AI rambling into reliable application data.

What's next for Learning Made Fun

  • Voice Interaction: Adding text-to-speech so the AI tutor can literally talk to you.

  • AR/VR Support: Taking the 3D visualizations into WebXR so users can explore generated models in Virtual Reality.

  • Community Sharing: Implementing a backend (Firebase) to allow users to share their generated curriculums with friends.

  • Gamification: Adding quizzes and badges to track learning progress over time.

Built With

Share this project:

Updates