Quiz Application

A responsive quiz application built with Next.js 14, utilizing React Query, Redux Toolkit, TypeScript, and Chakra UI. This app allows users to select quiz categories and answer questions, providing instant feedback on their answers, with support for light/dark mode.

Features

• Dynamic Quiz Categories: Select from various categories to take quizzes relevant to your interests.
• Instant Feedback: Get immediate feedback on whether your answers are correct or incorrect.
• Progress Tracking: Track your progress throughout the quiz.
• Light/Dark Mode: Toggle between light and dark themes for a personalized experience.
• Responsive Design: Optimized for both desktop and mobile views.

Tech Stack

• Next.js 14: Framework for building the application with server-side rendering and static site generation.
• React Query: For managing server state and fetching data efficiently.
• Redux Toolkit: State management for application-wide data.
• TypeScript: Provides type safety and enhances development experience.
• Chakra UI: For building accessible and responsive UI components.

Installation

Follow these steps to set up the project locally:

1. Clone the repository:

   git clone https://github.com/azarahmadov/NextJs-Quiz-app.git
   cd NextJs-Quiz-app
   

2. Install dependencies:

   npm install
   

3. Set up the environment:

   NEXT_PUBLIC_BASE_URL=http://localhost:3000
   

4. Run the development server:

   npm run dev

5. Open your browser and go to http://localhost:3000 to see the application in action.

Usage

1. Choose a quiz category from the main page.
2. Answer the multiple-choice questions presented.
3. Receive feedback on your answers.
4. Track your progress with the provided progress bar.
5. Toggle between light and dark mode using the UI switch.

Screens