How to Clone Pinterest

Create a Pinterest-style visual bookmarking app called Mosaiq using Next.js (App Router), Tailwind, Prisma + SQLite. Niche: interior design and home decor.

## What to build
A masonry image grid where users save pins to boards, follow people and boards, search, and view 'more like this' suggestions. Public pin and board pages must be server-rendered for SEO.

## Screens
- Home feed: responsive masonry grid (CSS columns are fine: 2 cols mobile / 5 desktop), pin cards with hover overlay containing a Save button + board picker popover
- Pin detail at /pin/[id]: large image, title, description, source link, creator chip, save button, comments, related pins grid below (same dominant_color or shared title keywords)
- Board page at /[username]/[boardSlug]: header with cover collage (first 3 pin images), pins grid, edit mode for the owner (remove pin, change board details, toggle secret)
- Search at /search?q=: full-text over pin title+description, refinement chips, tabs for Pins / Boards / People
- Profile at /[username]: boards grid + created pins tab, follow/unfollow button with optimistic count
- Create pin modal: image URL or file upload, title, description, destination link, board select (with inline 'new board' option)
- Notifications dropdown: saves of your pins, new followers

## Prisma schema
User (id, username unique, name, email, avatarUrl, bio), Board (id, userId, title, slug, description, isSecret), Pin (id, creatorId, imageUrl, title, description, sourceUrl, dominantColor), Save (id, userId, pinId, boardId, createdAt, unique [userId, pinId, boardId]), Follow (id, followerId, targetType, targetId, unique [followerId, targetType, targetId]), Comment (id, pinId, userId, body), Notification (id, userId, type, actorId, subjectId, read)

## Logic (must actually work)
- Save flow: clicking Save opens a board picker; choosing a board creates a Save row and a Notification for the pin's creator; saving to a new board creates the board inline
- Feed query: pins from followed users/boards (via Save join) ordered by recency, then backfill with pins ranked by save count in the last 7 days; exclude secret-board content and already-saved pins
- Secret boards: enforce in every query, not just the UI - a non-collaborator must get a 404 on the board URL
- Related pins: same dominantColor bucket OR overlapping title words, excluding the current pin, limit 20
- Counts (saves per pin, followers) computed via Prisma _count, not stored columns
- Notifications: created on save/follow/comment, marked read when the dropdown opens; cap the dropdown at 20 with a 'view all' page

## SEO (matters a lot for this product)
- Server-render /pin/[id] and board pages with proper <title>, meta description and OpenGraph image tags - every public pin is a landing page
- Generate human URLs: /[username]/[boardSlug] and /pin/[id]-[title-slug]

## Style
Gallery-clean: white background, #211922 text, terracotta #C94F36 primary buttons, sand #F4EDE4 chips, 16px card radius, masonry gutters 16px, image-first cards with no borders, skeleton shimmer while images load. Mobile-first with a bottom nav (Home, Search, Create, Notifications, Profile).

Seed: 60 decor pins across 6 styles with realistic titles and descriptions, 8 users each with 2–3 boards and saves spread around, follow relationships, 1 secret board for the demo user, and 15 comments. Log in as the demo user by default.

Build a production-quality Pinterest-style visual discovery platform for a single vertical (interior design). The feed, save flow and image pipeline must hold up under real content volume - design for thousands of pins from day one.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui; TanStack Query for feed infinite scroll
- PostgreSQL via Prisma; NextAuth (email + Google); pgvector for related-pins similarity
- Image storage on S3-compatible bucket (R2) with an on-the-fly resize route or imgproxy; never serve originals in the grid

## Core design: the save graph
A Pin is created once; a Save links (user, pin, board). All counts and feeds derive from Saves. Model this explicitly:
  pins (id, creator_id, image_key, width, height, title, description, source_url, embedding vector(512), dominant_color)
  boards (id, user_id, title, slug, is_secret), saves (user_id, pin_id, board_id, created_at, PK on all three)
  follows (follower_id, target_type enum(user,board), target_id)
Store image width/height at upload time - the masonry layout must reserve exact aspect-ratio space before images load (no layout shift).

## Feed & search architecture
- Home feed endpoint: keyset-paginated union of (a) recent saves from followed users/boards, (b) trending pins by 7-day save count, deduped, secret content filtered in SQL with an EXISTS guard - write one well-tested query, not app-side merging
- Search: Postgres tsvector over title+description with websearch_to_tsquery; refinement chips come from the top co-occurring terms in result titles
- Related pins: cosine distance on pgvector embeddings (generate CLIP or text embeddings at pin-create time in a background job); fall back to dominant_color match when embeddings are missing

## Implementation order
1. Schema + auth + image upload pipeline (presigned upload, server-side resize to 3 variants, extract dimensions + dominant color)
2. Pin create, board CRUD, save flow with board-picker popover (optimistic UI, server reconciliation)
3. Masonry feed: virtualized columns, keyset pagination, aspect-ratio placeholders
4. Pin detail + comments + related pins (embeddings job)
5. Search with chips and tabs; public SSR pin/board pages with OpenGraph tags (every pin page is an SEO asset)
6. Follows, notifications (fan-out on write to a notifications table), profile pages
7. Creator stats page: saves and clicks per pin over time

## Quality bar
- Zero cumulative layout shift in the grid; LCP image preloaded on pin detail
- Secret boards enforced by row-level checks in every data path, with integration tests proving a stranger gets 404
- Save button works without JS hydration completing (progressive enhancement on the detail page)
- Rate-limit pin creation and comments per user per hour

Start with step 1; show me the Prisma schema and the image upload route before continuing.

Design the complete UI for a Pinterest-style visual discovery app called Mosaiq, focused on interior design. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: clean gallery - white background, near-black #211922 text, terracotta #C94F36 primary, sand #F4EDE4 surfaces, 16px radii, images always the hero, Inter font.

## Screens

### 1. Home feed (main screen)
- Top bar: logo mark, large pill search input with placeholder 'Search styles, rooms, colors...', notification bell with dot, avatar
- Masonry grid: 2 columns mobile / 3 tablet / 5 desktop, variable-height image cards with 16px gutters
- Card hover state: darkened image, terracotta 'Save' button top-right, source domain chip bottom-left, share + more icons bottom-right
- Save button opens a board-picker popover: searchable list of boards with thumbnail + name, checkmark on the suggested board, 'Create board' row at the bottom
- Mobile: bottom tab bar (Home, Search, Create +, Updates, Saved)

### 2. Pin detail
- Two-column card on desktop (stacked on mobile): image left with rounded corners, right panel with source domain link, title (serif display moment is OK here), description, creator row (avatar, name, follower count, Follow button), action row (save primary, share, more)
- Comments section: input with avatar, list with reactions
- Below: 'More to explore' full-width masonry grid

### 3. Board page
- Centered header: collage cover (1 big + 2 small images), board title, pin count + secret lock badge if private, collaborator avatar stack with + button, Edit button
- Toolbar: sort dropdown, 'Organize' toggle that puts cards in jiggle-select mode with a bulk action bar (Move, Delete)
- Pins masonry below

### 4. Search
- Search results header with the query, horizontally scrollable refinement chips in muted colors ('scandi', 'dark academia', 'small space', 'rental friendly')
- Tabs: Pins / Boards / Profiles; boards tab shows board cover cards with title + pin count; profiles tab shows avatar cards with follow buttons
- Empty state: friendly illustration, 'No pins yet for that - try one of these' with suggestion chips

### 5. Profile
- Centered: large avatar, display name, @username, bio, follower/following counts, Follow (or Edit profile) button
- Tabs: Boards (responsive grid of board covers with titles and pin counts, secret boards with lock icon) / Created

### 6. Create pin
- Two-pane modal: left drag-and-drop upload zone with dashed border (or URL paste field), right form with title, description textarea, destination link, board select; live preview card updates as you type

Fill everything with realistic interior-design content: 40+ placeholder images at varied aspect ratios, decor-style titles ('Japandi bedroom in oak + linen'), believable usernames and counts. Fully responsive, mobile-first, with skeleton loading states for the grid.

Build a visual discovery and mood-board app (Pinterest model) called Mosaiq for interior design and home decor.

## Entities
- Pin: creator (user), imageUrl, title, description, sourceUrl, dominantColor, createdAt
- Board: owner (user), title, description, isSecret (boolean), createdAt
- Save: user, pin reference, board reference, createdAt - saving puts a pin on a board; one pin can be saved by many users to many boards
- Follow: follower (user), targetType (user or board), targetId
- Comment: pin reference, user, body, createdAt
- Notification: user, type (save/follow/comment), actor, subject, read flag

## Roles
- Member: browses the feed, creates pins, saves to boards, follows, comments
- Admin: moderation dashboard - review reported pins, remove content, see daily signups / pins created / saves

## Pages
1. Home feed: infinite masonry grid of pin images (2 columns on mobile, 5 on desktop); hovering a card shows a Save button that opens a board picker; top bar with search, notifications and profile
2. Pin detail: big image, title, description, link to source, creator info with follow button, save button, comments, and a 'More like this' grid underneath (pins sharing the dominant color or title words)
3. Board page: cover collage, title, privacy badge, the board's pins, and an edit mode for the owner to remove pins or make the board secret
4. Search: results grid with refinement chips under the search bar; tabs for Pins, Boards and People
5. Profile: avatar, bio, follower counts, grid of the user's boards plus a Created tab
6. Create pin: upload an image or paste an image URL, add title, description, destination link, choose a board
7. Notifications: list of saves of your pins, new followers and comments
8. Admin: reported-content queue and basic usage stats

## Rules
- Saving another user's pin credits the original creator ('Saved from ...') and notifies them
- Secret boards and everything on them are invisible to everyone except the owner - exclude them from feeds, search and profiles
- Home feed shows followed users' and boards' recent saves first, then the most-saved pins of the last week; never show the same pin twice
- Deleting a save removes the pin from your board only; deleting a pin you created removes it everywhere
- A user cannot follow themselves; usernames are unique and lowercase

## Look & feel
Minimal gallery design: white background, near-black #211922 text, terracotta #C94F36 buttons and accents, sand #F4EDE4 chips, 16px rounded cards, no borders - let the images carry the page. Smooth hover scale on cards, skeleton shimmer while loading. Mobile-first with a bottom nav.

Seed: 60 interior-design pins across six styles (scandi, japandi, industrial, boho, mid-century, cottage) with realistic titles, 8 users with 2–3 boards each, cross-follows, one secret board, and 15 comments so the app feels lived-in from the first load.