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

QuickPoll Demo - Quick Start Guide

For Tim - Before Your Class

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

# 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

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

# 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

# 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:

# 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

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:

# 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:

# 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!