novi-lessons/Les06-NextJS-QuickPoll-Part2 2/demo-zips/TEACHER-GUIDE.md

QuickPoll Next.js Demo - Live Coding Guide for Tim

Overview

This is a complete, step-by-step Next.js 15 project built for live-coding demonstrations. Each step has a git tag, allowing you to jump between different stages of the application during class.

File Structure

demo-output/
├── stap-0.zip                       # Project setup + types + data
├── stap-1.zip                       # Layout & Navigation
├── stap-2.zip                       # Homepage with poll cards
├── stap-3.zip                       # API routes (GET all, GET single, POST create)
├── stap-4.zip                       # POST vote route + demo form
├── stap-5.zip                       # Poll detail page
├── stap-6.zip                       # VoteForm component
├── stap-7.zip                       # Loading, error, not-found pages
├── stap-8.zip                       # Middleware
├── bonus.zip                        # Create poll page
└── quickpoll-demo-complete.zip      # Full project with complete git history

How to Use in Live-Coding Class

1. Setup Before Class

Extract quickpoll-demo-complete.zip:

unzip quickpoll-demo-complete.zip
cd quickpoll-demo
npm install

2. Jump Between Steps During Class

Use git checkout to jump to any step:

# Go to beginning (step 0)
git checkout stap-0

# Progress to step 1
git checkout stap-1

# Jump to step 4 to show the demo form
git checkout stap-4

# Go back to the final version
git checkout bonus

3. Run the Application

npm run dev

Then open http://localhost:3000 in your browser and use the projector to show students.

4. Show the Demo Form (stap-4)

When you checkout stap-4, a demo page is available at http://localhost:3000/demo:

• Show students how to use the form to test the vote API
• Open DevTools (F12) → Network tab to show the POST request
• Open Console to show the console.log messages
• Display the fetch code example to teach how API calls work

What Each Step Covers

stap-0: Project Setup

• Create Next.js project with TypeScript and Tailwind
• Set up types and data structures
• Initial folder structure with in-memory "database"
• Includes .cursorrules for consistent code style

Files to show:

• src/types/index.ts - Poll and VoteBody interfaces
• src/lib/data.ts - Sample polls data and functions

stap-1: Layout & Navigation

• Add navbar with QuickPoll branding
• Add navigation links (Home, Nieuwe Poll in bonus)
• Update metadata and HTML structure
• Global Tailwind styling

Files to show:

• src/app/layout.tsx - Layout component with navbar

stap-2: Homepage

• Display all polls as cards
• Show poll question, number of options, total votes
• Add hover effects and links to poll detail pages

Files to show:

• src/app/page.tsx - Homepage with poll cards grid
• Tailwind classes for responsive design

stap-3: API Routes

• Create GET /api/polls - fetch all polls
• Create GET /api/polls/[id] - fetch single poll
• Create POST /api/polls - create new poll
• Use Next.js 15 async params pattern

Files to show:

• src/app/api/polls/route.ts
• src/app/api/polls/[id]/route.ts
• Point out params: Promise<{ id: string }> pattern

stap-4: Vote API Route + Demo Form

• Create POST /api/polls/[id]/vote - vote on a poll
• Input validation and error handling
• Demo form at /demo - interactive testing page
• Console.log statements for teaching
• Display fetch code example

Files to show:

• src/app/api/polls/[id]/vote/route.ts
• src/app/demo/page.tsx - the demo form (use projector!)
• DevTools Console to show logging
• DevTools Network tab to show POST requests

stap-5: Poll Detail Page

• Create src/app/poll/[id]/page.tsx (Server Component)
• Add generateMetadata() for dynamic SEO
• Use notFound() for missing polls
• Placeholder for VoteForm (comes next)

Files to show:

• src/app/poll/[id]/page.tsx
• Point out that this is a Server Component (no "use client")

stap-6: VoteForm Component

• Create src/components/VoteForm.tsx ("use client")
• Implement voting with state management
• Show results after voting with percentage bars
• Purple theme (#7c3aed) with gradient progress bars
• Real-time vote count updates

Files to show:

• src/components/VoteForm.tsx
• Explain useState and fetch inside a component
• Show console.log for vote submissions
• Update to src/app/poll/[id]/page.tsx to use VoteForm

stap-7: Error Handling Pages

• Create src/app/loading.tsx - skeleton loader
• Create src/app/error.tsx - error boundary
• Create src/app/not-found.tsx - global 404 page
• Create src/app/poll/[id]/not-found.tsx - poll-specific 404

Files to show:

• Explain Suspense boundaries and error handling
• Show how Next.js automatically uses these files

stap-8: Middleware

• Create src/middleware.ts - request logging
• Log request timing and paths
• Use matcher for selective routes

Files to show:

• src/middleware.ts
• Point out the matcher configuration

bonus: Create Poll Page

• Create src/app/create/page.tsx - full form with validation
• Dynamic option inputs (add/remove)
• POST to /api/polls and redirect
• Remove demo page (was temporary for stap-4)
• Add "Nieuwe Poll" link to navbar

Files to show:

• src/app/create/page.tsx - form implementation
• Error handling and validation

Teaching Tips

Code Highlighting

• Use VS Code theme with good contrast on projector
• Increase font size (at least 16-18pt)
• Use "Zen Mode" or "Fullscreen" for less distraction

Live Coding Strategy

1. Type slowly - Let students follow along
2. Explain as you type - Narrate what you're doing
3. Run often - Show working results frequently
4. Use DevTools - Show Network and Console tabs
5. Ask questions - Make it interactive

DevTools Demonstrations

When showing stap-4 demo:

1. Open http://localhost:3000/demo
2. Open DevTools (F12)
3. Go to Console tab - show console.log messages
4. Go to Network tab
5. Fill the form and click "Stem"
6. Show the POST request in Network tab
7. Show the JSON response
8. Check the Console for detailed logging

Key Concepts to Teach

• Server Components vs Client Components - explain when to use "use client"
• Dynamic Routes - show how [id] creates dynamic pages
• API Routes - show how /api routes handle requests
• Middleware - show how to run code before requests
• Tailwind CSS - explain utility-first CSS
• State Management - useState in VoteForm
• Fetch API - how components communicate with API

Projector Tips

• Test the layout on a real projector before class
• Use a light theme for better visibility
• Zoom in on code snippets (Ctrl/Cmd + in browser)
• Keep demos simple - don't try to build everything from scratch

File Sizes

• stap-0.zip to stap-8.zip: ~32-43 KB each
• bonus.zip: ~44 KB
• quickpoll-demo-complete.zip: ~160 KB (includes full git history)

Git Commands for Students

After you show them the steps, students can explore:

# See all commits
git log --oneline

# See all tags
git tag -l

# Jump to a specific step
git checkout stap-3

# See what changed in this step
git diff stap-2 stap-3

# Go back to latest
git checkout bonus

Troubleshooting

Port 3000 already in use

npm run dev -- -p 3001

Changes not showing

# Hard refresh in browser
Ctrl+Shift+R (Windows/Linux)
Cmd+Shift+R (Mac)

Git checkout doesn't work

# Make sure you're in the project directory
cd quickpoll-demo

# See current status
git status

# If you have uncommitted changes
git stash

# Then try checkout again
git checkout stap-5

Build errors

# Clear Next.js cache
rm -rf .next

# Reinstall dependencies
npm install

# Try building
npm run build

Project Structure Notes

• src/app/ - Next.js App Router pages and layouts
• src/components/ - Reusable React components
• src/lib/ - Utility functions and mock data
• src/types/ - TypeScript interfaces
• src/middleware.ts - Request middleware
• public/ - Static assets

Additional Resources

• Next.js 15 docs: https://nextjs.org/docs
• Tailwind CSS: https://tailwindcss.com/docs
• React: https://react.dev

Next Steps After the Demo

Students can:

1. Modify poll questions and options
2. Add new features (e.g., poll deletion, editing)
3. Connect to a real database (PostgreSQL, MongoDB, etc.)
4. Add authentication
5. Deploy to Vercel

Good luck with your live-coding demonstration! 🎉