How to Clone Yuka

Create a Yuka-style product health-scanner app called Verdé as a Next.js (App Router) + Tailwind + Prisma + SQLite project.

## Product
Scan a barcode -> get a 0–100 health score with a color, a 'why' breakdown, and healthier alternatives, for both food and cosmetics. Freemium: scanning free, offline search + preferences behind a cheap yearly/lifetime plan.

## Screens
- Marketing landing: trustworthy hero, independence promise ('no brand money, no data resale'), pricing ($14.99/year or $39 lifetime), FAQ accordion
- Scanner: camera barcode view using the browser BarcodeDetector API where available, with a manual barcode input and a demo-scan fallback
- Result: big score circle in its color, product image/name, factor breakdown (sugar/additives/calories good-moderate-bad), 'better choices' row
- Search: product text search with score chips
- History: reverse-chronological scans, searchable, with an 'average scanned score' header stat
- Preferences (premium): dietary flags that re-tint scores
- How scoring works: a public explainer page rendered from the rubric constants
- Admin (role-gated): product CRUD and editable scoring weights

## Prisma schema
User (id, email, name, isPremium, lifetime, preferences Json), Product (id, barcode unique, name, brand, category, imageUrl, nutrition Json, additives Json, score, color), Scan (userId, productId, scoredAt), Favorite (userId, productId)

## Logic
- Scoring is a pure, versioned server function: documented weights (nutrition 60% / additives 30% / organic 10% for food; ingredient risk for cosmetics) -> 0–100 -> color bucket. Expose a 'how scoring works' page that reads from the same constants
- On scan, upsert a Scan row, return the product + score + alternatives (top higher-scoring products in the same category)
- On a product miss, query Open Food Facts live, score the result, persist it, and offer a 'this product is missing - add it' contribution form
- 'Better choices' = the three highest-scoring products in the same category above the scanned product's score
- Preferences re-tint: a flagged ingredient (e.g. palm oil) drops a product's effective color for that user without changing the base score
- Favorites let a user pin trusted green-scored products to a quick list
- A repeat lookup of a product reads from the local cache rather than refetching
- Premium gates offline search and preferences; mock checkout structured so Stripe (yearly + one-time lifetime) replaces it

## Privacy
Collect minimally, never expose another user's history, add DELETE /api/history. State the no-brand-money, no-resale promise on the landing and privacy pages

## Style
Clean and trustworthy: white base, the score color as the lone strong accent, rounded-2xl cards, Inter, generous whitespace. Mobile-first.

Seed ~40 products (food + cosmetics) spanning red to green, with names, brands, barcodes, nutrition fields and image URLs, plus a demo user with a short scan history.

Build a production-quality Yuka-style product health scanner. Mobile-first PWA now, React Native port later (barcode scanning is genuinely native-camera-first - design the data and scoring layers to be reused by the RN app).

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, next-pwa
- Camera: BarcodeDetector API on the web where supported, with a manual-entry fallback; on the RN port use Expo's barcode scanner
- Supabase: Postgres, Auth, Storage for product images; RLS on user-scoped tables
- Open Food Facts + Open Beauty Facts as the upstream catalog, synced into your own products table so you control coverage and scoring
- Stripe: yearly subscription + one-time lifetime; Zod at boundaries

## Critical architecture
- The scoring engine is the product's credibility: a single pure, unit-tested, VERSIONED module (scoreFood / scoreCosmetic) with documented weights. Persist score_version on each product so re-scoring is auditable, and surface the rubric on a public 'how scoring works' page generated from the same constants. No per-brand overrides, ever - that's the trust moat.
- Coverage strategy: on a cache miss, query Open Food Facts live, score it, and persist; a 'not found' path that lets users contribute the product keeps the database growing.
- Privacy by design: store the minimum, never sell data, scan history is strictly user-scoped (RLS + a deletion routine). Put the independence promise in code-adjacent docs and on the site.

## Schema
profiles (id, is_premium, lifetime, preferences jsonb), products (id, barcode unique, name, brand, category enum, image_path, nutrition jsonb, additives jsonb, score, score_version, color), scans (user_id, product_id, scored_at), favorites (user_id, product_id). RLS on scans/favorites/profiles.

## Implementation order
1. Scaffold + Supabase schema + RLS + the scoring module with tests (show me the rubric and tests first)
2. Open Food Facts sync + live-fetch-on-miss + persistence
3. Scanner (BarcodeDetector + manual fallback) -> result screen with breakdown + alternatives
4. Search + history (user-scoped) + favorites
5. Preferences re-tinting + premium gating + Stripe (yearly + lifetime) + webhook
6. Crowd contribution flow with light moderation; cosmetics rubric
7. PWA manifest + offline cache of a database slice (the headline paid feature) + history deletion

## Quality bar
- Scoring module fully unit-tested across edge cases; identical inputs always yield identical scores
- 'How scoring works' page stays in sync with the constants (generate it)
- No user can read another user's history (prove with a test)
- A repeat scan is fast: the second lookup of a product hits the local cache, not the network
- Open Food Facts attribution and license terms are honored wherever its data is shown
- Seed ~40 products spanning the score range

Start with step 1.

Design the complete UI for a Yuka-style product health-scanner app called Verdé. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: clean, calm and trustworthy - white background, lots of whitespace, the product's score COLOR (red/orange/light-green/green) as the only strong accent on each screen, rounded cards, confident clear typography. Light theme, mobile-first.

## Screens

### 1. Marketing landing
- Trustworthy hero with a phone mockup showing a glowing green score circle, headline 'Know what's really in it.', subline, store-badge CTAs
- An independence band ('We take zero money from brands. We never sell your data.'), three how-it-works steps (Scan -> See the score -> Find a better choice), pricing card ($14.99/year or $39 lifetime), FAQ accordion, footer

### 2. Scanner
- Full-screen camera view with a rounded barcode-framing rectangle, a subtle scan-line animation, a hint ('Point at the barcode'), a small manual-entry button, and a torch toggle

### 3. Result sheet
- A bottom sheet sliding up over the camera: a large score circle (number + color) at the top, product image + name + brand
- A 'Why this score' list where each factor (Sugar, Additives, Calories) has a colored dot, a value, and a good/moderate/bad label
- A 'Better choices' horizontal row of higher-scoring product cards, a favorite heart, and a small 'How is this scored?' link

### 4. Product not found
- A friendly empty state when a barcode isn't in the database: an illustration, 'We don't know this one yet', and an 'Add this product' button that opens a simple contribution form (name, brand, photo)

### 5. Search
- A search field, recent searches as chips, results as rows with a small product image, name, brand, and a colored score pill

### 6. History
- Date-grouped list of past scans, each row showing the product and its colored score pill, with a search at the top and swipe-to-remove
- A small header stat: 'Average score of what you scan' as a colored number

### 7. Preferences (premium)
- A list of toggles (Avoid palm oil, Low sugar, Vegan, Gluten-free, Allergens) with a 'premium' lock badge for free users and an upsell card

### 8. How scoring works
- A clean explainer page: a labeled breakdown of the rubric weights (nutrition / additives / organic for food; ingredient risk for cosmetics) as simple bars, reinforcing the independence promise

### 9. Profile
- A minimal account screen: subscription status (free / premium / lifetime) with an upgrade card, a 'Clear scan history' row, and a prominent 'We never sell your data' reassurance line

Fully responsive, mobile-first. Use realistic content: products like 'Crunchy Granola Bar' (orange, 41), 'Plain Greek Yogurt' (green, 88), 'Cola' (red, 12), a moisturizer in cosmetics mode, real-sounding factor breakdowns.

Build a product health-scanner app (Yuka model) called Verdé.

## Entities
- Product: barcode, name, brand, category (food/cosmetic), imageUrl, nutrition (json), additives (json), score, scoreVersion, color
- Scan: user, product reference, scoredAt
- Favorite: user, product reference
- UserProfile: isPremium, lifetime (boolean), preferences (json of dietary flags)

## Roles & permissions
- Visitor: sees landing page and pricing only
- Free user: scans, sees scores, breakdowns and alternatives, keeps history
- Premium user: also gets offline search and the preferences filter
- Admin: CRUD on products, edits the scoring weights, sees a dashboard (users, scans, average scanned score)

## Pages
1. Landing: hero, independence promise (no brand money, no data resale), pricing ($14.99/year or $39 lifetime), FAQ
2. Scanner: camera barcode capture with a manual-entry fallback and a demo-scan button
3. Result: big colored score circle, product info, 'why this score' factor list (good/moderate/bad), 'better choices' alternatives
4. Search: product text search with colored score pills
5. History: reverse-chronological scans, searchable
6. Preferences (premium): dietary flags that re-tint scores
7. Admin: products table with create/edit forms and editable scoring weights

## Rules
- The 0–100 score comes from a transparent, documented rubric (nutrition 60% / additives 30% / organic 10% for food; ingredient risk for cosmetics); show a 'how scoring works' page
- 'Better choices' are higher-scoring products in the same category
- A missing barcode shows an 'add this product' contribution flow rather than a dead end
- Favorites let users pin trusted green-scored products to a quick list
- Premium (yearly or lifetime) unlocks offline search and preferences
- Privacy: minimal data, never sold; history is private to its owner; provide delete-history

## Look & feel
Clean and trustworthy: white background, the score color as the only strong accent, rounded cards, generous whitespace. Mobile-first.

Seed with ~40 products (food and cosmetics) spanning red to green, one admin user, and one demo user with a short scan history.