7.9 KiB
7.9 KiB
QuickPoll Next.js 15 Demo Project - Summary
Project Description
QuickPoll is a complete polling application built with Next.js 15, TypeScript, and Tailwind CSS. Designed specifically for live-coding classroom demonstrations, it includes git tags at each development step.
Technology Stack
- Next.js 15 - React framework with App Router
- TypeScript - Fully typed JavaScript
- Tailwind CSS - Utility-first CSS framework
- In-Memory Data - Mock "database" for demo purposes
- React Hooks - useState for client-side state management
Project Structure
quickpoll-demo/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── page.tsx # Homepage with poll list
│ │ ├── layout.tsx # Root layout with navbar
│ │ ├── globals.css # Global Tailwind styles
│ │ ├── loading.tsx # Loading skeleton
│ │ ├── error.tsx # Error boundary
│ │ ├── not-found.tsx # 404 page
│ │ ├── api/ # API route handlers
│ │ │ └── polls/
│ │ │ ├── route.ts # GET all, POST create
│ │ │ ├── [id]/
│ │ │ │ ├── route.ts # GET single poll
│ │ │ │ ├── vote/route.ts # POST vote
│ │ │ │ └── not-found.tsx
│ │ ├── poll/[id]/ # Dynamic poll detail page
│ │ │ └── page.tsx
│ │ └── create/ # Create new poll page
│ │ └── page.tsx
│ ├── components/ # Reusable components
│ │ └── VoteForm.tsx # Voting component
│ ├── lib/ # Utilities and data
│ │ └── data.ts # Mock poll data & functions
│ ├── types/ # TypeScript interfaces
│ │ └── index.ts # Poll, VoteBody, CreatePollBody
│ └── middleware.ts # Request logging middleware
├── .cursorrules # Code style guidelines
├── package.json
├── tsconfig.json
└── tailwind.config.ts
Core Features
1. Display Polls (Homepage)
- Show all available polls as cards
- Display question, option count, total votes
- Click to navigate to poll detail page
2. Poll Details (Dynamic Page)
- Show full poll question and options
- Real-time voting results with percentage bars
- Server-rendered for SEO
3. Vote on Polls (VoteForm Component)
- Select an option
- Submit vote via POST API
- See results immediately after voting
- Purple theme with gradient progress bars
4. Create Polls (Bonus Step)
- Form to create new polls
- Input validation
- Dynamic option fields (add/remove)
- Automatic redirect to new poll
5. API Routes
GET /api/polls- Get all pollsGET /api/polls/[id]- Get single pollPOST /api/polls- Create new pollPOST /api/polls/[id]/vote- Vote on poll
6. Middleware
- Log all requests with timing
- Track API and poll page access
7. Error Handling
- Loading skeleton (Suspense)
- Error boundary component
- 404 pages (global and poll-specific)
Git Tags for Progression
| Tag | Step | What's Added |
|---|---|---|
stap-0 |
Project Setup | Types, data, file structure, .cursorrules |
stap-1 |
Layout & Navigation | Navbar, layout, metadata |
stap-2 |
Homepage | Poll cards grid, Links |
stap-3 |
API Routes | GET all, GET single, POST create |
stap-4 |
Vote API & Demo | POST vote, Demo form at /demo |
stap-5 |
Poll Detail Page | Dynamic [id] route, metadata |
stap-6 |
VoteForm Component | Client component with voting logic |
stap-7 |
Error Handling | loading.tsx, error.tsx, not-found.tsx |
stap-8 |
Middleware | Request logging middleware |
bonus |
Create Poll | Full form, navbar link, remove demo |
How to Use in Class
Before Class
unzip quickpoll-demo-complete.zip
cd quickpoll-demo
npm install
npm run dev
During Class
# Jump to any step
git checkout stap-3
# View what changed
git diff stap-2 stap-3
# Go to final version
git checkout bonus
Demo the Voting API (stap-4)
- Navigate to http://localhost:3000/demo
- Show the form (projector)
- Open DevTools Console to show logging
- Open DevTools Network tab to show POST request
- Display the fetch code example
Teaching Points
TypeScript & Types
- Define interfaces for data structures
- Export from
src/types/index.ts - Use types in function parameters
Next.js Features
- App Router with file-based routing
- Dynamic routes:
[id]creates/poll/1,/poll/2, etc. - Server Components by default
- Client Components with "use client" directive
- API routes in
/app/api - Special files:
layout.tsx,not-found.tsx,error.tsx,loading.tsx
React Patterns
- Server Components (default, no interactivity)
- Client Components with useState
- Component composition (VoteForm in PollDetailPage)
- Fetch API for server communication
Tailwind CSS
- Utility-first approach
- Responsive design (md:, lg: prefixes)
- Color system (purple-500, purple-600, purple-700)
- Hover states and transitions
Form Handling
- Controlled inputs with useState
- Validation before submit
- Loading states during submission
- Error handling and feedback
Sample Data
Three pre-loaded polls:
-
"Wat is je favoriete programmeer taal?"
- JavaScript, Python, TypeScript, Rust
- Sample votes: 45, 32, 28, 15
-
"Hoe veel uur slaap krijg je per nacht?"
- < 6 uur, 6-8 uur, 8+ uur
- Sample votes: 12, 68, 35
-
"Welke framework gebruik je het meest?"
- React, Vue, Svelte, Angular
- Sample votes: 89, 34, 12, 8
Color Scheme
Purple Theme for QuickPoll:
#7c3aed- purple-500 (main color)#a855f7- purple-600 (hover)#9333ea- purple-700 (pressed)
Neutral Colors:
- Gray-50 to Gray-900 for text and backgrounds
- White for cards and backgrounds
- Red-600 for error states
- Blue-50 for information
Building & Deployment
Build for Production
npm run build
npm start
Build Verification
npm run build
Output shows:
- Static pages:
/,/create - Dynamic pages:
/poll/[id] - API routes:
/api/polls,/api/polls/[id], etc. - Middleware (Proxy)
Files Per Step
Each zip file contains the complete project at that step:
- All source code
- package.json with dependencies
- Configuration files
- Excludes:
node_modules/,.next/,.git/
The quickpoll-demo-complete.zip includes:
- Full git history
- All commits and tags
- Ability to
git checkoutany step
Typical Class Flow
- stap-0 to stap-2 - Show basic structure and homepage (15 min)
- stap-3 - Explain API routes (10 min)
- stap-4 - Demo the voting API in action (15 min) ⭐ Key demo point
- stap-5 to stap-6 - Build the voting interface (15 min)
- stap-7 to stap-8 - Error handling and middleware (10 min)
- bonus - Create poll feature (optional, 10 min)
Key Takeaways for Students
- Next.js makes building full-stack apps easy
- Server Components are the default (simpler, faster)
- API routes live alongside your pages
- TypeScript catches errors early
- Tailwind makes styling fast and consistent
- Git tags let you track feature development
Common Questions
Q: Is this production-ready? A: No - it uses in-memory data. For production, add a real database like PostgreSQL or MongoDB.
Q: Can I add authentication? A: Yes - add NextAuth.js or similar. Future lesson!
Q: How do I deploy this? A: Deploy to Vercel (created by Next.js team) or any Node.js hosting. See https://nextjs.org/docs/app/building-your-application/deploying
Q: Can students modify the code? A: Absolutely! Use it as a starting point for assignments.
Created: March 2026 Next.js Version: 15.x Node Version: 18+ recommended