337 lines
9.1 KiB
Markdown
337 lines
9.1 KiB
Markdown
# 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)
|