# 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)