How to Clone WhatsApp

Create a WhatsApp-style community messaging app called ChatNest using Next.js (App Router), Tailwind and Supabase (Postgres + Auth + Realtime + Storage).

## What to build
Realtime chat organized into communities and channels, plus 1:1 DMs. Owners pay for Pro; members chat free. Core loop: open app → unread badges → read → reply in under a second of latency.

## Screens
- Landing with product demo screenshot, owner pricing (Free: 1 community, 50 members / Pro: $29/mo unlimited), CTA to create a community
- App shell: communities rail, channel list with unread badges, member list drawer, DM section
- Chat: virtualized message list, day dividers, green own-bubbles vs white received, sent/delivered/read ticks, typing indicator, scroll-to-bottom pill with unread count
- Composer: emoji picker, image/file upload to Supabase Storage with optimistic preview, hold-to-record voice notes (MediaRecorder → storage → waveform playback bubble)
- Message menu: quote-reply, emoji reactions (grouped pills), copy, soft delete ('This message was deleted')
- Settings: community profile, channel CRUD with announcement-only flag, member roles (owner/admin/member), rotating invite link
- Invite landing page: community preview + join button with inline signup

## Supabase schema (SQL migrations)
communities (id, name, icon_url, description, owner_id, plan, invite_code), channels (id, community_id, name, position, is_announcement), memberships (user_id, community_id, role, muted_channels jsonb), dm_threads (id, user_a, user_b), messages (id, channel_id?, dm_thread_id?, sender_id, type, body, attachment_url?, reply_to_id?, deleted_at?), reactions (message_id, user_id, emoji), read_receipts (user_id, channel_id, last_read_message_id)

## Realtime & logic (must actually work)
- Subscribe to postgres_changes on messages filtered by the open channel; insert optimistically client-side, reconcile on the realtime echo
- Typing indicators and online presence via Supabase Realtime broadcast/presence channels (ephemeral, never stored)
- Read receipts: upsert last_read_message_id on channel open and on scroll-to-bottom; derive ticks - one check (sent), two (delivered to server), blue (min last_read across members >= message id)
- Row Level Security: members read/write only channels of communities they belong to; only admins post in announcement channels; only authors/admins soft-delete
- Plan limits enforced server-side: free = 1 community, 50 members, 3 channels; return a friendly upgrade error
- Invite codes are random slugs; rotating generates a new one and invalidates the old

## Style
Warm paper chat background #EFEAE2 with doodle pattern, own bubbles #D9FDD3, deep teal #0E6B5C app bar, Inter, rounded bubbles with tails, mobile-first with a slide-in sidebar.

Seed: community 'Maple Street Runners' with 4 channels, 12 members, 80 messages over two days (text, images, 3 voice notes, replies, reactions), 2 DM threads, and three demo logins (owner / admin / member) to show the role differences.

Build a production-quality community messaging platform (WhatsApp-style UX, Slack-style structure). Latency and correctness of the realtime layer are the product - treat delivery, ordering and read-state as the core engineering problems.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui
- Supabase: Postgres, Auth, Realtime (postgres_changes + presence), Storage for media; RLS as the primary authorization layer
- TanStack Query for cache management with realtime patches; react-virtuoso for the message list
- Vitest for unit tests; Playwright for one happy-path E2E (two browsers chatting)

## Core design: message pipeline
Client send → optimistic insert (client-generated UUID, status 'sending') → POST to a route handler that validates membership + announcement rules and inserts → realtime echo reconciles by UUID → status 'sent'. Define this in lib/messages/pipeline.ts with explicit states: sending | sent | failed (retry button). Ordering: paginate by (created_at, id) keyset, never offset; the list must stay stable when history loads upward.

## Read state & ticks
- read_receipts(user_id, channel_id, last_read_message_id) upserted on focus + scroll-bottom, debounced 1s
- Tick derivation is a pure function in lib/messages/ticks.ts: sent (insert acked), delivered (exists in DB), read (every member's last_read >= id) - unit-test it with membership fixtures
- Unread counts come from a Postgres view (messages newer than my receipt per channel); don't count client-side

## Authorization model (RLS-first)
- memberships gate everything: SELECT on messages requires membership in the channel's community; INSERT additionally checks is_announcement → role in (owner, admin)
- Soft delete via deleted_at; UPDATE policy allows author or admin; clients render tombstones
- Write the RLS policies as SQL migrations and add a pgTAP-style test (or a Vitest integration test with two user clients) proving a non-member cannot read messages

## Media & voice notes
- Uploads go direct to Supabase Storage with signed URLs; messages store the path, never bytes
- Voice notes: MediaRecorder → webm/opus → storage; render a custom waveform player (precompute peaks client-side on upload, store as json on the message)

## Presence & typing
- Realtime presence channel per community for online dots; broadcast channel per chat for typing (throttle 3s, auto-expire) - ephemeral only, no DB writes

## Schema
communities, channels, memberships, dm_threads, messages (uuid pk, client-generated), reactions, read_receipts. Indexes: messages(channel_id, created_at desc, id desc), read_receipts(user_id, channel_id) unique, reactions(message_id).

## Implementation order
1. Schema + RLS migrations + auth + seed script (demo community, 12 users, 80 messages)
2. App shell: communities rail, channel list with unread badges from the view
3. Message pipeline: optimistic send, realtime subscribe, keyset pagination, tick derivation + tests
4. Interactions: replies, reactions, soft delete, mentions with notification rows
5. Media + voice notes
6. Presence + typing; invite links + join flow; plan limits (free: 1 community/50 members/3 channels) enforced in route handlers
7. Playwright E2E: two users exchange messages, receipts go blue

## Quality bar
- Sub-second perceived send latency; failed sends visibly retryable; list never jumps on history load
- Mobile-first responsive shell; keyboard accessible composer and message menu; reduced-motion variant

Start with step 1; show me the RLS policies and the tick-derivation tests before continuing.

Design the complete UI for a community messaging app called ChatNest - WhatsApp's warmth with Slack-style structure. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: warm and familiar - chat canvas in soft paper #EFEAE2 with a faint doodle pattern, own-message bubbles #D9FDD3, deep teal #0E6B5C app bar and accents, Inter font, rounded-2xl bubbles with little tails. Mobile-first, with a desktop three-pane layout.

## Screens

### 1. App shell
- Desktop: narrow communities rail (circular avatars with unread dots) | channel sidebar (community name header, channel list with # icons, unread count badges, muted channels dimmed, DMs section with online dots) | main chat pane
- Mobile: chat list home (rows with avatar, name, last message preview, timestamp, unread badge, double-tick state), slide-in navigation, sticky bottom compose on chat screens

### 2. Chat view
- Header: channel name + member count (or DM partner + online status), search and members icons
- Message list: day-divider pills ('Today', 'Yesterday'), received bubbles left with sender name in a per-user accent color, own bubbles right in green, timestamps inside bubble corners, tick cluster (one gray / two gray / two blue), grouped consecutive messages with tightened spacing
- Special bubbles: image with rounded preview and caption, file chip with icon + size, voice note with play button, animated waveform and duration, quoted-reply bubble showing the original in a tinted inset, deleted tombstone in italic gray
- Reaction pills under bubbles (emoji + count, my reactions tinted), 'new messages' divider line, floating scroll-to-bottom button with unread count
- Typing indicator row with three bouncing dots and 'Maria is typing…'

### 3. Composer
- Rounded input bar: emoji button, attachment paperclip (opens picker sheet for image/file), text area that grows to 5 lines, mic button that transforms into a recording state (red pulsing dot, timer, slide-to-cancel hint)
- Reply mode: quoted message preview bar above the input with dismiss X

### 4. Community settings
- Profile card with editable icon and description; channels list with drag handles, announcement-only lock icons and an add-channel row; members table with role dropdowns and remove buttons; invite card showing the link, copy button and 'rotate link' action with confirmation

### 5. Join / invite landing
- Centered card: community icon, name, member avatar stack, description, big Join button; inline signup variant

### 6. Owner pricing & upgrade
- Two-tier pricing cards (Free: 1 community, 50 members, 3 channels / Pro $29/mo: unlimited + admin tools), feature checklist, an in-app upgrade banner that appears when a cap is hit

Fill every screen with realistic content: a running-club community with 4 channels, 12 named members with avatars, 80 messages including voice notes, images, replies, reactions and one deleted message - no lorem ipsum anywhere.

Build a community messaging app (WhatsApp-style chat with channels) called ChatNest, for clubs, courses and neighborhood groups.

## Entities
- Community: name, icon, description, owner, plan (free/pro), inviteCode
- Channel: community reference, name, position, isAnnouncement
- Membership: user, community reference, role (owner/admin/member), mutedChannels
- Message: channel reference (or dmThread reference), sender, type (text/image/file/voice), body, attachmentUrl, replyTo (optional), deletedAt (optional), createdAt
- Reaction: message reference, user, emoji
- ReadReceipt: user, channel reference, lastReadMessageId
- DmThread: userA, userB

## Roles
- Member: chats in channels and DMs, reacts, replies, sends voice notes and images, mutes channels
- Admin: everything members do, plus posting in announcement channels, deleting any message, managing members and rotating the invite link
- Owner: everything admins do, plus channel management, role assignment and billing (upgrade to Pro)

## Pages
1. Chat home: my communities and their channels with unread badges, DM list with online indicators
2. Chat view: realtime message stream with day dividers, green own-bubbles, sender names and avatars, sent/delivered/read check marks, typing indicator, reactions shown as pills, quoted replies, voice-note bubbles with waveform playback
3. Composer: text + emoji, image and file attachments with previews, hold-to-record voice notes
4. Community settings: channels (create, reorder, announcement-only toggle), member list with role dropdowns and remove, invite link with rotate
5. Join page: invite link preview (name, member count, description) with join button and inline signup
6. Pricing/upgrade: Free (1 community, 50 members, 3 channels) vs Pro ($29/mo, unlimited) - mock checkout

## Rules
- Messages appear for all channel members in realtime; ticks progress sent → delivered → read (blue) when every member has read past the message
- Announcement channels accept posts only from admins and owners; everyone can react
- Delete-for-everyone leaves a 'This message was deleted' tombstone; only the author or an admin can do it
- Unread badges count messages newer than my last-read marker per channel; opening the channel clears them
- Free-plan caps are enforced with a friendly upgrade prompt; rotating an invite link kills the old one instantly

## Look & feel
Warm and familiar: paper-toned chat background (#EFEAE2) with a subtle doodle pattern, light green own-bubbles (#D9FDD3), deep teal (#0E6B5C) header, rounded bubbles with tails, Inter font. Mobile-first.

Seed: community 'Maple Street Runners' (12 members, channels #announcements #general #routes #photos) with 80 realistic messages across two days - including images, 3 voice notes, replies, reactions and one deleted message - plus 2 DM threads, and demo logins for owner, admin and member.