fix: add lesson 6
This commit is contained in:
304
Les06-NextJS-QuickPoll-Part2 2/demo-zips/QUICK-START.md
Normal file
304
Les06-NextJS-QuickPoll-Part2 2/demo-zips/QUICK-START.md
Normal file
@@ -0,0 +1,304 @@
|
||||
# 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!
|
||||
Reference in New Issue
Block a user