Design a Mail Client – Frontend System Design

We’ll walk through the frontend system design for a desktop-style email client like Outlook or Apple Mail. Our goal is a three-pane shell — folders, message list, reading pane — plus a composer, search, and a sync engine that feels instant on a mailbox with tens of thousands of messages. This is a product interview. Treat it like a ChatGPT-scale walkthrough: panes, a local cache, sync, and a composer that cannot become an XSS hole.

You’ll see how we keep metas and bodies apart, how a cursor-based sync prepends new mail, and how archive and send stay idempotent when the network flakes. We are not implementing IMAP in the browser. The backend speaks a custom REST API plus a sync cursor. The frontend’s job is to feel local.

Problem Statement

Build the frontend for a desktop-style email client like Outlook or Apple Mail.

Requirements:

• A three-pane layout: folders, message list, reading pane
• Inbox with unread badges, archive, delete, and a composer
• Search across messages
• It should feel instant on a... premium content.