DSA Quiz Component

note: ai (gemini 2.5 pro) was used in the construction of this , Thankyou HackClub for SOM!!

Welcome to the DSA Quiz component!
This is a modular, visually engaging quiz interface designed as part of a larger open-source project by our university's OpenSource Club. The main project is a comprehensive DSA Visualization Tool that helps students and enthusiasts learn Data Structures and Algorithms (DSA) through interactive visualizations and quizzes.

---

✨ Features

• Modern UI: Beautiful, animated landing page with category cards for Data Structures and Algorithms.
• Topic-based Quizzes: Each card links to a quiz on a specific DSA topic (e.g., Linked Lists, Trees, Sorting Algorithms).
• React Router Integration: Seamless navigation between topics using React Router.
• Component-Based: All quiz logic and UI are split into reusable React components.
• State Management: Uses Zustand for simple and scalable state management.
• Animations: Smooth transitions and effects powered by Framer Motion.
• Responsive Design: Works well on both desktop and mobile devices.

---

🚀 Getting Started

1. Clone the repository:

   git clone <repo-url>
   cd DSA-quiz

2. Install dependencies:

   npm install

3. Run the development server:

   npm start

   or

   npm run dev

4. Open your browser:
   Visit http://localhost:3000 to see the app in action.

---

🧩 Folder Structure

src/
  ├── App.jsx                # Main app with routing
  ├── index.jsx              # Entry point
  └── quiz/
      ├── components/        # All quiz and UI components
      ├── data/              # Quiz questions
      ├── store/             # Zustand store for state
      └── styles/            # CSS for components

---

📝 How It Works

• The landing page (landingpage.jsx) displays cards for each DSA topic.
• Clicking a card navigates to the quiz for that topic.
• Each quiz is rendered by the Quiz component, which loads questions and manages user progress.
• Results and progress are shown at the end of each quiz.

---

🛠️ Tech Stack

• React
• React Router
• Framer Motion
• Zustand
• React Icons
• React Toastify

---

🤝 Contributing

We welcome contributions!
If you'd like to add new quiz topics, improve the UI, or help with the DSA visualization tool, please open an issue or submit a pull request.

---

📚 About the Project

This quiz module is part of a larger DSA Visualization Tool being developed by the OpenSource Club.
Our goal is to make learning DSA fun, interactive, and accessible for everyone.

---

🧑‍💻 Authors & Credits

• Developed by members of the OpenSource Club
• Special thanks to all contributors and testers!