How to Clone Grammarly

Create a full-stack AI writing assistant called ClearScribe using Next.js (App Router), Tailwind CSS, Prisma and SQLite (swappable to Postgres).

## What to build
A Grammarly-style editor where users get grammar, clarity and tone suggestions from an AI step, with a free daily limit and a paid Pro tier for unlimited use and rewrites.

## Key screens
- Landing page with an interactive demo editor and a pricing section
- Editor: TipTap-based rich-text area; inline colored underlines for issues; right-hand suggestion panel with Accept/Dismiss; live writing-score badge
- Documents list: saved docs with score and last-edited time, plus a New-document button
- New-document screen: a blank titled doc ready to type into
- Pricing page with Free vs Pro comparison and a Stripe checkout button
- Account page: current plan, checks used this month, manage subscription via Stripe portal
- Auth: email magic link or credentials, with a Google option

## Schema (Prisma)
User (id, name, email, plan, stripeCustomerId, checksUsedToday, checksResetAt)
Document (id, userId, title, content, score, updatedAt)
Suggestion (id, documentId, type, original, suggested, fromOffset, toOffset, accepted)
UsageEvent (id, userId, kind, createdAt) - for counting checks and analytics

## Logic that must work
- POST /api/check: takes document text, calls an AI provider, returns { score, suggestions[] } where each suggestion has type (correctness|clarity|tone), original, suggested, and character offsets for highlighting
- Free-tier metering server-side: reject checks past 15/day with a 402-style response that the UI turns into an upgrade prompt; reset the counter when checksResetAt has passed
- POST /api/rewrite (Pro only): takes selected text + a tone, returns the rewritten string; gate behind the user's plan on the server, not the UI
- Accepting a suggestion updates the document content in place and marks the suggestion accepted
- Writing score is returned by the check step and persisted on the document; the editor shows it as a badge
- Stripe webhook (checkout.session.completed) flips the user's plan to pro; cancellation reverts to free
- Debounce checks so typing doesn't fire a request on every keystroke; cancel an in-flight check when new text arrives
- A user can only read and edit documents they own; enforce ownership on every document route
- After an accept, re-map remaining suggestion offsets so highlights stay aligned with the edited text

## Style
Trustworthy and calm: white canvas, #15C39A primary, rounded-xl cards, Inter font, subtle skeletons while a check runs. Colored underlines (red/blue/purple) for the three suggestion types. Fully responsive - suggestion panel becomes a bottom sheet on mobile.

Wire the AI step to an LLM API via an env key; if no key is present, fall back to a deterministic mock that returns a few canned suggestions so the app is testable. Use Stripe test mode for upgrades. Seed with one demo user and 3 documents scoring 62, 81 and 94, each with a couple of suggestions, so every screen has data.

You are building a production-quality AI writing assistant (Grammarly-style) called ClearScribe. Work iteratively: scaffold, then build feature by feature, running the app after each step.

## Stack
- Next.js 14 App Router, TypeScript, Tailwind CSS, shadcn/ui
- TipTap for the editor (custom marks for suggestion decorations)
- PostgreSQL via Prisma; Supabase for auth (email + Google) 
- An LLM provider (Claude or GPT-4 class) behind a server-only client; optional LanguageTool pass for cheap deterministic typo catching
- Stripe Billing for Free/Pro subscriptions; Zod for all input validation

## Architecture requirements
- Keep all AI calls server-side (route handlers / server actions) - never expose the model key to the client
- lib/analyze.ts: single entry point that takes text and returns { score, suggestions[] } with a typed schema; suggestions carry { type, original, suggested, from, to } offsets
- Stream long rewrites back to the editor; debounce checks (e.g. 1.2s after typing stops) and cancel in-flight requests on new input
- Quota metering in the DB, enforced server-side: a checkQuota() guard runs before any analyze/rewrite call and is the single source of truth for limits

## Data model
users (plan, stripe_customer_id, checks_used_today, checks_reset_at), documents, suggestions, usage_events (for analytics). Index documents(user_id, updated_at) and usage_events(user_id, created_at).

## Implementation order
1. Scaffold + Prisma schema + Supabase auth with middleware-protected app routes
2. Editor shell: TipTap surface, save/load documents, autosave with optimistic UI
3. Analyze pipeline: /api/check returns typed suggestions; render colored underline marks and a suggestion sidebar with Accept/Dismiss that mutates the doc
4. Writing score: compute from suggestion density + an LLM rubric; show a gauge
5. Quota + paywall: server-side free limit, upgrade prompt, Stripe Checkout + webhook to flip plan
6. Pro rewrites: /api/rewrite with tone selection, streamed back into the selection
7. Documents dashboard + account/billing portal

## Quality bar
- Strong typing end-to-end; Zod-validate every request body and the model's JSON output (repair/retry on malformed JSON)
- Loading and error states for every async surface; never lose a user's text on a failed check
- Cost guardrails: cap input length per request, batch sentences, and log token usage per call
- Offsets must stay correct after an accept: re-map remaining suggestion ranges when text changes
- Seed script: one pro user, one free user, 4 documents at varied scores

Start with step 1. After each step, tell me exactly what to verify in the browser before continuing.

Design the complete UI for a Grammarly-style AI writing assistant called ClearScribe. React + Tailwind, shadcn/ui components, lucide-react icons. Calm, trustworthy aesthetic: white background, a green (#15C39A) primary, rounded-xl cards, soft shadows, Inter font, comfortable reading line-height.

## Screens to generate

### 1. Landing page
- Sticky header: wordmark left, nav (Product, Pricing, Login), green 'Add to browser' CTA right
- Hero: headline, subhead, and a LIVE-looking demo editor card with a sentence that has two colored underlines and a floating suggestion popover ('Replace “very good” with “excellent”')
- Feature trio cards (Correctness, Clarity, Tone) each with an icon and one-line benefit
- Social-proof strip: logos and a one-line testimonial under the hero

### 2. Editor (hero screen)
- Three-zone layout: slim left rail (Documents, New, Settings icons); center writing surface on a white sheet with a soft shadow and colored underlines under flagged words; right suggestion sidebar
- Suggestion sidebar: a stack of cards grouped under 'Correctness', 'Clarity', 'Tone' headers; each card shows the original snippet struck through, the suggestion in green, and Accept (green) / Dismiss (ghost) buttons
- Top-right: a circular writing-score gauge (e.g. 87) with a small category breakdown on hover
- A subtle 'X checks left today' counter for free users, turning into an upgrade nudge near the limit

### 3. Pricing
- Two-card comparison: Free vs Pro (Pro highlighted with a green border and 'Popular' ribbon), feature checklist rows, monthly/annual toggle
- A short FAQ accordion below the cards

### 4. Documents dashboard
- Grid or list of document cards: title, first line preview, score chip (color-coded by range), last-edited date, a kebab menu
- A search field and a sort control (recent / highest score) above the grid
- Empty state with a friendly illustration and a 'Start writing' button

### 5. Tone-rewrite popover
- A compact menu that appears over a text selection: tone chips (Formal, Friendly, Confident, Concise) and a 'Rewrite' button, with a tiny before/after preview

### 6. Upgrade modal
- A focused modal triggered when a free user hits the daily limit: a short value pitch, the Pro price, and an Upgrade button, with a 'maybe later' dismiss

### 7. Account & billing
- Plan card (current tier, renewal date, Manage button), a usage meter for the month, and a danger-zone Cancel link

Make every screen fully responsive. On mobile: the suggestion sidebar becomes a bottom sheet you can drag up; the score gauge moves into a sticky top bar. Use realistic placeholder copy - short business-email paragraphs, scores between 64 and 96.

Build an AI writing assistant app (Grammarly model) called ClearScribe.

## Entities
- Document: title, content (long text), score (number 0-100), owner (user reference), updatedAt
- Suggestion: document reference, type (correctness/clarity/tone), originalText, suggestedText, accepted (boolean)
- User profile extension: plan (free/pro), checksUsedToday (number), checksResetAt (date)
- StyleRule (team feature): user/team reference, term, preferred (text), note

## Roles & permissions
- Signed-in users can create and edit only their own documents
- Free users are limited to a daily number of checks; pro users are unlimited
- Admin role: view all users, usage totals and a revenue summary

## Pages
1. Editor: a writing surface; a 'Check' action sends the content to an AI step that returns suggestions and a score; suggestions appear in a side panel with Accept/Dismiss; accepting edits the content
2. My documents: list of the user's documents with score and last-edited date; open or delete
3. New document: a blank titled document the user can start writing in
4. Pricing/upgrade: Free vs Pro comparison; upgrading flips the user's plan
5. Account: current plan, checks used today, manage subscription
6. Admin dashboard: user count, active users, conversions, monthly revenue

## Rules
- Free plan limit: 15 checks per day; once reached, show an upgrade prompt and block further checks until checksResetAt passes
- Tone rewrite is a pro-only action: rewrite selected text into a chosen tone (Formal, Friendly, Confident, Concise)
- Score is returned by the AI step alongside the suggestions and saved on the document
- Accepting a suggestion edits the document content in place and marks it accepted; dismissing removes it from the panel
- StyleRules (optional team feature) feed into the check so flagged terms suggest the preferred wording
- A user can only see and edit documents they own
- The admin dashboard aggregates across all users and is hidden from non-admins

## Look & feel
Calm and trustworthy: white background, green (#15C39A) primary buttons and score gauge, rounded cards, clean sans-serif type, colored underlines for the three suggestion types. Mobile responsive throughout.

## Data note
Score and suggestions both come from the same AI step so the document always shows a consistent score.

Seed with one sample user and 3 documents scoring 62, 81 and 94, each with a couple of example suggestions, so every page has data on first load.