App Clone inspired by WhatsApp

---
version: 1.0
name: WhatsApp
slug: whatsapp
description: A 59-screen WhatsApp clone — chats list, conversations, calls, status, and settings.
categories: [messaging]
screens: 59
platform: [android]
generated: 2026-04-13T14:21:51.556Z
source: https://appspec.md/starters/whatsapp
---

# WhatsApp — APPSPEC.md

_Reverse-engineered UI specification. Not affiliated with WhatsApp. Generated by [APPSPEC.md](https://appspec.md)._

## 01 · Overview

A 59-screen WhatsApp clone — chats list, conversations, calls, status, and settings.

WhatsApp is a tab-based messenger with 1:1 and group chats, voice and video calls, status stories, and rich media. This starter mirrors the full shell — chats, calls, status, settings, group admin — ready to adapt for any messaging product.

This spec covers **59 screens** across 7 flows. It is intentionally UI-only — no backend contracts, no API shapes, no auth. Bring your own Supabase / Firebase.

## 02 · Navigation

The app clusters into 7 flow groups:

```
Home & Dashboard (4 screens)
  ├─ CommunityHomeScreen
  ├─ HomeScreen
  ├─ PaymentHomeScreen
  ├─ StatusFeedScreen
Social & Community (8 screens)
  ├─ ChatLockSettingsScreen
  ├─ ConversationScreen
  ├─ CreateGroupScreen
  ├─ EditMessageScreen
  ├─ GroupInfoScreen
  ├─ MessageContextScreen
  ├─ MessageSearchScreen
  ├─ MetaAIChatScreen
Media & Playback (3 screens)
  ├─ MediaEditorScreen
  ├─ MediaGalleryScreen
  ├─ MediaPickerScreen
Onboarding & Auth (4 screens)
  ├─ EncryptedBackupSetupScreen
  ├─ PrivacyCheckupScreen
  ├─ PrivacySettingsScreen
  ├─ ProfileSetupScreen
Profile & Settings (11 screens)
  ├─ AppearanceSettingsScreen
  ├─ AvatarEditorScreen
  ├─ ChannelEditScreen
  ├─ DeleteAccountScreen
  ├─ MoveAccountScreen
  ├─ MyProfileScreen
  ├─ NotificationSettingsScreen
  ├─ SecureAccount2FAScreen
  ├─ SecureAccountScreen
  ├─ SettingsScreen
  ├─ UsernameEditScreen
Detail & Sheet (3 screens)
  ├─ ConfirmSecretCodeScreen
  ├─ ContactDetailScreen
  ├─ FilterBottomSheetScreen
Other (26 screens)
  ├─ BackupPasswordScreen
  ├─ BackupStorageScreen
  ├─ BlockedContactsScreen
  ├─ BusinessDirectoryContextualSearchScreen
  ├─ BusinessDirectoryScreen
  ├─ BusinessDirectorySearchScreen
  ├─ ChannelInfoScreen
  ├─ ChannelInsightsScreen
  ├─ ChannelMembersSearchScreen
  ├─ ContactUsScreen
  ├─ ContactsHubScreen
  ├─ CreateSecretCodeScreen
  └─ … +14 more
```

## 03 · Screens

Full UI specification for every screen — layout, components, copy, and state transitions. Every screen below is grounded in the real shipped app.

_screens.md content not available for this starter._

## 04 · Components

Reusable UI primitives implied by the screens above. Use these as your component boundaries when rebuilding:

- **TabBar** — Bottom tab bar — the primary navigation spine. Tabs derived from § 02.
- **AppHeader** — Top header with title, leading icon/avatar, and trailing action(s).
- **ListRow** — Dense list row with leading icon/avatar, title, subtitle, and trailing chevron or action.
- **MetricTile** — Dashboard tile — label, value, optional progress, tap → detail screen.
- **PrimaryButton** — Filled button in brand accent. Pill or rounded per tokens § 05.
- **Sheet** — Modal bottom sheet for pickers, confirmations, and settings leaves.
- **PostCard** — Feed card — author, media, caption, reactions, comments affordance.
- **CommentRow** — Threaded comment with avatar, handle, body, like, and reply action.
- **Player** — Now-playing bar and full-screen player — transport controls, scrubber, metadata.

See `## 03 · Screens` for per-screen component composition.

## 05 · Design Tokens

Coherent system inferred from brand cues and app category. Use these verbatim, or override a few lines — don't reinvent the scale.

```yaml
tokens:
  brand:
    accent: "#25D366"
    accentSoft: "rgba(37,211,102,0.15)"
  palette:
    - { name: "WhatsApp Green", hex: "#25D366" }
    - { name: "Teal Accent", hex: "#128C7E" }
    - { name: "Ink", hex: "#111B21" }
    - { name: "Surface", hex: "#FFFFFF" }
    - { name: "Muted", hex: "#8696A0" }
  radius: "8px bubbles · full avatar · pill buttons"
  spacing: "4px base grid"
  typography: "System sans · 14/16/20/24"
  elevation:
    - "0 1px 2px rgba(0,0,0,0.06)"
    - "0 8px 24px rgba(0,0,0,0.12)"
```

## 06 · Interactions

Key micro-interactions surfaced from the screen spec. The small moments that make the clone feel real.

- (no interactions extracted — see `## 03 · Screens` for per-screen behavior.)

## 07 · Do's and Don'ts

**Do**

- Use realistic placeholder content — real-sounding usernames, captions, prices, dates. No Lorem Ipsum.
- Fetch photos, avatars, and thumbnails from real URLs (pravatar, picsum, etc.) — never gray rectangles.
- Declare the design system at the top of your output, then reuse tokens across every screen.
- Build every screen listed in `## 03 · Screens` — don't drop screens to save effort.
- Make every frame interactive — tabs switch, lists scroll, forms accept input.

**Don't**

- Don't ask the user to clarify colors, images, fidelity, or dark mode — apply the tokens.
- Don't render empty gradient rectangles or `[image]` / `[avatar]` labels.
- Don't invent screens that aren't in the spec.
- Don't ship a static mockup — every frame is live DOM.
- Don't assume a backend — this spec is UI-only.

## 08 · Responsive Behavior

Primary target is mobile portrait (iPhone 15 Pro, 390×844 logical). On tablet and desktop:

- Keep the phone as a scalable frame (`transform: scale(...)`) — never resize inner content.
- Canvas gallery mode: at ≥1100px show 3 phone frames per row; at ≥700px show 2; below 700px show 1.
- Safe-area insets: respect the status bar (9:41) and home indicator on every screen.
- Android notes: where the source app differs from iOS conventions, the screens section calls it out inline.

## 09 · Agent Prompt Guide

Copy-paste prompts for your coding agent:

```
Read APPSPEC.md. Build the home screen using the tokens in § 05 and the layout in § 03.
```

```
Read APPSPEC.md. Generate a single standalone HTML prototype with every screen in § 03 as an independently-stateful phone frame in a scrollable gallery.
```

```
Read APPSPEC.md § 04. Scaffold the listed components in React + TypeScript, one file per component, using the tokens in § 05.
```

Tips:

- Reference sections by number (`§ 03`, `§ 05`) — agents latch onto structure more reliably than prose.
- When asking for one screen, name it exactly as written in `## 03 · Screens`.
- The spec is UI-only. If you need API shapes, write them yourself and pass them as a separate doc.