rubberducky/novi-lessons

Fork 0

Files

Tim Rijkse 8df4087cfd fix: add lesson 6

2026-03-17 17:24:10 +01:00

9.1 KiB

Raw Permalink Blame History

QuickPoll Next.js Demo - Complete File Index

📍 START HERE

For Tim (Teacher): Read QUICK-START.md first
For Understanding the Project: Read README.md
For Complete Teaching Guide: Read TEACHER-GUIDE.md
For Technical Details: Read PROJECT-SUMMARY.md

📦 Project Files

Complete Project with Git History

quickpoll-demo-complete.zip          ~160 KB
└─ Full project with all 10 git tags
   Extract this and use git checkout to jump between steps

Individual Step Archives

stap-0.zip                           ~32 KB    Project setup + types + data
stap-1.zip                           ~32 KB    Layout & Navigation
stap-2.zip                           ~33 KB    Homepage with poll cards
stap-3.zip                           ~34 KB    API routes (GET/POST)
stap-4.zip                           ~37 KB    Vote API + demo form ⭐
stap-5.zip                           ~39 KB    Poll detail page
stap-6.zip                           ~40 KB    VoteForm component
stap-7.zip                           ~43 KB    Error handling pages
stap-8.zip                           ~43 KB    Middleware
bonus.zip                            ~44 KB    Create poll page

Total Project Size: ~588 KB (all files)

📚 Documentation

Quick Start (3 pages, 7.1 KB)

File: QUICK-START.md

For Tim before class
Setup instructions
Key demo points
Troubleshooting
Recommended read time: 10 minutes

Main README (3 pages, 7.2 KB)

File: README.md

Project overview
Getting started
Key features
Technology stack
Common questions

Complete Teacher Guide (5 pages, 8.5 KB)

File: TEACHER-GUIDE.md

Complete lesson breakdown
What to show in each step
DevTools demonstration strategy
Key concepts to teach
Tips for live coding

Project Summary (4 pages, 7.9 KB)

File: PROJECT-SUMMARY.md

Technical architecture
Git tag progression
Teaching points
Sample data
Build information

🎓 Learning Path

Beginner Path (Individual Zips)

If you want to start from scratch for each step:

1. Extract stap-0.zip
2. npm install && npm run dev
3. Do the live-coding
4. Extract stap-1.zip (new terminal)
5. Repeat...

Pros: Each step is fresh, you can code along Cons: More setup, can't jump back easily

Advanced Path (Complete Project)

If you want flexible jumping between steps:

1. Extract quickpoll-demo-complete.zip
2. npm install
3. npm run dev
4. git checkout stap-0 (or any step)
5. Browser auto-refreshes
6. git checkout stap-5 (jump forward)

Pros: One setup, jump anywhere, see git history Cons: Less live-coding from scratch

Recommended: Use Complete Project with git checkout

📋 File Structure in Zips

Each zip contains a Next.js project with this structure:

quickpoll-demo/
├── src/
│   ├── app/                          # Next.js App Router
│   │   ├── page.tsx                  # Homepage
│   │   ├── layout.tsx                # Root layout with navbar
│   │   ├── globals.css               # Tailwind imports
│   │   ├── loading.tsx               # Loading skeleton
│   │   ├── error.tsx                 # Error boundary
│   │   ├── not-found.tsx             # 404 page
│   │   ├── api/
│   │   │   └── polls/
│   │   │       ├── route.ts          # GET all, POST create
│   │   │       └── [id]/
│   │   │           ├── route.ts      # GET single poll
│   │   │           ├── vote/route.ts # POST vote ⭐
│   │   │           └── not-found.tsx
│   │   ├── poll/[id]/
│   │   │   ├── page.tsx              # Dynamic detail page
│   │   │   └── not-found.tsx
│   │   └── create/
│   │       └── page.tsx              # Create poll form (bonus)
│   ├── components/
│   │   └── VoteForm.tsx              # Voting component
│   ├── lib/
│   │   └── data.ts                   # Mock data & functions
│   ├── types/
│   │   └── index.ts                  # TypeScript interfaces
│   └── middleware.ts                 # Request logging
├── .cursorrules                       # Code style guidelines
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── .gitignore

⭐ Key Files to Show Students

Data & Types

src/types/index.ts - Poll interface, VoteBody interface
src/lib/data.ts - Sample polls, getPolls(), votePoll()

API Routes

src/app/api/polls/route.ts - GET all, POST create
src/app/api/polls/[id]/route.ts - GET single
src/app/api/polls/[id]/vote/route.ts - POST vote (Key demo point!)

Components

src/components/VoteForm.tsx - Client component with voting logic

Layout & Styling

src/app/layout.tsx - Navbar and global structure
src/app/globals.css - Tailwind imports (minimal)

🔧 System Requirements

Node.js: 18 or higher
npm: 9 or higher
Disk Space: ~500 MB for node_modules (generated during npm install)
Browser: Any modern browser with DevTools (for demos)
Projector: Recommended for classroom (test beforehand!)

🚀 Quick Commands Reference

Setup

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

During Class

git tag -l                              # List all tags
git checkout stap-4                     # Jump to step 4
git diff stap-2 stap-3                  # See what changed
git log --oneline                       # Show commits

Build & Test

npm run build                           # Production build
npm run dev -- -p 3001                  # Different port

Browser

http://localhost:3000               # Homepage
http://localhost:3000/poll/1        # Poll detail
http://localhost:3000/create        # Create form (bonus)
http://localhost:3000/demo          # Demo form (stap-4 only)

DevTools (F12)

Console: See console.log statements
Network: See API requests
Elements: Inspect HTML/CSS

📊 Project Statistics

Metric	Value
Git Commits	10
Git Tags	9 (stap-0 through stap-8, plus bonus)
TypeScript Files	11
Components	2 (VoteForm + pages)
API Routes	4
Total Lines of Code	~1,200
Build Time	~1.3 seconds
Estimated Teaching Time	60-75 minutes

✅ Verification Checklist

Before teaching, verify:

All 10 zip files present and readable
quickpoll-demo-complete.zip contains .git folder
All 4 markdown documentation files present
npm version 9+ installed
Node 18+ installed
Can extract and npm install without errors
npm run dev starts without errors
Homepage loads at http://localhost:3000
All git tags present (git tag -l)
Can checkout different tags without errors
DevTools work correctly (F12)
Network tab shows API requests
Console.log appears in DevTools console

🎯 Recommended Usage

For First-Time Teachers

Read QUICK-START.md (10 min)
Follow setup instructions
Test each step beforehand
Use git checkout to jump between steps
Use projector for display

For Experienced Teachers

Extract complete project
Review TEACHER-GUIDE.md for key points
Customize as needed
Focus on stap-4 demo form

For Students (After Class)

Extract any zip file
Run npm install && npm run dev
Explore the code
Try modifying things
See changes in real-time

🆘 Common Issues

Problem	Solution
"npm: command not found"	Install Node.js from nodejs.org
"Port 3000 in use"	Use `npm run dev -- -p 3001`
Git tags not showing	You extracted individual zip, not complete
Changes not showing	Hard refresh browser: Ctrl+Shift+R
node_modules missing	Run `npm install`
TypeScript errors	All should build successfully

📞 File Organization

All files are in one directory:

/demo-output/
├── (4 markdown files - documentation)
├── (10 zip files - project archives)
└── (this index file)

For best organization, create this structure:

QuickPoll-Demo/
├── Zips/
│   ├── stap-0.zip through stap-8.zip
│   ├── bonus.zip
│   └── quickpoll-demo-complete.zip
├── Documentation/
│   ├── QUICK-START.md
│   ├── TEACHER-GUIDE.md
│   ├── PROJECT-SUMMARY.md
│   ├── README.md
│   └── INDEX.md
└── Projects/
    └── (extract zips here as needed)

🎉 You're Ready!

Everything is prepared for live-coding demonstrations. Start with QUICK-START.md and you'll have a successful classroom session.

Good luck teaching Next.js! 🚀

Created: March 17, 2026 Files: 15 total (4 docs + 11 zips) Total Size: 588 KB Format: Standard zip archives + Markdown Compatibility: All platforms (Windows, Mac, Linux)

9.1 KiB Raw Permalink Blame History