How to Clone WEBTOON

Create a WEBTOON-style vertical comics app called ScrollVerse using Next.js (App Router), Tailwind, Prisma + SQLite. Niche: indie horror manhwa.

## What to build
A mobile-first reader for vertical-scroll comics with a coin paywall: latest episodes are locked and open via a wait timer or by spending coins. Creators upload series and earn a coin revenue share.

## Screens
- Landing: dark hero with featured series, trending row, genre chips
- Discovery home: series-card rows (Trending, New today, Genres), daily ranking, search
- Series page: cover, metadata, subscribe button, numbered episode list with lock state, coin price and unlock countdown
- Reader: edge-to-edge vertical image strip with lazy loading, floating top bar, end-of-episode unlock card for the next locked episode
- Coin shop: coin-pack cards, balance, rewarded-ad unlock button (mock)
- Library: subscribed series, continue reading
- Creator studio: create series, upload episode (ordered image list), schedule, earnings dashboard

## Prisma schema
User (id, name, email, coinBalance, isCreator), Series (id, creatorId, title, synopsis, coverUrl, genre, status, subscriberCount), Episode (id, seriesId, number, title, thumbnailUrl, imageUrls Json, publishedAt, unlockCostCoins, freeAfterDays), Unlock (id, userId, episodeId, method, unlockedAt), Subscription (id, userId, seriesId, lastReadEpisode), CoinTransaction (id, userId, delta, reason, createdAt)

## Logic (must actually work)
- Access check server-side: episode readable if (now - publishedAt) > freeAfterDays days, OR an Unlock row exists for (user, episode)
- Unlock with coins in a transaction: verify balance, decrement coinBalance, create Unlock + CoinTransaction; 402-style error and shop redirect if insufficient
- Wait-to-unlock: compute remaining time = publishedAt + freeAfterDays - now; render a live countdown
- Creator earnings = sum of coin transactions tagged to their episodes × 0.5; never trust client-sent prices
- Reader streams imageUrls in order with intersection-observer lazy loading
- Subscribing adds the series to the user's library and surfaces new episodes in their feed
- Coin purchases insert positive CoinTransaction rows; the shop's mock packs map to coin amounts

## Discovery & ranking
- Trending = series ordered by recent subscriber growth + recent unlocks; daily ranking is a numbered top-10
- 'New episodes today' lists series with an episode published in the last 24h

## Style
Dark, immersive, original: near-black UI, neon-magenta accent (#FF2E88), clean sans, distraction-free reader, smooth lock/unlock animations. Mobile-first.

Seed: 4 horror series × 6 episodes (tall placeholder panel images), newest 2 episodes locked with a freeAfterDays timer, one demo reader with 25 coins and 2 subscriptions, one demo creator owning 2 series.

Build a production-quality WEBTOON-style vertical comics platform. The coin wallet and episode access checks must be server-authoritative - assume readers will try to scrape locked episodes.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui; Framer Motion for unlock transitions
- PostgreSQL via Prisma; NextAuth (email + Google); image storage on S3/R2 fronted by an image CDN with signed URLs
- Zod schemas shared between creator upload validation and runtime

## Core design: access control around content
Every episode read goes through a single canAccess(userId, episodeId) resolver:
  - free if now - publishedAt >= freeAfterDays
  - else requires an Unlock row (method: coin | ad | wait)
Image URLs are NEVER returned for an inaccessible episode; the reader endpoint returns signed, short-TTL CDN URLs only after canAccess passes. This is the whole anti-piracy story - get it right first.

## Coin wallet (server-authoritative, append-only)
- Balance is DERIVED from an append-only coin_transactions ledger (sum of deltas), never a mutable column you can race
- POST /api/episodes/[id]/unlock: in one Postgres transaction - recompute balance, assert >= price, insert negative CoinTransaction + Unlock row; idempotent if an Unlock already exists
- Coin purchases insert positive ledger rows on verified IAP/Stripe webhooks only
- Creator earnings = derived view over ledger rows linked to their episodes × revenue_share

## Schema
users, series, episodes (image_urls jsonb, validated on write), unlocks (unique on (user_id, episode_id)), subscriptions, coin_transactions (append-only). Indexes on episodes(series_id, number), unlocks(user_id), coin_transactions(user_id).

## Implementation order
1. Schema + auth + seed (4 series of typed fixtures with placeholder image strips)
2. canAccess resolver + reader endpoint returning signed URLs + vertical-scroll reader UI with lazy loading
3. Coin ledger + unlock endpoint + shop; wire balance everywhere from the derived view
4. Wait-to-unlock countdowns + rewarded-ad unlock path
5. Series/discovery pages, subscriptions, continue-reading, notifications
6. Creator studio: upload, schedule, earnings derived from the ledger
7. Comments + rankings

## Quality bar
- Reader keeps 60fps scroll on long strips (windowed rendering, decoded image budget)
- Locked episodes leak no image URLs in any API response or HTML payload
- Unlock endpoint is idempotent and concurrency-safe (double-tap can't double-charge)

Start with step 1; show me the canAccess resolver and the unlock transaction before continuing.

Design the complete UI for a WEBTOON-style vertical comics app called ScrollVerse. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: dark, immersive, premium - near-black backgrounds, neon-magenta accent (#FF2E88), clean modern sans, generous imagery, distraction-free reading.

## Screens

### 1. Discovery home
- Top bar: logo, search, coin balance pill, avatar
- Featured hero carousel of cover banners with title + genre tag
- Horizontal card rows: 'Trending', 'New episodes today', 'Editor's picks', genre rows; each card is a tall cover with title, author and an UP/HOT badge
- A 'Daily ranking' numbered list (1–10) with rank movement arrows
- Mobile: bottom tab bar (Home, Ranking, Library, Coins, Profile)

### 2. Series page
- Tall cover header with gradient overlay, title, author, genre chips, star rating, subscriber count
- Subscribe button (filled when subscribed) and a synopsis block (expandable)
- Numbered episode list: thumbnail, title, date; locked episodes show a coin badge ('3') or an 'unlocks in 2d 4h' countdown chip; read episodes dimmed with a check

### 3. Reader
- Full-bleed vertical scroll of stacked comic panels (use tall placeholder panels)
- Auto-hiding top bar (back, series title, settings gear) and bottom bar (prev/next episode, like heart, comment count)
- End-of-episode card: 'Next episode' thumbnail with a lock - 'Unlock for 3 coins' primary button, 'Wait 2 days · free' secondary, 'Watch ad to unlock' tertiary

### 4. Coin shop
- Balance header with a coin icon and animated count
- Grid of coin-pack cards (10 / 30 / 70 / 240 coins) with bonus badges and prices, most-popular highlighted
- 'Earn free coins' section: daily check-in row and 'Watch an ad' button

### 5. Creator studio
- Series list with status pills (ongoing/completed), views and earnings
- Episode upload screen: drag-and-drop ordered image list that previews as a stacked strip, title, schedule date, lock settings (coin price, free-after-days)
- Earnings card: this month's coins, payout balance, simple revenue chart

Fully responsive, mobile-first. Fill everything with realistic horror-manhwa series titles, authors, episode lists and 10 ranking entries with believable numbers.

Build a vertical-scroll digital comics app (WEBTOON model) called ScrollVerse for indie horror comics.

## Entities
- Series: creator reference, title, synopsis, coverUrl, genre, status, subscriberCount
- Episode: series reference, number, title, thumbnailUrl, imageUrls (JSON ordered array), publishedAt, unlockCostCoins, freeAfterDays
- Unlock: user, episode reference, method (coin/ad/wait), unlockedAt
- Subscription: user, series reference, lastReadEpisode
- CoinTransaction: user, delta, reason, createdAt
- UserWallet: user, coinBalance, isCreator

## Roles
- Reader: browses, subscribes, reads free episodes, spends coins or watches ads to unlock, buys coin packs
- Creator: creates series, uploads episodes, sets schedule and lock settings, sees views and earnings
- Admin: moderates series, manages rankings and featured shelves

## Pages
1. Discovery home: series-card rows (Trending, New today, by genre), daily ranking list, search
2. Series page: cover, metadata, subscribe, numbered episode list with lock state, coin price and unlock countdown
3. Reader: full-width vertical scroll of the episode image strip; at the end, a card to unlock the next locked episode with coins, an ad, or waiting
4. Coin shop: coin-pack cards, balance, watch-ad-for-coins option
5. Library: subscribed series, continue reading
6. Creator studio: manage series, upload episodes, earnings dashboard

## Rules
- An episode is readable if it is free (older than freeAfterDays) or the user has an Unlock for it
- Unlocking with coins deducts unlockCostCoins, writes an Unlock and a CoinTransaction; blocked if balance is too low
- Wait-to-unlock shows a countdown; episodes become free to everyone once the timer elapses
- Creators earn 50% of coins spent on their episodes, shown as running earnings

## Look & feel
Dark and immersive: near-black background, neon-magenta accent (#FF2E88), clean sans, distraction-free reader, smooth unlock animations. Mobile-first.

Seed: 4 horror series × 6 episodes (tall placeholder panels), newest 2 episodes of each locked with a wait timer, a demo reader with 25 coins and 2 subscriptions, and a demo creator owning 2 series.