LearnForest

LearnForest — Discover what you’re missing. Learn what comes next.

Comment

About the Project

Inspiration 🌱

We were inspired by a simple observation: students don't always struggle because a topic is difficult—they struggle because they are missing something that comes before it.

Imagine a student trying to learn Graphical Optimization in Linear Programming. They might ask an AI tutor for help and receive a perfectly correct explanation. But if they don't understand Linear Inequalities, the explanation may still feel confusing. The real problem isn't the lack of an answer—it's the invisible prerequisite gap underneath the question.

Most learning platforms follow a simple pattern:

Topic → Content → Quiz

We wanted to build something different:

Goal → Diagnose → Find the missing prerequisite → Learn → Practice → Master → Continue

This led to LearnForest, an AI-powered learning environment that doesn't just answer what students ask, but helps them discover what they need to learn next and why.

We chose a 3D forest as the interface because we wanted learning progress to feel like navigating a living world rather than moving through a list of lessons. Trees represent subjects, branches represent topics, concept nodes represent knowledge, and prerequisite paths show how concepts depend on one another.

What We Built 🦉

LearnForest combines a prerequisite knowledge graph, an AI learning companion, and an interactive 3D environment.

A student can select a target concept such as Graphical Optimization. If the concept is locked, the AI Owl analyzes the student's mastered concepts and the target's prerequisites to identify the missing step.

The system then:

  1. Identifies the prerequisite gap.
  2. Recommends the smallest next concept to learn.
  3. Highlights that concept in the 3D forest.
  4. Provides an AI-assisted lesson.
  5. Gives the student a practice question.
  6. Confirms mastery when the student answers correctly.
  7. Updates the forest visually.
  8. Guides the student toward their original goal.

The forest itself becomes a visualization of learning. Mastered concepts turn gold, flowers bloom beneath them, the river becomes brighter, and the environment gradually becomes warmer and more alive.

How We Built It 🛠️

The frontend was built with React, TypeScript, Vite, Three.js, and React Three Fiber. This allowed us to create an interactive 3D knowledge graph where students can explore concepts, rotate the environment, zoom, and interact directly with learning nodes.

We used Zustand to manage learning state and persist mastered concepts and the student's current journey goal using localStorage.

The backend uses Express with Zod for request validation. AI requests are handled server-side through OpenRouter, using NVIDIA Nemotron as the tutoring model. The student's current concept, prerequisite graph, mastered concepts, missing prerequisites, and learning phase are included as context when communicating with the Owl.

An important part of the design was making AI recommendations safe and predictable. The AI cannot invent arbitrary learning nodes: recommended concept IDs are validated against the known knowledge graph before being returned to the frontend.

The current MVP focuses on:

[ \text{Coordinate Plane} \rightarrow \text{Linear Equations} \rightarrow \text{Linear Inequalities} \rightarrow \text{Graphing Constraints} \rightarrow \text{Feasible Region} \rightarrow \text{Graphical Optimization} ]

with Objective Function providing an additional prerequisite path into Graphical Optimization.

What We Learned 📚

One of our biggest lessons was that AI tutoring is more useful when it has structured context.

A generic chatbot knows what a student has asked, but it doesn't necessarily know what the student already understands or what prerequisite they are missing. By combining the AI with a structured knowledge graph, we could give the model meaningful context about the student's learning state.

We also learned that visualization can do more than make an application look impressive. In LearnForest, the visual environment communicates information:

  • A locked node means the student has prerequisites to complete.
  • A cyan-highlighted node represents the AI's recommendation.
  • A gold node represents mastery.
  • Flowers represent completed concepts.
  • Glowing paths show the journey toward the student's goal.
  • Fireflies draw attention toward the next recommended step.

This made us think about the interface not as a dashboard, but as a visual language for learning.

Challenges We Faced ⚡

1. Connecting AI with a deterministic learning system

AI is flexible, but a learning graph needs structure. We had to ensure that the Owl could provide natural explanations while still operating within the boundaries of the known prerequisite graph.

We solved this by giving the AI structured learning context and validating its recommended concept IDs server-side.

2. Making 3D meaningful rather than decorative

It would have been easy to build a visually impressive forest that didn't actually contribute to learning. Instead, we wanted every visual element to communicate something about the student's state.

This required designing interactions between the learning engine and the 3D scene—for example, making fireflies respond to AI recommendations and making mastery permanently affect the environment.

3. Designing the prerequisite engine

Determining whether a concept should be locked, available, selected, or mastered required keeping the knowledge graph, student progress, and learning state synchronized.

We built a dedicated prerequisite engine that calculates concept availability from the prerequisite relationships and the student's mastered concepts.

4. Making progress feel persistent

We wanted the student's learning journey to survive a page refresh without requiring accounts or a database for the MVP. We therefore implemented client-side persistence for mastered concepts and the student's journey goal using Zustand's persistence capabilities and localStorage.

Why It Matters 🌳

LearnForest is built around a simple idea:

The most important learning question isn't always "How do I understand this?" It can be "What am I missing that I need to understand first?"

By making prerequisite gaps visible and turning them into an actionable path, we hope to make AI-assisted learning more personalized, explainable, and less frustrating.

Our MVP demonstrates this concept with Linear Programming, but the underlying approach can extend to other domains such as Calculus, Statistics, Physics, and beyond.

We don't want AI to simply give students more answers.

We want AI to help students discover the right next question.

Built With

Share this project:

Updates