Build your own Gmail.

# Build an original app inspired by Gmail

You are an experienced product designer and full-stack engineer. Build a working, polished MVP from the brief below. Implement the core journeys end to end; a static mockup is not sufficient. Inspect the current environment, make sensible implementation decisions, and get started. Ask a question only if a missing answer genuinely blocks implementation.

Starting platform: Web. Explicit customized Product & audience and Tech stack requirements take precedence over this starting target.

## Product & audience
Build an original email client called Mailfold, inspired by Gmail. It serves one person organizing an existing mailbox. The core journey is connecting an authorized account, reading a thread, labeling or archiving it, composing a reply, and seeing its delivery state. This is a client for a configured mail service, not a new email hosting network.

## Design
Create an original three-pane inbox with a collapsible label sidebar, message list, reading pane, and accessible composer. Distinguish unread, draft, queued, sent, and failed states. Keep keyboard navigation and narrow-screen reading usable. Sanitize message content and display remote images only after explicit permission.

## Features
1. Mail connection: integrate one documented provider using OAuth, or an explicitly configured IMAP/SMTP adapter. Keep tokens and credentials server-side. Show a setup-required state when no mail connection exists; a labeled fixture mailbox may support development only.

2. Threads and labels: page through synchronized messages, group replies using message headers, mark read/unread, star, label, archive, and move to trash. Preserve provider IDs and make repeated synchronization idempotent.

3. Composer: save drafts, validate recipients, reply or reply-all with a visible recipient list, and send through the configured provider. Deduplicate retries and show pending, confirmed, or failed sending instead of marking an unsent message as sent.

4. Safe reading and attachments: render plain text and sanitized HTML, block executable content and remote tracking by default, and download permitted attachments with size limits. Never render email HTML directly in the app origin.

5. Search and recovery: search indexed sender, subject, and body within the connected account. Restore trashed messages, expose synchronization errors, and handle revoked authorization without deleting local drafts.

## Tech stack
Use a TypeScript browser client and server with PostgreSQL, a background synchronization worker, and one current officially supported mail API or maintained IMAP/SMTP library. Encrypt stored provider tokens, implement OAuth state/PKCE where supported, and keep account-scoped access checks on messages and attachments.

## Data & behavior
Mailbox {ownerId, provider, encryptedToken, syncCursor}; Message {providerId, threadId, messageId, references, sender, recipients, subject, body, receivedAt}; Label; MessageLabel; Draft {revision}; Attachment {objectKey, size}; SendAttempt {idempotencyKey, providerId, state}. Keep provider state and local pending changes reconcilable.

Acceptance checks and scope:
Test a real authorized receive-and-reply flow, repeated sync, interrupted sending, duplicate retries, revoked tokens, hostile HTML, blocked remote images, attachment access from another account, and draft recovery after reload. Exclude operating an SMTP delivery service, spam-filter training, Gmail data scraping, and claims of delivery guarantees. Record provider setup and permissions.

## Originality and assets
The named product is a reference for general workflows only. Use an original product name, visual identity, wording, layout, and assets. Do not copy proprietary code, branded logos, distinctive screens, private APIs, paid templates, or protected media. Use original or appropriately licensed sample data and assets. Build from this brief rather than scraping the reference service. Do not imply affiliation with the referenced company.

## Implementation quality
- Make every visible control work, with clear loading, success, empty, validation, and failure states. Remove controls for unimplemented features.
- Support the target platform and responsive or resizable layouts where appropriate. Use platform-appropriate accessibility semantics, labels, keyboard operation, visible focus, sufficient contrast, and reduced-motion preferences. Provide alternatives for drag-only interactions.
- Validate inputs at the relevant boundary. Treat imported or user-generated content as untrusted; render it safely. Confirm destructive actions or offer undo.
- Keep state changes reliable across navigation and reloads. Never silently lose edits. Handle persistence and network errors with an actionable message.
- Keep the scope realistic. Prioritize the complete primary journey. If a custom Features section differs from the baseline, update the data model, design, and acceptance checks to match it; explicit custom requirements take precedence over baseline assumptions.
- Provide realistic original sample content and a useful empty state. Keep sample data clearly separate from user-created data.

## Delivery and verification
1. Inspect the repository and outline the implementation in a few sentences.
2. Implement the app and connect its actual data flow. Continue until the primary journey works.
3. Run appropriate checks and test the acceptance cases above on the target platform. Verify responsive layouts and keyboard navigation when browser tools are available. For native projects, build with the available SDK and test an emulator or device when possible; report any missing native verification honestly. For games, verify the rules and gameplay loop, not only the menus.
4. Fix observed failures, then provide the runnable result, setup/run instructions, a brief explanation of what is implemented, and any specific configuration or verification limits.

This is a focused MVP. Do not add billing, AI services, or unrelated features unless explicitly requested in the brief. Start building now.