How to Clone Reddit

Create a Reddit-style community platform called Quorum using Next.js (App Router), Tailwind, Prisma + SQLite.

## What to build
Topic communities with text/link/image posts, nested votable comments, Hot/New/Top ranking, and working moderation. Server-render post pages for SEO.

## Screens
- Home feed at /: Hot/New/Top tabs, post cards (vote arrows + score on the left, flair chip, title, community + author + time, comment count), left sidebar of joined communities
- Community page at /q/[name]: banner with Join button and member count, rules sidebar, flair filter chips, pinned posts first
- Post page at /q/[name]/post/[id]: full post, comment composer, nested comment tree with indent guides, collapse toggles and per-comment vote arrows; default sort 'Best' (score), toggle to New
- Submit at /submit: community select, Text/Link/Image tabs, title (300 char max), flair picker
- Profile at /u/[username]: karma summary cards, Posts and Comments tabs
- Mod queue at /q/[name]/mod (moderators only): reported items with context, Approve / Remove buttons, ban form (user, reason, days), rules editor

## Prisma schema
User (id, username unique, email, avatarUrl, postKarma, commentKarma), Community (id, name unique, title, description, bannerColor, iconEmoji, createdById), Membership (userId, communityId, role enum member|moderator, unique [userId, communityId]), Post (id, communityId, authorId, type, title, body, url, flair, isPinned, isRemoved, createdAt), Comment (id, postId, parentId nullable self-relation, authorId, body, isRemoved, createdAt), Vote (userId, targetType, targetId, value, unique [userId, targetType, targetId]), Report (id, reporterId, targetType, targetId, reason, status), Ban (communityId, userId, reason, expiresAt)

## Logic (must actually work)
- Voting endpoint: upsert the Vote row; same-direction click deletes it, opposite flips it; recompute score as SUM(value) in queries (no drifting counters); update author karma in the same transaction; block self-votes
- Hot sort: ORDER BY (score) / POWER(hours_since_creation + 2, 1.5) DESC - implement as a computed value in the query
- Comment tree: fetch all comments for the post, build the tree in memory by parentId, render recursively; collapse state client-side
- Moderation: Remove sets isRemoved and resolves the report; removed content renders a '[removed]' placeholder but keeps children visible; bans block posting via a server check, not just hidden buttons
- Joining/leaving updates the home feed immediately; non-members can read and vote but the submit page requires membership
- Karma displayed on profiles and next to usernames on hover cards; pinned posts always sort first regardless of tab

## SEO
- Server-render post pages at /q/[name]/post/[id]-[title-slug] with title, meta description (first 150 chars of the post) and OpenGraph tags - thread pages are the growth channel
- Community pages get their description as the meta description; add a sitemap route covering communities and the latest posts

## Style
Readable and calm: #FAF9F6 background, #1B1B1F text, ember orange #E8590C upvotes and CTAs, slate blue #3B5BDB downvotes and links, compact cards with 8px radius, monospace-ish counters for scores, thin vertical indent lines on comment threads. Mobile-first: vote arrows stay tappable, sidebars collapse into a drawer.

Seed: 5 hobby communities (woodworking, fermentation, vanlife, mechanical keyboards, urban sketching) with rules and flairs, 30 posts with realistic titles and bodies, comment threads nested 3–4 deep, votes from 10 seeded users, 2 open reports in one mod queue, and a demo user who moderates one community.

Build a production-quality Reddit-style community platform. Voting integrity, comment-tree performance and moderation tooling are the hard parts - treat them as such from the start.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui; TanStack Query for feeds and optimistic votes
- PostgreSQL via Prisma; NextAuth (email + Google); Upstash Redis for hot-feed caching and rate limits
- Zod on every mutation input; server actions or route handlers, but pick one and stay consistent

## Core design 1: votes as a ledger
votes (user_id, target_type, target_id, value smallint, created_at, PK user+type+target). Score is SUM(value) - but denormalize post.score and comment.score, updated transactionally with the vote upsert, and add a nightly reconciliation job that recounts from the ledger. Karma updates ride the same transaction. Self-votes rejected server-side. Rate-limit votes per user per minute in Redis.

## Core design 2: the comment tree
Use a materialized path column (path ltree or a '0012.0003.0001' string) on comments so one indexed range query fetches a whole subtree in display order - no recursive CTE per render. Cap initial render at depth 6 with 'continue thread' links that re-root the query. Removed comments keep their path so children stay attached; render '[removed]'.

## Core design 3: moderation as first-class
- mod_actions audit table (who, what, target, reason, timestamp) written by every mod mutation
- Report queue endpoint scoped by community with karma/age context on the reporter and author
- Bans enforced in the post/comment create path (single canAuthor(userId, communityId) util with tests), never just hidden UI
- Automod v1: per-community JSON rules (banned phrases, min account age, min karma) evaluated synchronously on submit; matches go to the queue as 'filtered'

## Feeds & ranking
- Hot score: score / pow(age_hours + 2, 1.5), computed in SQL; home feed = union over joined communities, keyset-paginated
- Cache the top-200 hot post IDs per community in Redis with 60s TTL; hydrate from Postgres
- /all feed from a global cached ranking; New and Top(day/week/all) as plain indexed queries

## Schema
users, communities, memberships (role enum), posts, comments (path, depth), votes, reports, bans, mod_actions, automod_rules. Indexes: posts(community_id, created_at desc), comments(post_id, path), votes PK, memberships(user_id).

## Implementation order
1. Schema + auth + seed (5 communities, realistic threads as typed fixtures)
2. Posts CRUD + community pages + join/leave
3. Vote ledger with optimistic UI + reconciliation job; karma
4. Comment tree: path writes, subtree fetch, recursive renderer, collapse, continue-thread
5. Hot/New/Top feeds with Redis caching; SSR post pages with OpenGraph
6. Moderation: report flow, queue UI, bans, audit log, automod rules
7. Search (tsvector), notifications on replies/mentions, profiles

## Quality bar
- A 500-comment thread renders without N+1 queries (prove it with a seed script and query logging)
- Vote button: optimistic flip in <16ms, reconciles on server response, works logged-out by redirecting to auth
- Every mod action visible in an audit log; integration tests for ban enforcement and removed-content rendering

Start with step 1; show me the comment path design and the vote upsert transaction before continuing.

Design the complete UI for a Reddit-style community platform called Quorum. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: calm modern forum - off-white #FAF9F6 background, ink #1B1B1F text, ember orange #E8590C for upvotes and primary actions, slate blue #3B5BDB for links and downvote accents, compact 8px-radius cards, excellent long-form typography (Inter, relaxed line-height).

## Screens

### 1. Home feed (main screen)
- Top bar: logo, search input, Create Post button, notification bell, avatar menu
- Three-column desktop layout: left sidebar (Home/Popular/All links, joined communities list with icons), center feed, right sidebar (trending communities card, 'create your own community' card)
- Post card anatomy: vertical vote module on the left (up arrow, score, down arrow - orange when upvoted, blue when downvoted), then flair chip, title, 'q/community · u/author · 4h', body preview faded out after 3 lines, footer row (comment count, share, save, more)
- Sort tabs above the feed: Hot (flame icon), New, Top with a period dropdown
- Mobile: single column, bottom tab bar (Home, Communities, Create +, Inbox, Profile)

### 2. Community page
- Banner strip in the community color, overlapping circular icon with emoji, name, member count, online-now dot, Join button (filled when not joined, outline 'Joined' when joined)
- Right sidebar: About card with description and created date, Rules accordion (numbered), moderator list with shield icons
- Flair filter chips row above the feed; pinned posts with a pin icon and tinted background

### 3. Post detail + comment tree
- Full post card, then a comment composer (avatar, textarea growing on focus, Comment button)
- Comment tree: each comment shows avatar, username, karma-tinted badge for the OP, time, body, then a compact action row (vote arrows + score, Reply, more); children indented with a thin clickable vertical line that collapses the branch; '+ 4 more replies' expanders; '[removed]' state in muted italic
- Sort dropdown: Best / New / Controversial; sticky 'back to top' pill on long threads

### 4. Submit post
- Community selector with search and icons, type tabs (Text / Link / Image) switching the form, title field with character counter, markdown-ish toolbar on the body, flair picker as selectable chips, posting rules reminder card on the right

### 5. Mod dashboard
- Tabs: Queue / Banned users / Rules / Flair
- Queue: reported items as cards with the reported content, reporter reason chip, context link, big Approve (green) and Remove (red) buttons, audit trail line underneath
- Banned users table: avatar, name, reason, expiry, lift-ban action

### 6. Profile
- Header: avatar, u/username, join date, karma stat cards (post karma, comment karma), moderator-of badges
- Tabs: Posts / Comments, each as compact list items linking to context

Fill everything with realistic hobbyist content (woodworking, fermentation, mechanical keyboards) - believable post titles, comment threads 3–4 levels deep, varied scores including a controversial one near zero. Fully responsive, mobile-first, with skeleton states for feed loading.

Build a community forum app (Reddit model) called Quorum for niche hobby communities.

## Entities
- Community: name (unique, url-safe), title, description, iconEmoji, bannerColor, rules (list), createdBy
- Membership: user, community reference, role (member or moderator), joinedAt
- Post: community reference, author, type (text/link/image), title, body, url, flair, isPinned, isRemoved, createdAt
- Comment: post reference, parentComment reference (nullable for top-level), author, body, isRemoved, createdAt
- Vote: user, targetType (post or comment), targetId, value (+1 or -1) - one per user per target
- Report: reporter, targetType, targetId, reason, status (open/approved/removed)
- Ban: community reference, user, reason, expiresAt

## Roles
- Member: joins communities, posts, comments, votes, reports content
- Moderator (per community): handles the report queue, removes content, bans users, edits rules, pins posts
- Admin: site-wide stats dashboard and the ability to remove any community or user

## Pages
1. Home feed: posts from joined communities with Hot / New / Top tabs; post cards show vote arrows with score, flair, title, community, author, time and comment count; sidebar lists joined communities
2. Community page: banner, description, member count and Join button, rules in a sidebar, moderator list, pinned posts on top, flair filter chips
3. Post detail: full post, vote arrows, comment box, and the nested comment tree - replies indented under parents, each votable and collapsible; removed items show '[removed]'
4. Submit post: pick community, choose Text / Link / Image, title, content, flair
5. Profile: username, post karma and comment karma, tabs for the user's posts and comments
6. Mod dashboard: report queue with approve/remove actions, banned-user list with durations, rules editor
7. Discover: directory of all communities sorted by member count, with search

## Rules
- A user gets one vote per post or comment; voting the same way twice removes the vote, voting the other way flips it; score = upvotes minus downvotes; no voting on your own content
- Hot feed ranks by score divided by (hours old + 2) to the power 1.5, so fresh popular posts beat stale ones
- Votes on your content change your karma (post and comment karma tracked separately)
- Moderators only have powers inside their own community; removing content leaves a '[removed]' placeholder so threads keep their shape
- Banned users can read but cannot post or comment in that community until the ban expires
- Anyone can create a community and automatically becomes its first moderator

## Look & feel
Calm reading-first design: off-white #FAF9F6 background, ink #1B1B1F text, ember orange #E8590C vote arrows and buttons, slate blue #3B5BDB links, compact rounded cards, thin indent guides on comment threads, comfortable line-height for long posts. Mobile-first with a bottom nav.

Seed: 5 communities (woodworking, fermentation, vanlife, mechanical keyboards, urban sketching) with rules and flairs, 30 realistic posts, comment threads 3–4 levels deep, spread votes, 10 users, a demo user who moderates q/woodworking, and 2 open reports waiting in that mod queue.