LeetTok

TikTok for LeetCode: doomscroll your way to a jobThe algorithm learns your goals, interests, and weak spots from watch time/interactions, then recommends coding clips, quizzes, and coding practice

Comment

Inspiration

Every CS student knows the cycle: you open LeetCode, stare at a problem for 10 minutes, feel overwhelmed, and alt-tab to TikTok. Two hours later you've learned nothing -- but you have watched 200 short videos.

We asked a simple question: what if those 200 videos were LeetCode walkthroughs?

The average person spends 95 minutes per day on TikTok. If even a fraction of that scroll time became algorithm practice, the math is staggering. At ~60 seconds per clip and ~50 clips per session:

$$T_{\text{daily}} = \bar{t} \times n = 50 \text{ min of pure DSA exposure}$$

That's more than most people study in a week. LeetTok turns the most addictive UX pattern ever designed into the most productive study habit you've ever had.

What it does

LeetTok is a mobile app that delivers TikTok-style short-form video walkthroughs of LeetCode problems. Users swipe through a full-screen vertical feed of bite-sized algorithm explanations -- but the twist is MadLeets: fill-in-the-blank coding challenges that pop up mid-video at the exact moment a key concept is explained. You're not just watching -- you're solving.

The app tracks progress with XP, streaks, and topic-level accuracy breakdowns. An AI tutor is available in-app for when you're stuck. Personalized onboarding tailors the feed to your goal -- whether you're targeting FAANG, top startups, or Palantir.

How we built it

The App is built with Expo SDK 55 and React Native 0.83 in TypeScript 5.9. We used expo-router for file-based navigation with typed routes, NativeWind 5 (Tailwind CSS 4) for styling, and expo-video for the video player. Auth and data live in Supabase (Postgres + Row-Level Security). Spaced repetition is powered by ts-fsrs, and animations use react-native-reanimated 4.

The Content Pipeline is where things get interesting. We built an automated Python pipeline that turns long-form NeetCode YouTube videos into perfectly-clipped, mobile-first short content:

$$\text{YouTube} \xrightarrow{\text{yt-dlp}} \text{Download} \xrightarrow{\text{Whisper}} \text{Transcribe} \xrightarrow{\text{GPT-4.1}} \text{Segment} \xrightarrow{\text{FFmpeg}} \text{Clip}_{9:16} \xrightarrow{\text{R2}} \text{Serve}$$

The pipeline uses the YouTube Data API for discovery, faster-whisper or GPT-4o-mini for transcription, GPT-4.1-mini or Claude Haiku for intelligent segment detection, and FFmpeg for clipping and 9:16 reframing. Final assets land in Cloudflare R2 with metadata in Supabase.

Total cost per video: ( < \$0.01 ) when YouTube captions exist, ( \sim\$0.02\text{--}\$0.05 ) with Whisper fallback.

Challenges we ran into

  • MadLeets timing: Syncing fill-in-the-blank challenges to the exact video timestamp where a concept is explained required tight coordination between the LLM segmentation step and the video player's seek position. Off by two seconds and the challenge feels disconnected from the content.

  • 9:16 reframing: NeetCode's videos are 16:9 with code on screen. Cropping to vertical without cutting off the code meant building smart region-of-interest detection in the pipeline rather than a naive center-crop.

  • Feed performance: Rendering a full-screen video feed with snap scrolling, auto-play/pause lifecycle, and preloading adjacent clips without jank on lower-end devices required careful use of react-native-reanimated worklets and aggressive memory management of video instances.

  • Spaced repetition at scale: Integrating ts-fsrs so that problems you got wrong resurface at optimal intervals -- without making the feed feel repetitive -- was a delicate UX balance.

What we learned

  • The infinite scroll UX pattern is genuinely powerful for learning when the content is right. Engagement metrics during testing were wild -- sessions averaged 15+ minutes with no prompting.
  • LLMs are shockingly good at detecting logical segment boundaries in technical transcripts when given the right few-shot examples.
  • Expo SDK 55 with the React Compiler experiment enabled is a game-changer for React Native performance.
  • The hardest part of building an educational app isn't the tech -- it's making it feel like not an educational app.

What's next for LeetTok

  • Community-submitted clips and solutions
  • Multiplayer MadLeets (race your friends)
  • Support for more content creators beyond NeetCode
  • Full offline mode with downloaded clips
  • App Store and Google Play launch

Built With

Share this project:

Updates