LearnActively

• 

  svg diagram created by visual illustration agent

• 

  cheatsheet created that can be directly exported as pdf

• 

  flashcards tab to promote active reinforcement

• 

  generate any topic you desire

• 

  roadmap for learning

• 

  quiz feedback

Inspiration

We built LearnActively because most learning tools make it too easy to stay passive. A chatbot can explain something, but that does not mean you remember it. We wanted a tool that pushes people to think, practice, retrieve, and correct mistakes while they learn.

What it does

LearnActively turns any topic into a structured learning workspace. It creates an intro, cheatsheet, concept roadmap, visual explanations, activities, flashcards, and quizzes. Instead of just giving an answer, it guides the learner through the topic and checks understanding along the way.

How we built it

We built it with Next.js, React, TypeScript, Tailwind, and API routes. The AI layer uses separate agents for planning, explanations, activities, flashcards, quizzes, and feedback. We use Zod for structured outputs, Drizzle with Supabase Postgres for storage, ReactFlow for roadmaps, and Mermaid for diagrams.

Challenges we ran into

The hardest part was making the experience feel active instead of like a normal chatbot. We also had to coordinate many generated artifacts, stream them into the UI, and keep the data structured enough to render reliably. Balancing speed, quality, and useful practice was a big challenge.

Accomplishments that we're proud of

We are proud that LearnActively feels like a real learning session, not just a wall of text. The roadmap, flashcards, activities, and quiz all work together. We are also proud of the agent-based architecture because it makes the product easier to extend.

What we learned

We learned that good AI learning tools need more than explanations. They need structure, feedback, and moments where the learner has to do the work. We also learned how important schemas are when turning AI output into a stable interactive product.

What's next for LearnActively

Next, we want to connect the agents to stronger live model generation, improve personalization, and add spaced repetition. We also want better progress tracking, richer diagrams, file uploads, and deeper feedback so LearnActively can become a long-term learning companion.

Built With

• drizzle
• eslint
• next.js
• node.js
• postgresql
• react
• supabase
• tailwind
• typescript
• vercel