• 

  Homepage/Landing Page highlighting LearnFlow’s AI-powered study planning.

• 

  Roadmap card showcasing a personalized learning journey

• 

  LearnFlow dashboard with roadmap cards and weekly progress tracking.

• 

  Personalized saved roadmap library for managing multiple learning paths

• 

  Progress dashboard with key metrics, milestones, and current focus

• 

  Resource vault with curated learning materials for each roadmap

• 

  Weekly planner view that organizes tasks into a structured study schedule

• 

  Profile and preferences screen for customizing the learning experience

LearnFlow

About the Project

LearnFlow is an AI-powered roadmap generator designed to help students turn big learning goals into clear, structured study plans. Instead of feeling overwhelmed by where to start, students can enter a goal such as learning web development, preparing for exams, or building job-ready skills, and receive a personalized roadmap with milestones, timelines, and recommended resources.

The platform focuses on making learning feel more manageable, motivating, and organized. Many strong Devpost submissions explain both the problem and how the project solves it, which helps judges quickly understand the value of the build. LearnFlow does this by combining smart planning, progress tracking, and a clean student-friendly interface into one experience.

What it does

LearnFlow helps students:

• Generate personalized learning roadmaps using AI.
• Break large goals into smaller phases and weekly tasks.
• Track progress through milestones and completion indicators.
• Organize study time with a planner-style dashboard.
• Discover resources and recommended next steps based on their goals.

Instead of giving students generic advice, LearnFlow creates a guided path that makes learning more practical and easier to follow.

Why it matters

Students often know what they want to learn, but not how to structure the journey. This creates confusion, procrastination, and inconsistent progress. LearnFlow solves that problem by giving students a roadmap they can actually follow, helping them stay focused and motivated throughout the process.

How we built it

LearnFlow was designed as a modern web app with a clean and intuitive user experience. The product combines AI-driven roadmap generation with a polished dashboard interface, responsive layouts, and progress-based learning flows. Devpost project writeups often work best when they clearly explain the technologies used and how the solution was put together.

The system was built around:

• A student-first dashboard experience
• AI prompt-based roadmap generation
• Roadmap cards, milestone tracking, and planner components
• Responsive UI for desktop and mobile
• Clean visual design focused on clarity and motivation

Built With

• HTML
• CSS
• JavaScript
• React
• Tailwind CSS
• OpenAI API

Future improvements

• Calendar sync for deadlines and study sessions
• Smarter adaptive recommendations based on completed work
• Peer accountability and group study features
• Exportable study plans and resume-ready learning summaries

Built With

• ai
• css
• google-studios
• html
• javascript
• openai
• react
• tailwindcss