📘 Application Designs

These prompts combine everything: rendering strategy, state and caching, real-time transport, offline behavior, performance, accessibility, and team structure. Use the same RADIO flow, and spend your time where the problem is hard (ordering in chat, conflict resolution in docs, SEO and checkout in commerce, rate of updates in dashboards). Smaller widget prompts are in UI Component Designs.

Table of Contents

1. Chat Application
2. Collaborative Document Editor
3. E-commerce Storefront and Checkout
4. Real-Time Analytics Dashboard
5. Video Streaming UI
6. Kanban Board
7. Maps and Ride Tracking
8. Photo Library
9. Comparison and Reuse
10. Questions

1. Chat Application

Requirements: conversation list, message thread, send with instant feedback, real-time receive, typing and presence, unread counts, history pagination, attachments, works on flaky networks and across tabs.

// runnable
// Merge incoming server messages with optimistic local ones: dedupe by clientId, order by server sequence.
function mergeMessages(local, incoming) {
  const byClient = new Map(local.map((m) => [m.clientId, m]));
  for (const m of incoming) byClient.set(m.clientId, { ...byClient.get(m.clientId), ...m, status: 'sent' });
  return [...byClient.values()].sort((a, b) => (a.seq ?? Infinity) - (b.seq ?? Infinity) || a.localTime - b.localTime);
}

let msgs = [
  { clientId: 'c1', text: 'hi', seq: 1, status: 'sent', localTime: 1 },
  { clientId: 'c2', text: 'how are you?', status: 'sending', localTime: 2 },   // optimistic
];
msgs = mergeMessages(msgs, [
  { clientId: 'x9', text: 'hello from Sam', seq: 2, localTime: 0 },             // someone else's message
  { clientId: 'c2', text: 'how are you?', seq: 3, localTime: 2 },               // ack for ours (same clientId)
]);
console.log(msgs.map((m) => `${m.seq}:${m.text}:${m.status}`).join(' | '));

2. Collaborative Document Editor

Requirements: rich text editing by many users at once, live cursors, comments, version history, offline editing, large documents, permissions.

Say out loud: OT needs a central ordering server and complex transform functions, CRDTs converge without one but keep identifiers for every character, so compaction and garbage collection matter. See the CRDT example in Real-Time, Offline, and Sync.

3. E-commerce Storefront and Checkout

Requirements: SEO for categories and products, fast on mobile, search and filters, personalized recommendations, cart and checkout with payments, promotions, i18n and currencies, high traffic events (sales).

4. Real-Time Analytics Dashboard

Requirements: many charts and tables updating live, filters and time ranges, drill down, saved layouts, large data, responsive under bursts of updates.

5. Video Streaming UI

Requirements: browse catalog, start playback fast, adaptive quality, resume position, subtitles and audio tracks, works on TV, mobile, and desktop, handles bad networks, DRM for premium content.

6. Kanban Board

Requirements: columns of cards, drag and drop between and within columns, real-time collaboration, card detail modal, filters, keyboard accessible, many cards.

// runnable
// Fractional indexing: generate a key that sorts between two neighbors without renumbering.
const DIGITS = 'abcdefghijklmnopqrstuvwxyz';
function between(a = '', b = '') {
  // returns a string strictly between a and b (a < b, either may be empty meaning open end), keys never end in 'a'
  let result = '';
  for (let i = 0; ; i += 1) {
    const lo = a[i] ? DIGITS.indexOf(a[i]) : 0;
    const hi = b[i] !== undefined ? DIGITS.indexOf(b[i]) : DIGITS.length;
    if (hi - lo > 1) return result + DIGITS[Math.floor((lo + hi) / 2)];
    result += DIGITS[lo];
    if (b[i] !== undefined && hi - lo === 1) b = '';       // after matching a's digit, b no longer constrains
  }
}

let keys = ['m'];                                           // one card
keys.push(between('m', ''));                                // append
keys.unshift(between('', 'm'));                             // prepend
keys.splice(1, 0, between(keys[0], keys[1]));               // insert in the middle
console.log(keys.join(' < '), '| sorted:', JSON.stringify(keys) === JSON.stringify([...keys].sort()));

7. Maps and Ride Tracking

Requirements: map with a moving vehicle, pickup and drop-off selection, ETA, route line, real-time updates, works on mobile with spotty GPS and network, battery friendly.

8. Photo Library

Requirements: a grid of thousands of photos, smooth scrolling, fast thumbnails, albums, search, select and bulk actions, upload and backup, full screen viewer.

9. Comparison and Reuse

The same building blocks recur, so name them.

10. Questions

Q: How do you order messages in a chat client? Use a server assigned sequence per conversation as the canonical order, show pending messages at the bottom by local time, and replace the temporary client id with the server id and sequence on ack.

Q: OT or CRDT for a collaborative editor? OT with a central server is proven and compact but complex to implement and needs connectivity to the server. CRDTs converge without a coordinator and support offline well, at the cost of metadata and garbage collection. In practice use a library (Yjs, Automerge) rather than writing either.

Q: How would you design the product page for SEO and personalization? Statically generate or ISR the page, revalidate on catalog changes, stream or fetch personalized parts (price, stock, recommendations) after the shell, and keep structured data and the LCP image in the server HTML.

Q: How do you keep a dashboard responsive with a fast stream? Aggregate and send deltas from the server, batch to a frame or interval, coalesce by series, keep ring buffers, render dense charts on canvas, subscribe per visible widget, and do heavy work in a worker.

Q: How does adaptive bitrate streaming work? Video is encoded at several bitrates and split into segments listed in a manifest, the player measures throughput and buffer, and picks the next segment's quality, switching down fast when the buffer is low and up carefully.

Q: How do you persist card order in a kanban board without renumbering? Fractional indexing: each card has a sortable key, and inserting between two cards creates a key between theirs, with occasional rebalancing.

Q: How do you animate a vehicle that updates every 3 seconds? Interpolate between the last two points over the update interval with requestAnimationFrame, snap to roads, ignore out of order updates, and show staleness if updates stop.

Q: How do you render thousands of photos smoothly? Known aspect ratios for a layout without shifts, row virtualization, small responsive thumbnails with placeholders, bounded memory by releasing offscreen bitmaps, and prefetching in the scroll direction.

Q: What would you design differently for a low-end device or a TV? Fewer DOM nodes and less JavaScript, simpler animations, spatial navigation for remote controls, larger text and targets, and measuring on real hardware.

Next: Frontend System Design Interview Playbook.