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.