🎯 Interactive Quiz Interface

A modern, responsive, and visually appealing quiz application built using React + Vite + Tailwind CSS.
This project replicates a professional Figma design and demonstrates clean UI, component reusability, state management, and smooth user experience.

---

📌 Description

The Interactive Quiz Interface allows users to test their knowledge through a set of multiple-choice questions.
The UI is developed according to a provided Figma design, focusing on:

• Pixel-perfect layout
• Smooth navigation
• Progress tracking
• Clean and readable code architecture
• Professional animations (optional)

This project is part of a frontend assignment for demonstrating strong React fundamentals, Tailwind styling, and UI/UX precision.

---

🚀 Tech Stack

Frontend

• React (Vite) — Fast, modern development environment
• Tailwind CSS — Utility-first CSS for beautiful UI
• Framer Motion (optional) — Smooth animations
• JavaScript (ES6+)

Tools

• Git & GitHub
• VS Code
• Node.js (v16+)

---

📁 Project Structure

---

✨ Features Implemented

✔ Pixel Perfect UI

Recreated exactly from Figma with correct fonts, shadows, spacing, radius, and colors.

✔ Multiple-Choice Quiz System

Real-time question switching, selection, and answer validation.

✔ Progress Bar

Shows the current question number visually using animated bars.

✔ Navigation Buttons

Previous (←) and Next (→) buttons with disabled states.

✔ Result Screen

Displays percentage score with large typography as seen in design.

✔ Responsive Layout

Auto-adjusts for smaller screens using Tailwind.

✔ Reusable Components

Designed using organized and scalable architecture:

• QuestionCard
• ProgressBar
• Quiz
• Result

✔ Clean Code Practices

• Component-based architecture
• Hooks (useState) for state management
• Config-driven quiz questions (data.js)

---

🛠️ Getting Started (Local Development)

Install dependencies:

npm install

Run development server:

npm run dev

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

🌐 Deployment

This project is deployed on Vercel.

https://interactive-quiz-interface.vercel.app/

🙌 Thank You

Thank you for reviewing my work!