Design an offline-first notes app
PremiumFrontend systemMedium
- IndexedDB
- Service worker
- Outbox queue
Quick answer
This frontend system interview question asks you to design an offline-first notes app. Aim for a design that loads fast, stays responsive and is easy to maintain, then explain components, state, data fetching and trade-offs. Interviewers want to see how you structure the interface, manage state and keep the experience fast.
The problem
Design an offline-first notes app like Google Keep, Apple Notes on the web or Simplenote, where every edit is saved locally at once and syncs when the connection returns. The hard part is a reliable sync loop, merging conflicting edits from several devices and tabs, and browsers evicting storage.
Users create notes with a title and body, pin them, add labels, archive and delete them, and search across them. The app must work fully offline: it opens with no network. The same user edits on a laptop, a phone and sometimes two tabs at once, so conflicting edits happen.
What must an offline-first notes app do?
- Offline: The app loads from cache with no network; all actions work offline; a badge shows "Offline, 3 changes waiting".
- Sync: Changes reach the server within 5 s of reconnecting; changes from other devices appear without a reload.
How well must it do it?
- Startup: The note list renders in under 1 s on a repeat visit, before any network call finishes.
- Durability: An edit is in persistent local storage within 500 ms of typing; closing the tab loses nothing.
What scale should you design for?
Use these numbers in your estimates.
The scale numbers unlock with this questionUnlock
Key concepts
- IndexedDB
- Service worker
- Outbox queue
- Delta sync
- Conflict resolution
- Multi tab sync
How you’ll practise
- Requirements
- Components
- State and data
- Network and caching
- Performance and accessibility
- Wrap-up
Lala, personalized to you, gives a hint when you ask and reviews your design when you are ready.
What do interviewers look for?
In any frontend system design round.
- Starts from the user flows and the screens
- Splits the interface into clear components
- Decides where state lives and how it stays in sync
- Plans data fetching, caching and loading states
- Covers performance, accessibility and error states
- Explains how the design holds up on slow networks and small screens
Questions people ask about this interview question
- Which design type is this question?
- It is a frontend system question. You design an offline-first notes app and explain your choices the way you would in an interview.
- Is this question asked at entry level?
- It is marked Medium. Entry-level engineers can practise it, but it expects you to reason about requirements and trade-offs, not only list components.
- What should I cover first?
- Start with the main user flows, the screens and the data each one needs. Agree on scope with the interviewer before you design anything.
- Can I practise it for free?
- It is a premium question. Sign up and unlock it once for 10 credits; it then stays unlocked. When you finish, Lala, your personalized AI mentor, can review your design for 30 credits.
Related questions
Updated · Written by the SevyDevy team