LearnFlow

Inspiration

Learning online often feels overwhelming — too many resources, no clear structure, and low motivation. We wanted to create something that feels like having a personal AI mentor — one that understands your goals, plans your learning journey, and keeps you on track.

What it does

LearnFlow turns your goals into personalized, adaptive learning paths using AI.

• 🧠 Breaks large topics into structured micro-learning “flows.”
• ⏱️ Builds smart schedules that adapt to your time and progress.
• 🎯 Provides interactive feedback and progress analytics.
• 🤖 Integrates with YouTube, articles, and courses to generate dynamic study plans.

How we built it

• Frontend: HTML5, Tailwind CSS, and Framer Motion for a sleek, responsive UI.
• Backend: Node.js (Express) for API management and Python (FastAPI) for AI logic.
• AI: OpenAI API + custom prompt pipelines for flow generation and goal-to-path conversion.
• Database: Supabase for user progress tracking and content storage.
• Deployment: Vercel (frontend) and Render (backend).

Challenges we ran into

• Designing adaptive AI prompts that handle diverse learning goals.
• Balancing speed and personalization in the recommendation engine.
• Ensuring the UI stayed intuitive despite complex backend logic.

Accomplishments that we're proud of

• Built a working prototype that generates complete learning paths in seconds.
• Integrated live progress tracking and AI-based motivation messages.
• Designed a beautiful, distraction-free learning dashboard.

What we learned

• How to design human-centered AI interfaces that truly help people learn.
• Balancing user experience with backend complexity in a scalable app.
• Effective teamwork under tight hackathon deadlines.

What's next for LearnFlow

• Adding community-driven “shared learning flows.”
• AI mentor chat for real-time assistance.
• Mobile app version for on-the-go learning.
• Integrations with Notion and Google Calendar for daily learning reminders.

Built With

• express.js
• fastapi
• figma
• framer-motion
• github
• html5
• javascript
• node.js
• openai-api
• postgresql
• python
• render
• supabase
• tailwind-css
• vercel