fix: add lesson 6
This commit is contained in:
336
Les06-NextJS-QuickPoll-Part2 2/demo-zips/INDEX.md
Normal file
336
Les06-NextJS-QuickPoll-Part2 2/demo-zips/INDEX.md
Normal file
@@ -0,0 +1,336 @@
|
||||
# QuickPoll Next.js Demo - Complete File Index
|
||||
|
||||
## 📍 START HERE
|
||||
|
||||
1. **For Tim (Teacher)**: Read `QUICK-START.md` first
|
||||
2. **For Understanding the Project**: Read `README.md`
|
||||
3. **For Complete Teaching Guide**: Read `TEACHER-GUIDE.md`
|
||||
4. **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!)
|
||||
|
||||
### Pages
|
||||
- `src/app/page.tsx` - Homepage with poll cards
|
||||
- `src/app/poll/[id]/page.tsx` - Poll detail page with voting
|
||||
|
||||
### 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
|
||||
```bash
|
||||
unzip quickpoll-demo-complete.zip
|
||||
cd quickpoll-demo
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### During Class
|
||||
```bash
|
||||
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
|
||||
```bash
|
||||
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
|
||||
1. Read QUICK-START.md (10 min)
|
||||
2. Follow setup instructions
|
||||
3. Test each step beforehand
|
||||
4. Use git checkout to jump between steps
|
||||
5. Use projector for display
|
||||
|
||||
### For Experienced Teachers
|
||||
1. Extract complete project
|
||||
2. Review TEACHER-GUIDE.md for key points
|
||||
3. Customize as needed
|
||||
4. Focus on stap-4 demo form
|
||||
|
||||
### For Students (After Class)
|
||||
1. Extract any zip file
|
||||
2. Run npm install && npm run dev
|
||||
3. Explore the code
|
||||
4. Try modifying things
|
||||
5. 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)
|
||||
Reference in New Issue
Block a user