novi-lessons/Les06-NextJS-QuickPoll-Part2/demo-zips/QUICK-START.md

# QuickPoll Demo - Quick Start Guide

## For Tim - Before Your Class

### 1️⃣ Prepare Your Setup (30 minutes before class)

```bash
# Extract the complete project
unzip quickpoll-demo-complete.zip

# Enter directory
cd quickpoll-demo

# Install dependencies
npm install

# Test that it runs
npm run dev
```

Should see:
```
- ready started server on 0.0.0.0:3000, url: http://localhost:3000
```

### 2️⃣ Check All Git Tags Are Present

```bash
git tag -l
```

You should see:
```
bonus
stap-0
stap-1
stap-2
stap-3
stap-4
stap-5
stap-6
stap-7
stap-8
```

### 3️⃣ Test Jumping Between Steps

```bash
# Go to step 2
git checkout stap-2

# Refresh browser - should show just poll cards
# Look at src/app/page.tsx - should be simple

# Go to final version
git checkout bonus

# Refresh browser - should show full app with "Nieuwe Poll" link
# Look at src/app/create/page.tsx - should exist
```

### 4️⃣ Check Your Display Setup

- Open browser with http://localhost:3000
- Test font size on projector (should be easily readable)
- Test network tab in DevTools (for stap-4 demo)
- Test VS Code has good contrast

---

## During Your Class

### Starting the Session

```bash
# Make sure you're at the beginning
git checkout stap-0
npm run dev
```

Then open http://localhost:3000 in your browser.

### Jumping Between Steps

When you want to show a new step:

```bash
# Stop the dev server (Ctrl+C)
git checkout stap-3

# Restart dev server
npm run dev

# Browser should hot-reload automatically
# If not, refresh manually (Ctrl+R or Cmd+R)
```

### Key Demo Points

#### ⭐ Step 4 - The Voting API Demo (Most Important)

1. Navigate to http://localhost:3000/demo
2. Open DevTools (F12)
3. Go to Console tab - show logging
4. Go to Network tab
5. Fill the form with:
   - Poll ID: `1`
   - Option Index: `0`
6. Click "Stem" button
7. Watch the Network tab to show POST request
8. Show the JSON response
9. Show console logs

This is your most visual demonstration!

#### Step 1 - Layout

Show the navbar:
- Point out the "QuickPoll" branding (purple)
- Show the links being added

#### Step 2 - Homepage

Show poll cards appearing:
- Click one to navigate to detail page
- Show responsive grid

#### Step 3 - API Routes

Show file structure in VS Code:
- `src/app/api/polls/route.ts` - GET all, POST create
- `src/app/api/polls/[id]/route.ts` - GET single
- Point out `params: Promise<{ id: string }>` - Next.js 15 pattern

#### Step 5-6 - Poll Detail & Voting

Show the full flow:
1. Homepage → Click a poll
2. Vote on the poll
3. See results appear
4. Show purple gradient progress bars

#### Step 7-8 - Error Handling & Middleware

Show what happens when things break:
- Try navigating to non-existent poll (404 page)
- Point out loading skeleton briefly
- Show middleware logging in terminal

### Stopping the Dev Server

```bash
Ctrl+C
```

---

## Troubleshooting During Class

| Problem | Solution |
|---------|----------|
| Port 3000 in use | `npm run dev -- -p 3001` |
| Browser shows old code | Hard refresh: `Ctrl+Shift+R` or `Cmd+Shift+R` |
| Git checkout fails | Run `git status` to check for uncommitted changes, then `git stash` |
| DevTools won't show Network tab | Close and reopen DevTools (F12) |
| Terminal shows errors | Try: `npm install` then `npm run dev` again |
| Can't see projector clearly | Zoom in: `Ctrl/Cmd + +` in browser |

---

## File Locations You'll Reference

```
quickpoll-demo/
├── src/types/index.ts          ← Show for TypeScript interfaces
├── src/lib/data.ts             ← Show for sample data
├── src/app/layout.tsx          ← Show for navbar
├── src/app/page.tsx            ← Show for homepage
├── src/app/api/polls/          ← Show for API routes
├── src/app/poll/[id]/page.tsx  ← Show for dynamic routing
├── src/components/VoteForm.tsx ← Show for client component
├── src/app/create/page.tsx     ← Show for form handling
└── src/middleware.ts           ← Show for middleware concept
```

---

## Live-Coding Tips

### Before You Type
- Take a screenshot for reference
- Know where you're going
- Have keyboard shortcuts ready

### While You Type
- Type **slowly** - let students follow
- **Talk through** what you're doing
- **Pause** at key lines to explain
- **Ask questions** - make it interactive

### Show Results
- Run frequently
- Show in browser on projector
- Use DevTools to demonstrate
- Let students ask questions

---

## Sample Dialog When Showing Step 4

> "Okay, we have our API route that accepts votes. But how does it work? Let me show you with this demo form."
>
> *Navigate to /demo*
>
> "Here we have a simple form. Let me open DevTools to show what happens behind the scenes."
>
> *Open DevTools, go to Console tab*
>
> "When I click 'Stem', two things happen:
> 1. The browser makes a request to our API
> 2. We get back the updated poll with new vote counts"
>
> *Click "Stem" button*
>
> "Look at the Console - you can see exactly what happened. Now let me show you in the Network tab..."
>
> *Go to Network tab*
>
> "Here's our POST request. The body shows we sent the option index (0), and the response shows the entire poll with updated vote counts."

---

## After Class

### Save Your Progress
The project uses git, so all your changes are tracked. If you made modifications, you can:

```bash
# See what you changed
git status

# Commit your changes
git add .
git commit -m "My live-coding edits"
```

### For Student Assignments
You can:
1. Share the `stap-5.zip` as a starting point
2. Have students add the VoteForm (stap-6 solution)
3. Or start with complete project and have them add features

### Deploy (Optional)
To deploy this app:
```bash
# Sign up at vercel.com
# Install Vercel CLI
npm i -g vercel

# Deploy
vercel
```

---

## Key Concepts to Emphasize

✅ **Server Components** - Default in Next.js, simpler, faster
✅ **Client Components** - Use "use client" only when needed
✅ **API Routes** - Backend code in `/api` folder
✅ **Dynamic Routes** - `[id]` creates flexible routing
✅ **TypeScript** - Catch errors before they happen
✅ **Tailwind CSS** - Write styles in HTML with utility classes
✅ **Fetch API** - How frontend talks to backend

---

## Questions Students Will Ask

**"Why use Next.js instead of just React?"**
> Next.js gives you Server Components, API routes, better file structure, and automatic optimization. React is just the UI library - Next.js is the complete framework.

**"Can we use a database instead of in-memory data?"**
> Yes! Add PostgreSQL or MongoDB. That's another lesson though.

**"How long would this take to build from scratch?"**
> About 1-2 hours for a developer. We're doing it in steps so you can understand each concept.

**"Can we deploy this?"**
> Absolutely - to Vercel in 1 command. That's our bonus if we have time.

---

## You've Got This! 🎉

The project is ready. You have:
- ✅ Complete, working Next.js 15 app
- ✅ Git tags at every step
- ✅ Demo form for showing APIs
- ✅ Clear progression from basic to advanced
- ✅ Purple theme ready for classroom
- ✅ Console logs for debugging

Just follow this guide, and your students will love seeing a real app built step-by-step!