Quiz-app Tailwind Templates

Quiz App

quiz app using react(vite) and tailwind

Quiz Application šŸŽÆ

A dynamic, web-based quiz application with gamification features, built using React (Vite) and Tailwind CSS. The app fetches quiz data from an API and provides an interactive experience with animations, streak tracking, and a progress bar in results.

šŸš€ Features

āœ”ļø Fetches quiz questions dynamically from an API.

āœ”ļø Tracks correct answer streaks.

āœ”ļø Animations for correct and incorrect answers.

āœ”ļø Progress bar in results based on score.

āœ”ļø Randomized question order for a unique experience.

āœ”ļø Mobile-responsive UI with Tailwind CSS.

šŸ“‚ Folder Structure

quiz-app/

│── public/ # Static assets (favicon, logos)

│── src/

│ ā”œā”€ā”€ assets/ # Images, icons, and other assets

│ ā”œā”€ā”€ components/ # Reusable UI components

│ ā”œā”€ā”€ page/ # Main pages (Home, QuizPage, ResultPage)

│ ā”œā”€ā”€ utils/ # Utility functions (API requests, helper functions)

│ ā”œā”€ā”€ App.jsx # Root component

│ ā”œā”€ā”€ main.jsx # Entry point

│── index.html # Main HTML file

│── vite.config.js # Vite configuration

│── package.json # Dependencies and scripts

│── README.md # Project documentation

šŸ”§ Tech Stack

Frontend: React (Vite), Tailwind CSS

State Management: React Hooks

Navigation: React Router

API: Fetching data from "https://api.jsonserve.com/Uw5CrX"

šŸ“¦ Installation & Setup Clone the repository:

git clone https://github.com/your-repo.git cd quiz-app

Install dependencies:

npm install

Start the development server:

npm run dev

Open http://localhost:5173/ in your browser.

šŸ“Œ Usage

Click "Start Quiz" on the homepage. Select answers for each question. Get feedback with animations. View your final score with a progress bar. Try again and improve your streak!

šŸ“œ License

This project is licensed under the MIT License.

Top categories

Loading Svelte Themes