Design Duolingo – Frontend System Design
We’ll walk through the frontend system design for a language-learning session like Duolingo: a machine that grades in a few milliseconds, audio that never stalls the next tap, a streak that respects the learner’s midnight, and packs that still work in airplane mode. Celebration is an overlay, not a state. Hearts and streak are server-repaired counters.
This is not a quiz widget. The interviewer will say “fifteen cards, offline, five hearts, Arabic prompts in an English shell, and a learner who taps faster than your animation.” Treating Check as await celebrate() falls apart.
Problem Statement
Design the frontend for a language-learning session like Duolingo.
Requirements:
- A lesson of mixed exercise types: tap a translation, type a sentence, listen, match pairs, speak
- Immediate local grading with a small typo window
- Spaced repetition: due cards come back, new cards are capped
- Short audio clips on almost every card, including offline
- Hearts that run out, streaks that survive a missed day only with a freeze
- Full lessons on a plane, then a clean sync
- UI chrome in one language, course content in... premium content.
