How to Clone Linktree

Create a full-stack Linktree-style link-in-bio app called BioStack using Next.js (App Router), TypeScript, Tailwind CSS, Prisma and SQLite (swappable to Postgres later).

## What to build
Creators claim a unique username and curate a public page of links at /[username], managed from a dashboard with a live phone-frame preview. Freemium: free = 5 active links + badge, Pro ($6/mo, mock the checkout) = unlimited links, all themes, no badge.

## Key screens
- Landing page with a username-claim input (live availability check via API) as the hero CTA and a Free/Pro pricing section
- Auth (email/password), then onboarding: claim username, pick a starter theme, add first 3 links
- Dashboard /admin: two-pane layout - editable link list left (drag-to-reorder with dnd-kit, inline title/URL editing, active toggles, per-link click counts), live phone preview right rendered from the same data
- Appearance tab: theme presets, background color/gradient picker, button shape and font selectors - all reflected instantly in the preview
- Analytics tab: views, clicks and CTR stat cards plus a 28-day line chart (recharts) and a top-links table
- Public page /[username]: server-rendered, theme applied via CSS variables, social icon row, stacked link buttons, badge for free users

## Schema (Prisma)
User (id, email, passwordHash, username unique, displayName, bio, avatarUrl, plan), Appearance (userId unique, theme, bgType, bgValue, buttonStyle, buttonShape, font), Link (id, userId, title, url, emoji, position, isActive), SocialIcon (id, userId, platform, url, position), ClickEvent (id, linkId, createdAt, referrer), PageView (id, userId, createdAt, referrer)

## Logic that must work
- Username validation: /^[a-z0-9-]{3,20}$/ plus a reserved-word list; checked on claim and on change
- Link clicks route through /r/[linkId]: record ClickEvent, then 302 to the destination URL - validate URLs on save (must be http/https) to prevent javascript: injection
- Page views recorded server-side on profile render; analytics aggregates computed with groupBy queries
- Reorder endpoint accepts an ordered array of link ids and rewrites positions in a transaction
- Free-plan enforcement server-side: activating a 6th link returns an error the UI turns into an upgrade modal
- The public page works with JS disabled - links are real anchors, not onClick handlers
- Changing username frees the old handle; the old URL renders a 'this page has moved or is available to claim' state
- Avatar uploads are resized client-side to 512px before storing

## Nice touches
- 'Copied!' toast on the page-URL pill; share button on the public page opening a QR code sheet
- Confetti micro-animation the first time a creator publishes a link
- Dashboard banner showing yesterday's views/clicks delta to pull creators back daily

## Style
App shell: off-white (#FAFAF7) background, violet (#7C3AED) primary, rounded-2xl, Inter font. Ship 6 public-page themes as CSS-variable sets: Clean Light, Ink Dark, Sunset Gradient, Forest, Neon, Paper. The phone preview uses an iPhone-style frame with the real public-page component inside an iframe or shared component.

Seed with 3 demo creators (musician, photographer, coffee shop) with distinct themes, 6–8 links each, social icons, and ~500 randomized click events over the past 14 days so analytics charts render meaningfully.

You are building a production-quality Linktree clone called BioStack. Work iteratively: scaffold, then implement feature by feature, running the app after each step.

## Stack
- Next.js 14 App Router, TypeScript strict, Tailwind CSS, shadcn/ui for the dashboard; the public page uses zero component-library weight
- PostgreSQL via Prisma; Supabase auth (email + Google) and storage for avatars
- dnd-kit for drag-to-reorder; recharts for analytics; Stripe for Pro subscriptions
- Zod validation on every mutation; all writes through server actions

## Architecture requirements
- The public profile page /[username] is the product: server component, ISR with revalidateTag('profile:username') invalidated on every dashboard save; target sub-second load inside Instagram's in-app browser, minimal JS, links as plain anchors
- Click tracking through a route handler /r/[linkId]: insert event (fire-and-forget), 302 redirect; never let analytics latency touch the visitor. Add an index on click_events(link_id, created_at)
- Theming via CSS variables: an Appearance record maps to a style object applied on the page wrapper - adding a theme is data, not code
- Security: strict URL validation (http/https only, no javascript:), sanitize bio text, rate-limit username availability checks, reserved-username list

## Data model
users, appearances (1:1), links (position int, partial index on user_id where is_active), social_icons, click_events, page_views, subscriptions. Aggregate table daily_stats(user_id, date, views, clicks) filled by a nightly cron to keep analytics queries cheap.

## Implementation order
1. Scaffold + Prisma schema + Supabase auth; onboarding flow that claims a username (live availability endpoint, debounced) and seeds a default appearance
2. Link CRUD with server actions; drag-to-reorder persisting positions transactionally; active toggles with free-plan limit (5) enforced server-side
3. Public page: theme system with 6 presets, social icon row, badge for free plan; verify Lighthouse mobile score 95+
4. Live preview: dashboard renders the actual public-page component with draft state - single source of truth, no duplicated markup
5. Click tracking redirect + page-view recording; analytics tab with 28-day chart, CTR, top links; nightly aggregation cron
6. Appearance editor: theme gallery, gradient picker, button shape/font controls, avatar upload with client-side crop
7. Stripe Pro: Checkout + customer portal + webhook updating plan; gate links >5, premium themes and badge removal
8. Polish: OG image per profile (dynamic og route rendering avatar + name), QR code download for the profile URL, 404 page suggesting the username is available to claim

## Quality bar
- Public page budget: <30KB JS, no layout shift, themes legible at WCAG AA contrast
- Dashboard optimistic updates: toggles and reorders feel instant, reconcile on server response
- Empty states: new account shows a guided 'add your first link' card; analytics with no data shows a friendly placeholder
- Click redirect handles deleted/inactive links gracefully (redirect to the profile, not a 500)
- Reserved usernames and profanity-filtered handles rejected with a helpful message
- Seed script: 3 creators with distinct themes and 14 days of randomized click/view events

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

Design the complete UI for a link-in-bio app called BioStack (Linktree model). React + Tailwind, shadcn/ui for app screens, lucide-react icons. App brand: warm off-white (#FAFAF7) background, violet (#7C3AED) primary, chunky rounded-2xl elements, bold Inter headings. Public pages follow per-creator themes instead of the app brand.

## Screens to generate

### 1. Landing page
- Header: BioStack wordmark, Log in link, violet 'Sign up free' button
- Hero: huge headline 'Your one link for everything', subhead, and a username-claim input styled as a pill - 'biostack.app/' prefix label, input, violet Claim button - with a green 'available!' helper state
- Below: a horizontal row of three phone mockups showing different themed profiles (dark neon, sunset gradient, clean light)
- Pricing section: Free vs Pro ($6/mo) cards, Pro with a violet ring and 'Most popular' badge

### 2. Dashboard - Links tab
- Top bar: page URL pill (biostack.app/maya) with copy button, 'View page' link, avatar menu
- Tab nav: Links / Appearance / Analytics / Settings
- Two-pane layout: left 55% = 'Add link' button on top, then draggable link cards (grip handle, emoji, title, truncated URL, click-count chip, switch, kebab menu); right 45% = phone-frame live preview with realistic device bezel and the profile rendered inside
- One link card shown in edit mode: inline title and URL inputs with save/cancel

### 3. Appearance tab
- Same two-pane layout; left = theme gallery (6 selectable thumbnails with active ring), background section (solid swatches + gradient presets + custom color input), button style (3 shape options x filled/outline as a selectable grid), font picker (3 cards), profile section (avatar uploader with camera badge, display name input, bio textarea with character counter)

### 4. Analytics tab
- Date-range select (7/28/90 days), three stat cards (Views, Clicks, CTR with delta arrows), area chart of daily views, table of links ranked by clicks with mini progress bars
- Pro-gated state: chart blurred with a lock icon and 'Upgrade to see history' CTA overlay

### 5. Public profile page (mobile-first, three theme variants)
- Variant A 'Clean Light': white bg, centered avatar (96px, ring), name bold, bio, social icon row, white pill buttons with subtle shadow
- Variant B 'Ink Dark': near-black bg (#0B0B0F), white text, outline buttons that fill on hover
- Variant C 'Sunset Gradient': warm gradient bg, frosted-glass (backdrop-blur) buttons
- All variants: full-width stacked link buttons with emoji left and chevron right, 'Made with BioStack' badge at the bottom, share icon top-right opening a QR code sheet

### 6. Onboarding (3 steps)
- Step indicators, claim-username screen, theme-pick screen (tappable thumbnails), add-first-links screen with 3 suggested rows (Instagram, YouTube, Website) - each step with a big violet Continue button

### 7. Upgrade modal
- Dialog with Pro checklist (unlimited links, all themes, no badge, analytics history), $6/mo price, violet CTA and a dismiss link

Make every screen responsive; the dashboard collapses to a preview-toggle FAB on mobile. Use realistic placeholder data - creator 'Maya Chen', music and photo links, click counts in the hundreds.

Build a link-in-bio app (Linktree model) called BioStack.

## Entities
- Profile: owner (user reference), username (unique), displayName, bio, avatar (image), theme (clean-light/ink-dark/sunset/forest/neon/paper), bgType (solid/gradient/image), bgValue, buttonShape (rounded/pill/square), font, plan (free/pro)
- Link: profile reference, title, url, emoji, position (number), isActive (boolean)
- SocialIcon: profile reference, platform (instagram/tiktok/x/youtube/email), url, position
- ClickEvent: link reference, occurredAt (datetime), referrer
- PageView: profile reference, occurredAt (datetime), referrer

## Roles & permissions
- Creators manage only their own profile, links and appearance
- Public profile pages are readable by anyone, logged out included; visitors never need accounts
- ClickEvents and PageViews are written automatically by the system, never edited by users; each creator sees only their own analytics
- Admin role: list all profiles with view counts, deactivate pages that violate rules

## Pages
1. Public landing: pitch, username-claim input with availability check, Free vs Pro pricing (free = 5 active links + badge; Pro $6/month = unlimited, no badge, full analytics)
2. Dashboard - Links: add/edit/delete links, drag to reorder, toggle active, per-link click counts, with a live phone-style preview of the public page beside the editor
3. Dashboard - Appearance: theme gallery, background and button-shape pickers, font choice, avatar/name/bio editing, all updating the preview instantly
4. Dashboard - Analytics: views, clicks and click-through rate for the last 28 days, a daily views chart, and links ranked by clicks
5. Public profile at /u/[username]: avatar, name, bio, social icons, stacked link buttons styled by the chosen theme, 'Made with BioStack' badge for free plans
6. Settings: change username (with availability check), email, plan with mock upgrade, delete account

## Rules
- Usernames: 3–20 chars, lowercase letters/numbers/dashes, unique, with a reserved list (admin, www, api, pricing, login)
- Only http/https URLs are accepted for links and social icons; reject anything else at save time
- Free profiles can have at most 5 active links; trying to activate more triggers an upgrade prompt and the toggle stays off
- Every visitor tap on a link records a ClickEvent then opens the destination; every public page load records a PageView
- Deactivated links disappear from the public page but keep their data and position in the dashboard
- Changing username updates the public URL immediately; the old URL shows a 'this page moved or is available' message

## Look & feel
Dashboard: warm off-white background, violet (#7C3AED) primary buttons, rounded-2xl cards, bold sans-serif headings. Public pages are mobile-first and theme-driven - big tappable full-width buttons, fast and legible inside social-app browsers.

Seed with 3 sample creators - a musician (ink-dark theme), a photographer (clean-light) and a coffee shop (sunset gradient) - each with 6–8 links, social icons, and two weeks of randomized clicks and views so analytics look real.