How to Clone Blinkist

Create a Blinkist-style book summary app called Skimwise as a Next.js (App Router) + Tailwind + Prisma + SQLite project.

## Product
Subscription library of 15-minute nonfiction book summaries in text and audio. Freemium - one free daily pick plus starter titles, everything else premium with a 7-day trial.

## Screens
- Marketing landing: editorial hero with floating covers, category strip, pricing (monthly/yearly toggle, yearly highlighted 'save 49%'), testimonials, FAQ accordion
- Onboarding wizard: interest categories (pick 3+), weekly reading goal, read/listen preference; ends on paywall with trial CTA and continue-free link
- Home (authed): 'Today's free pick' hero card with FREE TODAY badge, personalized category rows with horizontal scroll, lock badges on premium titles
- Title detail: cover, hook, category chips, read/listen times, key-insight list teaser, Read and Listen CTAs (paywall modal if locked)
- Reader: chapter-per-screen with 'Insight N of M' progress bar, prev/next, font-size toggle, finish screen with takeaways
- Player: full player page plus a persistent mini-player bar that survives navigation (audio element in a React context), speed control 1x–2x, ±15s
- Library: Saved / In progress / Finished tabs, streak flame and monthly finished count
- Admin (role-gated): titles table with chapter editor, cover/audio URLs, free_on_date scheduler, publish toggle

## Prisma schema
User (id, email, name, interests JSON, weeklyGoal, isPremium, trialEndsAt, streakCount, lastReadDate), Title (id, bookTitle, author, hook, description, category, coverUrl, audioUrl, readMinutes, listenMinutes, isPublished, freeOnDate nullable), Chapter (id, titleId, position, heading, body), Progress (userId, titleId, currentChapter, audioPositionSeconds, status enum saved/in_progress/finished, finishedAt), Highlight (id, userId, titleId, chapterId, text, createdAt)

## Logic
- Entitlement check (single helper): a title is accessible if user.isPremium, or title.freeOnDate is today, or the title is in the starter set - used by reader, player and API routes alike
- Progress: reading the last chapter or audioPosition ≥ 90% of duration sets status finished, stamps finishedAt and updates the streak (one increment per calendar day, reset on a missed day)
- Text and audio positions are stored together so switching modes resumes correctly
- Highlights: text selection in the reader pops a 'Highlight' tooltip; saved highlights are listed on the title detail page and exportable as Markdown
- 'Start free trial' sets isPremium with trialEndsAt = now + 7 days (mock checkout, structured so Stripe drops in later)

## Components & API routes
- Components: TitleCard, HeroPickCard, ChapterReader, AudioPlayerBar, SpeedPill, StreakPill, PaywallModal, CategoryChips
- API routes: GET /api/titles (filterable by category/search), GET /api/titles/[id]/chapters (entitlement-checked, returns 403 without bodies for locked titles), POST /api/progress (debounced upserts), POST /api/highlights, GET /api/highlights/export (Markdown)
- lib/entitlements.ts: a single canAccess(user, title, today) helper used by every route and page, with unit tests for premium/trial/daily-pick/starter cases
- Explore page search filters by title, author and category

## Style
Warm editorial light theme: paper #FAF6EF background, ink #1E2A32 text, emerald #0FB58A primary, amber #F5A524 accents for streaks/badges, Fraunces serif display + Inter body, covers with soft shadows, rounded-2xl. Mobile-first with a bottom tab bar (Home, Explore, Library, Profile).

Seed: 18 invented nonfiction titles (plausible but fictional books and authors) across 6 categories, each with 6–8 chapters of genuinely readable summary text (3–4 paragraphs per chapter), one scheduled free pick for today, a demo user with two in-progress titles, three finished and a 3-day streak.

Build a production-quality Blinkist-style book summary app. Mobile-first PWA now, React Native port later - keep entitlement logic and the content pipeline framework-agnostic.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, next-pwa for installability
- Supabase: Postgres, Auth (email + Google/Apple OAuth), Storage for covers and audio
- Stripe Billing: monthly + yearly prices, 7-day trial on yearly, customer portal for cancellation
- Zustand for the global audio-player store; Zod at every boundary; Vitest for entitlements and streak logic

## Critical architecture
- Entitlement module (pure TS, unit-tested): canAccess(user, title, today) covering premium, daily free pick, starter titles and trial expiry - every access path (reader page, player, chapter API, audio URL signing) calls this one function; premium audio and chapter bodies are served only via server routes that check it (signed storage URLs for audio, never raw public URLs)
- AudioPlayerProvider: single <audio> element app-wide, mini-player persisting across routes, MediaSession API for lock-screen controls, playback-rate control, position persisted to Supabase every 15s (debounced)
- Reader and player share one Progress record per (user, title) so cross-mode resume is automatic; completion (last chapter read or 90% listened) triggers a server-side complete_title RPC that stamps finishedAt and updates the streak atomically - clients cannot fake streaks
- Content pipeline as code: a scripts/ingest.ts that takes a structured summary draft (JSON: metadata + chapters), validates with Zod, uploads cover/audio to storage and upserts rows - this is how the catalog scales, treat it as a first-class deliverable

## Schema
profiles (id, name, interests text[], weekly_goal, is_premium, trial_ends_at, streak_count, last_read_date), titles (id, slug, book_title, author, hook, description, category enum, cover_path, audio_path, read_minutes, listen_minutes, is_published, is_starter, free_on_date date), chapters (id, title_id, position, heading, body), progress (user_id, title_id, current_chapter, audio_position_seconds, status enum, finished_at), highlights (id, user_id, title_id, chapter_id, text, created_at). RLS on every table; chapter bodies of premium titles excluded from anon-readable views.

## Implementation order
1. Scaffold, Supabase schema + RLS policies, auth flows
2. Entitlement module with exhaustive tests (premium, trial active, trial expired, free pick today vs yesterday, starter titles), then the catalog: home rows, explore grid, title detail - server components
3. Reader: chapter pagination, font-size control, progress writes, highlight selection + storage
4. Audio: provider, player page, mini-player, MediaSession, speed control, signed URL flow
5. Completion + streaks: complete_title RPC, library tabs, streak display with calendar
6. Onboarding quiz → paywall: interests stored on profile driving home rows, Stripe Checkout with trial, webhook updating is_premium
7. Admin + pipeline: /admin gated by role with title/chapter CRUD and free-pick scheduling, plus scripts/ingest.ts and a seed that uses it

## Quality bar
- Lighthouse PWA installable; audio continues when screen locks (document iOS Safari quirks and the workaround)
- Zero premium content leakage: write a test asserting the chapters API returns 403 body-less responses for locked titles to free users
- Reader typography: 65ch max measure, generous line-height, font-size preference persisted to the profile
- Home rows exclude finished titles; explore grid uses keyset pagination
- PostHog events: daily_pick_opened, paywall_viewed, trial_started, title_finished, highlight_created
- Seed: 18 invented titles (never real books) with real readable chapter text via the ingest script, today's free pick scheduled

Start with step 1 and show me the RLS policies plus the entitlement module's test cases before moving on.

Design the complete UI for a Blinkist-style book summary app called Skimwise. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: warm modern library - paper background #FAF6EF, deep ink #1E2A32 text, emerald #0FB58A primary, amber #F5A524 for streaks and FREE badges, Fraunces serif display headings with Inter body, book covers with soft layered shadows, rounded-2xl cards, light theme. Editorial and calm, not techy.

## Screens

### 1. Marketing landing
- Hero: serif headline 'Big ideas in 15 minutes.' beside a fanned stack of slightly rotated book covers with soft shadows, emerald CTA, small trust line ('Join 40,000 curious minds')
- Category chip strip, three feature cards (Read / Listen / Remember) with line icons, pricing toggle (monthly $12.99 / yearly $79.99 with SAVE 49% badge), testimonial cards with avatars, FAQ accordion, warm footer

### 2. Onboarding (3 steps)
- Progress dots, large friendly steps: interest categories as a wrap of selectable chips with emoji, weekly goal as big tappable cards (1 / 3 / 5 titles), read-vs-listen preference toggle illustration
- Final paywall: blurred library grid behind a paper card listing premium benefits with checkmarks, 'Start 7-day free trial' emerald CTA, visible 'Continue with today's free pick' text link

### 3. Home
- Header: greeting, amber streak flame pill ('3-day streak')
- 'Today's free pick' hero card: large cover left, title/author/hook right, amber FREE TODAY badge, Read + Listen buttons
- Horizontal scroll rows: 'Because you chose Psychology', 'Trending now', 'Under 10 minutes' - cards with cover, title, author, time chips (book icon 12 min / headphones icon 14 min), small emerald lock badge on premium items
- Bottom tab bar: Home, Explore, Library, Profile with emerald active state

### 4. Title detail
- Cover floating over a soft emerald-tinted header band, serif title, author, one-line hook in italics, category chips, time chips
- 'What's in it for me?' intro paragraph, numbered key-insights list (titles only, as a teaser), sticky bottom bar with Read (solid emerald) and Listen (outline) buttons - or a single 'Unlock with Premium' button for locked titles

### 5. Reader
- Minimal chrome: thin progress bar top with 'Insight 3 of 8', serif chapter heading, comfortable body text (max 65ch), prev/next floating buttons, Aa font-size popover, selection-triggered Highlight tooltip
- Finish screen: confetti-free, calm - checkmark, 'Finished!', key takeaways list, streak increment toast, 'Find your next read' CTA

### 6. Audio player
- Full player: large cover with soft shadow, title/author, scrubber with elapsed/remaining, oversized play/pause with ±15s flanking, speed pill cycling 1x → 1.25x → 1.5x → 2x, chapter list button
- Persistent mini-player bar above the tab bar: tiny cover, title, play/pause, progress hairline

### 7. Library & profile
- Tabs: Saved / In progress (cards with progress bars) / Finished (covers with checkmark badges)
- Profile: stat trio (streak, titles finished, minutes saved vs reading full books), monthly goal ring, highlights list grouped by book, 'Manage subscription' row

Fully responsive, mobile-first. Use realistic invented content: plausible nonfiction titles like 'The Focused Hour' or 'Why Teams Drift' with real-sounding authors - never real book names - and natural category names.

Build a book-summary subscription app (Blinkist model) called Skimwise.

## Entities
- Title: bookTitle, author, hook (one-liner), description, category (productivity/psychology/business/money/health/leadership), coverImage, audioFile, readMinutes, listenMinutes, isPublished, isStarter (boolean), freeOnDate (date, nullable)
- Chapter: title reference, position, heading, body (the actual summary text)
- Progress: user, title reference, currentChapter, audioPositionSeconds, status (saved/in_progress/finished), finishedAt
- Highlight: user, title reference, chapter reference, text, createdAt
- UserProfile: interests (multi-select categories), weeklyGoal, isPremium, trialEndsAt, streakCount, lastReadDate

## Roles & permissions
- Visitor: landing page and pricing only
- Free user: full access to the title whose freeOnDate is today and to starter titles; all other titles show detail pages but Read/Listen opens the paywall
- Premium user: full library, highlights export, offline-friendly access
- Admin: full CRUD on titles and chapters, schedules the daily free pick, sees a dashboard (users, premium count, finishes per title, daily-pick open rate)

## Pages
1. Landing: editorial hero with book covers, pricing (monthly $12.99 / yearly $79.99 with 7-day trial), category strip, FAQ
2. Onboarding after signup: pick 3+ interest categories, weekly goal, read/listen preference; ends on the paywall with a continue-free option
3. Home: 'Today's free pick' hero card with FREE TODAY badge, rows personalized by chosen interests, trending row; lock badges for free users
4. Title detail: cover, hook, key-insight teaser list, read/listen times, Read and Listen buttons or unlock CTA
5. Reader: one chapter per screen with progress ('Insight 3 of 8'), next/previous, font-size control; selecting text creates a Highlight
6. Player: cover, play/pause, 15-second skips, progress bar, speed control (1x to 2x); position saves continuously
7. Library: Saved / In progress / Finished tabs, streak counter, monthly finished count, highlights list
8. Admin: titles table with chapter editor, free-pick calendar, publish toggles, stats dashboard

## Rules
- A title is accessible if the user isPremium, or its freeOnDate equals today, or isStarter is true - enforce this on every read/listen action, not just in the UI
- Finishing the last chapter, or listening past 90% of the audio, sets status finished and stamps finishedAt
- Streak +1 on the first finished title each calendar day; reset to 1 after a missed day; show the streak in the header
- Reading position and audio position belong to one Progress record so switching between reading and listening resumes correctly
- Trial sets isPremium true and trialEndsAt = now + 7 days; after expiry the user reverts to free (checked on login)
- Only one title may have freeOnDate set to any given date (admin scheduling rule)

## Look & feel
Warm editorial light theme: paper #FAF6EF background, ink #1E2A32 text, emerald #0FB58A primary, amber #F5A524 streak/badge accents, serif display headings, book covers with soft shadows, rounded corners. Mobile-first with bottom tabs (Home, Explore, Library, Profile).

Seed with 18 invented nonfiction titles across the 6 categories (plausible fictional books and authors - never real ones), each with 6–8 chapters of readable summary text, today's free pick scheduled, one admin user, and a demo user with two in-progress titles, three finished and a 3-day streak.