# QuickPoll - Next.js 15 Demo Project

## Project Overview
QuickPoll is a simple polling application built with Next.js 15, TypeScript, and Tailwind CSS. This project is designed for live-coding demonstrations.

## Architecture Rules

### Technology Stack
- **Framework**: Next.js 15 with App Router
- **Language**: TypeScript (strict mode)
- **Styling**: Tailwind CSS
- **Data**: In-memory (mock database in src/lib/data.ts)

### File Structure
```
src/
├── app/              # Next.js App Router
│   ├── layout.tsx    # Root layout with navbar
│   ├── page.tsx      # Homepage with poll list
│   ├── globals.css   # Global Tailwind styles
│   ├── loading.tsx   # Loading skeleton
│   ├── error.tsx     # Error boundary
│   ├── not-found.tsx # 404 page
│   ├── api/          # API routes
│   ├── poll/         # Dynamic poll detail page
│   ├── create/       # Create new poll page
│   └── demo/         # Demo form (temporary for stap-4)
├── components/       # Reusable React components
├── lib/              # Utilities and data
├── types/            # TypeScript interfaces
└── middleware.ts     # Request logging middleware
```

## Code Style Guide

### TypeScript
- Always use explicit types (no `any`)
- Use interfaces for data structures
- Export types from `src/types/index.ts`

### Components
- Use `"use client"` directive ONLY when state/interactivity is needed
- Server Components by default (no directive needed)
- Always add comments explaining component behavior

### Naming Conventions
- **Variables/Functions**: camelCase in English
- **Components**: PascalCase
- **Types/Interfaces**: PascalCase
- **Files**: kebab-case.tsx for components, index.ts for exports

### Tailwind CSS
- Use Tailwind classes exclusively (no inline styles)
- Purple theme for QuickPoll: #7c3aed (purple-500), purple-600, purple-700
- Responsive design with mobile-first approach

### UI Text
- Code: English (variables, function names, comments)
- User-facing UI: Dutch (button labels, placeholders, messages)

### Lessons & Comments
Add educational comments for Tim's live-coding:
```typescript
// Dit is een Server Component (default in Next.js)
// "use client" omdat we useState nodig hebben
// Deze route handler returnt JSON
```

## API Route Patterns

### GET Routes
- Always use async function handler
- Handle params with `Promise<{ id: string }>`
- Return proper status codes and JSON
- Include error handling

### POST Routes
- Validate request body
- Use VoteBody/CreatePollBody interfaces
- Return created/modified resource
- Include console.log for teaching

### Error Handling
- 404: `return NextResponse.json({ error: "Not found" }, { status: 404 })`
- 400: `return NextResponse.json({ error: "Invalid request" }, { status: 400 })`

## Dynamic Pages
- Use `generateMetadata()` for SEO
- Handle `notFound()` for missing resources
- Use async params pattern for Next.js 15

## Demo Form (stap-4)
The temporary demo page at `/demo` should:
- Show a simple form to test API routes
- Include network request examples in `<pre>` block
- Have console.log statements for debugging
- Display JSON responses clearly

## Testing
- Each step must build without errors: `npm run build`
- Test API routes with fetch() examples shown to students
- Verify Tailwind styles render correctly

## Git Workflow
- Commit after each step with descriptive message
- Tag each step: `git tag stap-0`, `git tag stap-1`, etc.
- Include educational value in commit messages
