How to Clone BeReal

Create a BeReal-style daily photo app called Offguard as a Next.js (App Router) + Tailwind + Prisma + SQLite project.

## Product
Once a day at a random moment, everyone gets 2 minutes to post a dual photo (main shot + simultaneous selfie). Your friends' posts for today stay blurred until you post yours. Late posts are labeled, retakes counted. Friends-only by design.

## Screens
- Marketing landing: black-and-white hero with dual-photo phone mockup, the 3 rules ('One alert. Two minutes. No do-overs.'), FAQ
- Today feed (authed home): top banner shows moment state - countdown during the 2-minute window, 'Late by Xm' chip after; my post pinned, friends' chronological posts below; blurred-overlay state with 'Post to unlock' if I haven't posted
- Capture page: getUserMedia webcam preview, shutter button takes the main photo then auto-fires a second capture 3 seconds later for the selfie, composite preview (selfie as rounded thumbnail overlay, tap to swap corners), retake button incrementing a counter, publish
- Post detail: dual photo, on-time/late badge, retake count, emoji reaction row, selfie-reaction strip (capture a quick webcam selfie bound to an emoji), comments
- Memories: calendar month grid of my own posts with thumbnails, streak header, month navigation
- Friends: list, pending requests with accept/decline, username search, invite link
- Admin page (role-gated): 'Fire today's moment' button (creates the Moment row, simulating the random scheduler), table of moments with post counts

## Prisma schema
User (id, email, username, avatarUrl, streakCount, lastPostedDate, role), Moment (id, date unique, firedAt), Post (id, userId, momentId, mainPhotoUrl, selfiePhotoUrl, postedAt, isLate, lateByMinutes, retakeCount, caption, @@unique([userId, momentId])), Friendship (id, requesterId, addresseeId, status, @@unique([requesterId, addresseeId])), Reaction (id, postId, userId, emoji, selfieUrl), Comment (id, postId, userId, body, createdAt)

## Logic
- GET /api/feed: returns today's moment, my post if any, and friends' posts for today only; if I have no post, return friends' posts WITHOUT photo URLs - just { hasPosted: true, isLate } placeholders the UI renders as blur cards (never ship the real URLs to a non-posted client)
- POST /api/posts: rejects if no moment fired today or I already posted; computes isLate/lateByMinutes server-side from moment.firedAt; updates streak (consecutive-day check on lastPostedDate)
- Photos: store webcam captures as base64-to-file in /public/uploads via an API route (keep it swappable for S3 later)
- Selfie reactions: a lightweight modal with webcam capture posting { emoji, selfieUrl }
- Friendship visibility enforced in every query: posts are only ever returned to accepted friends or their author
- Streak update on post creation: +1 if lastPostedDate was yesterday, reset to 1 after a gap; also recompute an onTimePercent stat shown on the profile
- A small useMoment() hook polls /api/moment every 30s so the countdown banner flips state without a refresh

## Components to build carefully
- CountdownBanner (window countdown → late chip), BlurredPostCard (placeholder, no real data), DualPhoto (main image + positioned selfie thumbnail), CaptureWizard (two-shot sequence with 3s timer), ReactionBar

## Style
Pure black #000 background, white type, 1px white/15 hairline borders, no shadows, one accent #FFD60A reserved for the countdown. Inter with tight tracking, tiny uppercase labels, 3:4 photo cards with rounded-2xl. Mobile-first, max-w-md centered column on desktop, bottom nav (Today, Memories, Friends, Profile).

Seed: 8 friend users, a moment fired 45 minutes ago, 6 friend posts (2 late, retake counts 0–4, picsum photo URLs), 10 reactions including 3 selfie reactions, 4 comments, demo user with 5-day streak and NO post today so the blur-locked state shows immediately, plus one admin user.

Build a production-quality BeReal-style daily photo app called Offguard. Mobile-first PWA - camera, push notifications and the daily ritual all have to work from the home screen.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, next-pwa (the daily notification only works if people install it)
- Supabase: Postgres, Auth, Storage for photos, Edge Function on a cron for the daily moment
- Web Push (VAPID) for the moment notification; Zustand for capture-flow state; Zod on all boundaries

## Critical architecture
- Moment scheduler: a cron-triggered Edge Function runs daily at 00:05, inserts a moments row with fired_at set to a random time between 09:00 and 22:00 local, and a second invocation at fired_at sends Web Push to all subscriptions - design it as 'schedule then fire' two-phase, and make the fire idempotent (notification_sent_at column checked-and-set)
- The gating rule is a data-access rule, not a UI rule: friends' photo URLs for today must be UNQUERYABLE until the viewer has posted. Enforce with an RLS policy on posts (visible if author = me, OR (we are accepted friends AND a post by me exists for the same moment_id)). Photos live in a private bucket; the feed endpoint returns signed URLs only when RLS lets the row through
- Dual capture on the web: getUserMedia with facingMode 'environment' then 'user', sequential capture 3s apart (simultaneous dual-stream is unreliable across browsers - document this divergence from native); composite client-side on a canvas, upload both originals plus the composite
- Late/retake integrity: posted_at, is_late and late_by_minutes computed server-side from the moments row; retake_count incremented via an RPC during the capture session, never accepted from the client payload
- Daily reset semantics: the feed only ever queries posts where moment_id = today's moment; history is private per-user via Memories - no global archive of friends' content

## Schema
profiles (id, username unique, avatar_path, streak_count, last_posted_date, push_subscription jsonb, role), moments (id, date unique, fired_at, notification_sent_at), posts (id, user_id, moment_id, main_photo_path, selfie_photo_path, composite_path, posted_at, is_late, late_by_minutes, retake_count, caption, UNIQUE(user_id, moment_id)), friendships (requester_id, addressee_id, status, UNIQUE pair), reactions (post_id, user_id, emoji, selfie_path), comments. RLS on every table; the posts visibility policy is the heart of the app - write it first.

## Implementation order
1. Scaffold, schema + RLS (prove the gated-visibility policy with a SQL test: friend's post invisible before my insert, visible after), auth + username onboarding
2. Moment system: cron Edge Function, two-phase schedule/fire, admin page with a manual 'fire now' override for development
3. Capture flow: camera permission UX, sequential dual capture, canvas composite with draggable selfie corner, retake RPC, upload + post creation
4. Today feed: moment banner with live countdown, blurred-locked state (render blurhash placeholders - real URLs never sent), pinned own post, friends' posts with on-time/late chips
5. Social: friendships (request/accept), emoji reactions, selfie-reaction capture modal, comments
6. Memories + streaks: private calendar grid, streak computation in a Postgres function on post insert, on-time percentage stat
7. PWA + push: install prompt after first post, Web Push subscription flow, notification click deep-links to /capture

## Quality bar
- The visibility rule must hold at the API level even with a forged client (verify with a curl test against the REST endpoint)
- Capture-to-published in under 15 seconds on a mid-range phone; uploads show progress and survive a flaky connection with one retry
- Events to PostHog: moment_fired, notification_opened, post_created (with is_late and seconds_since_fire), feed_unlocked, reaction_added - notification-to-post conversion is the product's vital sign
- Seed script: 8 friends, today's moment fired 45 minutes ago, 6 posts (2 late), reactions and comments, demo user mid-streak who hasn't posted

Start with step 1 and show me the RLS visibility policy and its test before building any UI.

Design the complete UI for a BeReal-style daily authentic photo app called Offguard. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: stark documentary black-and-white - pure black (#000) background, white type, 1px white/15 hairline borders instead of shadows, a single yellow accent (#FFD60A) used ONLY for the countdown timer, Inter with tight tracking, tiny uppercase labels, 3:4 photo cards with rounded-2xl corners.

## Screens

### 1. Marketing landing
- Black hero with a centered phone mockup showing a dual photo (large back-camera shot, rounded selfie thumbnail in the top-left corner), headline 'Your friends, with the filters off.' in big white grotesque type
- Three-rule row in bordered cards: 'ONE ALERT A DAY' / 'TWO MINUTES' / 'NO DO-OVERS', each with a small line icon; muted FAQ accordion; minimal footer

### 2. Today feed - locked state
- Top banner: 'OFFGUARD FIRED 45 MIN AGO' with a yellow 'LATE' countdown chip and a big 'Post your Offguard' button
- Below: friends' post cards rendered as heavy blur placeholders with grain, each showing only avatar + username + an on-time/late chip, and a centered lock glyph; sticky bottom bar 'Post to see 6 friends'

### 3. Capture flow
- Full-screen camera viewfinder with a thin white frame, oversized white shutter ring, retake counter pill ('RETAKES: 2') top-right, 2-minute countdown top-center in yellow
- After main shot: 'Hold still - selfie in 3…2…1' overlay, then composite preview with the selfie thumbnail draggable between corners, caption input (one line, optional), big white 'Send' button

### 4. Today feed - unlocked state
- My post pinned at top with 'YOU · ON TIME' label, then chronological friend cards: dual photo, username + time row, 'late by 1h 12m' chip in white/60 where relevant, retake count in tiny text ('3 retakes'), reaction bar underneath

### 5. Post detail & reactions
- Full-width dual photo, meta row (username, time, on-time badge or late chip, retake count), emoji reaction row with counts, a horizontal strip of selfie-reactions (small round selfie thumbnails each badged with an emoji), comment thread with hairline separators, comment input pinned bottom

### 6. Selfie-reaction modal
- Small centered modal: circular webcam preview, emoji picker row (👍 😂 😮 ❤️ 😴), countdown flash, instant send - designed to take under 3 seconds end to end

### 7. Memories
- Header with streak flame and 'ON TIME 82%' stat, month navigation, calendar grid where each day cell is a tiny photo thumbnail (empty days as dark cells with a faint dot), tapping opens that day's post full-screen

### 8. Friends
- Requests section with accept/decline ghost buttons, friends list rows (avatar, username, streak), username search field, bordered invite-link card with copy button

Bottom nav on all authed screens: Today, Memories, Friends, Profile - white icons, active state filled. Phone-first (430px frame); desktop centers the column on pure black. Use realistic content: usernames like @marenwilde and @tobi.k, posts timed minutes apart, exactly 2 of 6 friend posts marked late.

Build a daily authentic photo-sharing app (BeReal model) called Offguard.

## Entities
- UserProfile: username, avatar, streakCount, lastPostedDate, onTimePercent, role
- Moment: date (unique, one per day), firedAt (timestamp when today's alert went out)
- Post: user reference, moment reference, mainPhoto (image), selfiePhoto (image), postedAt, isLate (boolean), lateByMinutes, retakeCount, caption - unique per user+moment
- Friendship: requester reference, addressee reference, status (pending/accepted)
- Reaction: post reference, user reference, emoji, selfiePhoto (optional image)
- Comment: post reference, user reference, body, createdAt

## Roles & permissions
- Visitor: sees the landing page only
- User: posts once per daily moment, sees accepted friends' posts for today (only after posting their own), reacts and comments, manages friendships, sees their private Memories archive
- Admin: fires today's moment manually with a button (simulates the random daily scheduler), sees a dashboard (users, posts today, on-time rate)

## Pages
1. Landing: black-and-white hero with a dual-photo mockup, the three rules ('One alert a day / Two minutes / No do-overs'), FAQ
2. Onboarding after signup: pick a username and avatar, rules explainer, invite-friends step with shareable link
3. Today: shows the moment status (countdown within 2 minutes of firedAt, 'late' afterwards); if I have not posted, a big capture CTA and friends' posts shown ONLY as blurred placeholder cards; once I post, my post pins on top and friends' posts for today appear in full, newest first
4. Capture: take the main photo with the camera, then a selfie 3 seconds later; preview the composite (selfie as a corner thumbnail); each redo increments retakeCount; publish creates the Post
5. Post detail: photo, on-time or 'late by Xm' label, retake count, emoji reactions, selfie reactions (quick camera capture tied to an emoji), comments
6. Memories: private calendar of my own past posts with streak counter - only ever visible to me
7. Friends: requests with accept/decline, friends list, username search, invite link
8. Admin: 'Fire today's moment' button and a moments table with post counts

## Rules
- Exactly one Post per user per Moment; no edits or deletes after publishing (until the next moment fires)
- isLate is true when postedAt is more than 2 minutes after the moment's firedAt; compute lateByMinutes accordingly
- Friends' posts are only visible if (a) the friendship is accepted AND (b) the viewer has posted for the same moment; otherwise show blurred placeholders with no photo data
- Only today's moment appears in the feed - older friend posts are never browsable; my own history lives only in Memories
- Streak +1 for each consecutive day with a post; a missed day resets it to 0; onTimePercent recomputes on each post

## Look & feel
Pure black background, white text, thin hairline borders, no shadows, single yellow accent (#FFD60A) reserved for the countdown. Tight modern sans-serif, small uppercase labels, 3:4 photos with rounded corners. Mobile-first with bottom nav: Today, Memories, Friends, Profile.

Seed with 8 friend users, today's moment fired 45 minutes ago, 6 friend posts (2 late, retake counts between 0 and 4), reactions including 3 selfie reactions, 4 comments, one admin, and a demo user with a 5-day streak who has NOT posted today - so the blurred locked feed is the first thing seen.