Build the app you pictured.

Paste it as your first message. Nothing you type here leaves this page.

# Build a Forum app

You are a senior full-stack engineer and product designer. Build a production-ready Forum product for Web, using Next.js. Follow the brief below. If anything is ambiguous, ask before you assume.

## Product brief
A discussion platform with threaded conversations, user moderation, and content categorization for community engagement.

## Signature experiences
- Thread creation
- Reply management
- User reputation
- Moderation tools
- Category organization
- Notification system
- Search functionality

## Functional requirements
**User Management:** Authentication, User Profiles
**Administration:** Content Management
**Content & Search:** Search Functionality, Comments & Reviews, Ratings
**Interaction:** Notifications

## Platforms & form factors
**Web:**
- Responsive from 360px phones to 1920px+ desktops, with fluid type and layout.
- Fast first load (Core Web Vitals: LCP < 2.5s, CLS < 0.1), SEO metadata and social cards.
- Keyboard navigation and visible focus on every interactive element.

## Tech stack
- **Next.js**: React framework for production-grade applications with built-in SSR and static generation.
- Ecosystem: React, Vercel, TypeScript, Tailwind CSS
- Lean on: Server-side rendering, Static site generation, API routes, File-system routing

## Production essentials
**Analytics:**
- Use PostHog for product analytics, funnels and feature flags.
- Identify signed-in users; reset identity on sign-out.
- Write a tracking plan first: name the 5–10 events that prove the core journey works (sign-up, activation, the key action, upgrade) and the properties each carries.
- Respect consent and Do Not Track; keep personal data out of event properties.
**Monitoring:**
- Use Sentry for error tracking and performance tracing on every client and the server, with source maps uploaded per release.
- Tag events with release, environment and user ID (never personal data).
- Catch errors at every boundary (UI error boundaries, API handlers, background jobs) and alert on new issues and error-rate spikes.
- Emit structured logs with a request ID that ties a user action to its server work.

## Quality bar
- Accessible by default: semantic structure, labels, sufficient contrast, and support for system text size.
- Type-safe end to end; validate all user input at the boundary.
- Every data view has loading, empty and error states.
- Configuration through environment variables, documented in `.env.example`. No secrets in code.
- Tests for core business logic and seed data for local development.
- Plan for scale: Medium with proper caching.

## How to work
1. Before writing code, explore the repo (if any) and write a short PLAN.md: data model, routes, components, and an ordered task list. Pause for my review.
2. Implement the plan task by task. After each task, run the type checker, linter and tests, and fix failures before moving on.
3. Commit after each verified task with a clear message. Keep a running "Done / Next" list at the bottom of PLAN.md.

## Build plan
Work through these stages in order, one stage per session. Keep PLAN.md in the repo, tick each stage when its checks pass, and start every new session by reading PLAN.md and continuing from the first unticked stage. Show me the check results before moving on.

1. **Set up.** Create the project, write SPEC.md from this brief and DESIGN.md from the design section, and add PLAN.md listing every stage below.
   Done when: The app runs locally; PLAN.md lists every stage.
2. **Foundation.** Build the shared layout, navigation and an empty page for every route in SPEC.md, using only the design tokens.
   Done when: Every page has a route; Navigation works on phone and desktop.
3. **Core features.** Build one feature from SPEC.md at a time, test it, and tick it off in PLAN.md before starting the next.
   Done when: Each feature works end to end; PLAN.md shows which features are done.
4. **Accounts and data.** Add sign-in and the database, keeping each user’s data private to them.
   Done when: A new user can sign up and sign back in; One user cannot see another user’s data.
5. **Analytics and monitoring.** Track the key events from the tracking plan. Report browser and server errors.
   Done when: A key action shows up as an event; A test error reaches the dashboard.
6. **Polish.** Check every page at phone, tablet and desktop sizes; add loading, empty and error states and visible keyboard focus.
   Done when: No page scrolls sideways on a phone; An accessibility scan finds no serious issues.
7. **Pre-launch check.** Go through SPEC.md requirement by requirement, fix anything missing, then rerun every earlier check.
   Done when: Every requirement is done or explained; All earlier checks still pass.
8. **Launch.** Deploy, connect the domain and set production settings. Ask me before switching anything that takes real money or sends real messages.
   Done when: The site loads on its domain; Production settings are set and documented.