learnloop

byShyamanth R

Build a single-page web app called LearnLoop — a vertical short-form video feed for educational content only, styled like Instagram Reels. Tech: React + TypeScript + Vite + Tailwind CSS. No backend — use a local JSON file for video data and localStorage for user state (understood videos, streak count). Features: 1. Full-screen vertical video feed, one video at a time, swipe/scroll to navigate, auto-play on view, tap to pause, mute toggle 2. Subject filter pills at top (All, Physics, Chemistry, Math, Coding) that filter the feed 3. "Mark as Understood" button on each video — toggles a checkmark state, saves to localStorage 4. A simple streak counter in the top corner — increments once per day the user marks at least one video understood, stored in localStorage 5. Seed data: 15-20 mock videos (use sample MP4 URLs or embeddable YouTube Shorts) across the 5 subjects above, with title and subject tag Design: dark mode, mobile-first, minimal UI chrome — video takes 95% of the screen. Bold subject-color accents. This should feel like TikTok, not a form. No auth, no backend, no social features, no payment. Just the scroll and the "understood" loop. Give me a working `npm run dev` build with a README on how to add new videos to the seed data.