Skip to content

README.md

Latest commit

 

History

History
99 lines (63 loc) · 2.34 KB

README.md

File metadata and controls

99 lines (63 loc) · 2.34 KB

🎯 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!