LearnFlow

Inspiration

We all click into 40-minute videos to find a 90-second answer. LearnFlow flips that: ask a question and jump straight to the exact moments that teach it.

What it does

• Takes a natural-language question
  
• Finds high-quality videos and parses captions
  
• Ranks short segments for coverage, clarity, and novelty
  
• Builds a bite-size, timestamped mini-playlist
• Adds keywords so you know before you click

How we built it

• Frontend: React.js + Next.js + Tailwind (sticky header, accessible inputs, result cards)
  
• Parsing: Pull captions → sentence/paragraph chunking → topic tagging
  
• Ranking: Score segments by topical overlap, redundancy, and difficulty balance
  
• Assembly: De-duplicate across channels, cap total watch time, generate summary
  
• Performance: Caching for warm queries; keyboard-first UX

Challenges we ran into

• Caption quirks (missing/offset timestamps, low-quality transcripts)
  
• Rate limits & CORS for fetching metadata
  
• Preventing near-duplicate segments across videos
  
• Keeping responses under a second after warm-up

Accomplishments that we're proud of

• Consistent 2 minute worth of clips
  
• Clean, minimal UI that’s fast and accessible
  
• Stable timestamp deep-links that feel magical in live demos

What we learned

• Good UX beats raw recall: small, trustworthy chunks win
  
• Simple heuristics + lightweight ranking go a long way
  
• Evaluating learning quality needs both metrics and human checks

What's next for LearnFlow

• Personalization (level & pace), saved playlists, and notes
  
• Educator mode: constrain to approved channels/courses
  
• Mobile polish and offline readable summaries
  
• Export to Anki/Notion; shareable lesson links

Built With

• nextjs
• react
• typescript