How to Clone Photomath

Create a Photomath-style math solver app called StepWise as a Next.js (App Router) + Tailwind + Prisma + SQLite project.

## Product
Photograph or type a math problem, get the answer plus step-by-step explanations. Freemium - the answer and first steps are free, full steps behind a premium plan with a 7-day trial.

## Subjects
Cover algebra, calculus, trigonometry and basic statistics; store a subject tag per problem so history and recommendations can group by topic.

## Screens
- Marketing landing: hero with an animated 'scan → steps' demo, pricing (monthly/yearly toggle, yearly highlighted 'save 48%'), testimonials, FAQ accordion
- Solve page: image upload/drop zone + a math input keyboard (use a MathQuill-style component); POST to an API route
- Solution page: rendered problem (KaTeX), answer card, numbered steps list with per-step rule + explanation; steps beyond index 2 are gated for free users
- History: table/grid of past problems with thumbnails
- Profile: subscription status, manage plan, monthly scan count
- Admin (role-gated): recent scans table, mark OCR as good/bad, plan management

## Prisma schema
User (id, email, name, isPremium, trialEndsAt, scansCount), Problem (id, userId, imageUrl, recognizedLatex, subject, finalAnswer, createdAt), Step (id, problemId, stepNumber, ruleLabel, expression, explanation, isFree)

## Logic
- /api/solve accepts an image URL or LaTeX string; abstract OCR + solving behind a solveProblem(input) service that currently returns a deterministic mock (sample latex, answer, steps) - leave clear TODOs where Mathpix and a Wolfram/LLM solver plug in
- Never call paid APIs from the client; all OCR/solver calls go through server routes
- Free users: render first 2 steps, blur the rest with a paywall overlay; 'Start free trial' sets isPremium with trialEndsAt = now + 7 days (mock checkout, structured so Stripe replaces it)
- Render math with KaTeX in both the problem and the steps
- Let users edit a misrecognized problem inline and re-run solve without re-uploading
- Cache solved results by a hash of the normalized LaTeX so identical re-scans are free to re-serve

## Style
Clean and academic-but-friendly: white base, indigo #4F46E5 + emerald accents, rounded-2xl cards, soft shadows, Inter font, crisp math typesetting. Mobile-first, large tap targets.

Seed: 8 solved problems across algebra/calculus/trig with realistic LaTeX, final answers and 4–6 steps each; one demo user with 3 prior scans.
Keep all OCR/solver logic server-side behind the solveProblem service so the client never holds an API key.

Build a production-quality Photomath-style math solver. Mobile-first PWA now, React Native port later - structure shared logic accordingly. Be explicit that real recognition/solving depends on third-party services.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, next-pwa for installability
- Supabase: Postgres, Auth, Storage for problem images; Edge Functions to proxy OCR/solver APIs so keys never hit the client
- Stripe Billing: monthly + yearly prices, 7-day trial, customer portal
- KaTeX for rendering; Zod at every boundary; React Query for the async solve flow

## Critical architecture
- solveProblem pipeline (server-only): image → math OCR (Mathpix) → normalized LaTeX → solver. Solver has two backends behind one interface: a symbolic engine (Wolfram Alpha API) for the answer, and an LLM-with-tool path for the natural-language steps. Cache by a hash of the normalized LaTeX so identical problems are free to re-serve.
- Entitlements: free users receive the final answer and the first N free steps from the server; the server must NOT send locked step text to unentitled clients (don't just blur client-side - withhold the payload). Check profiles.is_premium server-side.
- Resilience: OCR/solver calls can fail or be ambiguous - every solve returns a confidence and an editable recognized-LaTeX so the user can correct a misread before re-solving. Treat a bad OCR read as the expected case, not the edge case.

## Schema
profiles (id, is_premium, trial_ends_at, scans_count), problems (id, user_id, image_path, recognized_latex, normalized_hash, subject, final_answer, confidence, created_at), steps (id, problem_id, step_number, rule_label, expression, explanation, is_free). RLS on every table; locked steps never selectable by free users via policy.

## Implementation order
1. Scaffold, Supabase schema + RLS, auth flows
2. Manual input path first: math keyboard → solveProblem with a SymPy/Wolfram backend → KaTeX solution view (prove the solver before touching OCR)
3. Step gating + paywall: server returns free steps only to free users; Stripe Checkout (trial), webhook flips is_premium
4. OCR path: image upload to storage → Edge Function calls Mathpix → editable recognized LaTeX → re-use the solve pipeline
5. History, profile, scan-count metering
6. PWA: manifest, offline shell, cache history for offline review
7. Admin: review queue for low-confidence scans

## Quality bar
- Every external call is server-side, keyed by env vars, rate-limited per user
- Math renders identically in problem and steps; no layout shift on long solutions
- Conversion events to PostHog (scan_completed, paywall_viewed, trial_started)
- Document the known failure modes (handwriting, multi-line systems) in the README

Start with step 1 and show me the RLS policies plus the solveProblem interface before moving on.

Design the complete UI for a Photomath-style math homework-help app called StepWise. React + Tailwind + shadcn/ui + lucide-react + KaTeX. Aesthetic: bright, encouraging and academic - white base, confident indigo (#4F46E5) and emerald accents, rounded-2xl cards, soft shadows, Inter font, crisp math typesetting.

## Screens

### 1. Marketing landing
- Hero with a phone mockup animating a photographed equation resolving into clean numbered steps, headline 'Stuck on a problem? See every step.', email capture with a glowing CTA
- Three feature cards (Scan it, Solve it, Understand it), pricing toggle (monthly $7.99 / yearly $49.99 with SAVE 48% badge), FAQ accordion, footer

### 2. Scan / solve
- Big central capture card: a dashed drop zone with a camera icon ('Take a photo or upload'), and below it a clean inline math keyboard for typing a problem, with a prominent 'Solve' button
- Loading state: a friendly shimmer reading 'Reading your problem…'

### 3. Solution
- Top: the recognized problem rendered large and crisp with a small 'edit' pencil
- Answer card: the final answer prominent in an emerald-tinted card
- Steps: a vertical numbered timeline, each step a card with a rule label chip ('Subtract 3 from both sides'), the transformed expression in KaTeX, and an expandable explanation. Steps 3+ are blurred behind a glass paywall overlay: 'Unlock all steps - start your free trial'

### 4. History
- List of past problems: small math thumbnail, answer preview, date; tap to reopen the full solution

### 5. Profile & paywall modal
- Profile: subscription status card, scans this month, manage plan row
- Paywall modal: glass card with a benefit checklist (animated steps, all subjects, unlimited history), yearly plan preselected with a SAVE badge, 'Start 7-day free trial' CTA, restore-purchase link

- Bottom tab bar (Solve, History, Profile) with a soft active glow

### 6. Edit / correction sheet
- A bottom sheet showing the recognized LaTeX in an editable math field with a confidence note ('We read this - tap to fix if it's wrong'), and a 'Re-solve' button - designed for the common case of an imperfect scan

Fully responsive, mobile-first since this is primarily a phone experience. Use realistic math: a quadratic, a derivative, a system of equations - rendered with KaTeX, with believable step rules and explanations.

Build a math homework-help app (Photomath model) called StepWise.

## Entities
- Problem: user, imageUrl, recognizedLatex, subject (algebra/calculus/trig/stats), finalAnswer, confidence, createdAt
- Step: problem reference, stepNumber, ruleLabel, expression (LaTeX), explanation, isFree (boolean)
- UserProfile: isPremium, trialEndsAt, scansCount

## Roles & permissions
- Visitor: sees landing page and pricing only
- Free user: can scan/solve; sees the final answer and the first 2 steps; remaining steps locked behind a paywall
- Premium user: sees all steps, full history, animated steps
- Admin: reviews recent scans, flags bad recognition, manages plans, sees a dashboard (users, premium count, scans per day)

## Pages
1. Landing: hero, pricing (monthly $7.99 / yearly $49.99 with trial), FAQ
2. Solve: photo upload or math keyboard input; on submit, call a solveProblem action (stub returning sample LaTeX, answer and steps - structured so a real OCR/solver API replaces it later)
3. Solution: recognized problem, answer card, numbered steps; free users see first 2, rest gated
4. History: past problems with answers, reopenable
5. Profile: subscription status, scans this month
6. Admin: scans table with confidence, flag controls, plan management

## Rules
- Free users only ever receive the final answer and the first 2 steps; locked step text must not be sent to free users
- Trial sets isPremium true and trialEndsAt = now + 7 days; after expiry the user reverts to free (check on login)
- Render all math with a LaTeX renderer; let users edit a misrecognized problem and re-solve

## Look & feel
Bright, encouraging, student-friendly: white background, indigo + emerald accents, rounded cards, soft shadows, crisp math. Mobile-first.

Seed with 8 solved problems across algebra/calculus/trig (realistic LaTeX, answers, 4–6 steps each), one admin user and one demo user with 3 prior scans.