This is a web-based quiz application built with Next.js and TypeScript, which allows users to take trivia quizzes with customizable numbers of questions.
- User-friendly landing page to start the quiz.
- Interactive progress bar that reaches 100% before proceeding, even if all questions are fetched.
- Real-time feedback on each question (correct/incorrect).
- Score tracking and display.
- Responsive and user-friendly design.
- Server-side rendering for an efficient and SEO-friendly application.
- Utilizes TypeScript for type safety and better development experience.
The project is structured as follows:
pages/
- Contains Next.js page components.components/
- Includes React components.styles/
- Stores style-related files (CSS or other styling solutions).utils/
- Holds utility functions.api/
- Handles API requests, including communication with the Open Trivia Database API.
- Next.js - A server-rendered React framework for building web applications.
- TypeScript - A statically typed superset of JavaScript that enhances development safety and productivity.
- he - A library for decoding HTML entities in strings.
- shadcn/ui - A UI component library used for building user interfaces.
- next-pwa - A Zero Config PWA plugin
To get started with this project, follow these steps:
- Clone the repository to your local machine.
- Install project dependencies using
npm install
oryarn install
. - Run the development server with
npm run dev
oryarn dev
. - Visit
http://localhost:3000
in your web browser.
You can customize the number of questions by modifying the appropriate setting within the application.
- Open Trivia Database API - Providing trivia questions for the quizzes.
This project is open-source and available under the MIT License.