A lightweight quiz web app built with Next.js App Router designed to deliver shor and topic-specific quizzes with clean UI and optimal performance.
- Dynamic quiz category routing
- Statically generated homepage (SSG)
- Server-side rendering for quiz categories and individual quizzes (SSR)
- API Routes using mock data
- Responsive and professional UI using Tailwind CSS
- next/image optimization for icons
- Client-side state for tracking quiz progress and score
- TypeScript + strict typing
git clone https://github.com/your-username/micro-quiz-platform.git
cd micro-quiz-platformnpm installnpm run devnpm run lint
npm testWe used Next.js App Router (app/), allowing:
- Server Components by default
- Cleaner layout and route structure
- Better async support for SSR and SSG
- Homepage (
/) is statically generated usingfetch()from an API route with{ cache: 'force-cache' }for build-time fetching (sincegetStaticPropsisn't supported in NextJS >= 13).
- Category Page (
/quizzes/[category]) uses dynamic routing and server fetch (fetch(..., { cache: 'no-store' }) for fresh content. - Quiz Page (
/quiz/[id]) also uses SSR for immediate access to quiz data.
-
All quizzes and category data are served via Next.js API Routes using mock JSON objects (no real DB).
-
Structured as:
/api/category/api/quizzes/[category]/api/quiz/[id]
- All category icons are loaded using
next/imagefor automatic compression and responsive support.
- Built with Tailwind CSS, following clean design principles.
- Mobile-friendly with intuitive layout.
- Interactive quiz runner with stateful transitions.
- SSG via
getStaticPropswas not supported in NextJS >= 13, so instead I used thefetch()method with{ cache: 'force-cache' }to mimic static generation behavior for the homepage. - Implementing SSR required careful control over cache and revalidation headers.
- Prevented hydration errors by ensuring server-client HTML match, e.g., correctly using
returninsidemap()in JSX. - Mock data was structured modularly for easy category-based access.
- Learned Jest from scratch to implement functional testing since I didn't have much experience with it.
- Used AI to refine README.md and a small bit of refactoring here and there.
- Framework: Next.js 14+ App Router
- Language: TypeScript
- Styling: Tailwind CSS
- Image: next/image
- Testing: Jest + React Testing Library
- CI: GitHub Actions
Basic unit and integration tests included using:
npm testMIT