🎯 QuizBuilder

A full-stack quiz builder application where you can create, share, and attempt interactive multiple-choice quizzes with instant scoring and leaderboards.

---

🛠️ Tech Stack

Layer	Technology
Frontend	React 19 + Vite 6
Backend	Python Django 6 + Django REST Framework
Database	SQLite (dev) / PostgreSQL (prod)
Styling	Vanilla CSS (Dark Glassmorphism theme)
Fonts	Inter (Google Fonts)

---

🚀 Features

• Create Quizzes — Add title, description, and multiple questions with options
• Take Quizzes — Interactive quiz-taking UI with progress bar
• Score Calculation — Automatic scoring with percentage
• Results Page — Detailed answer review with correct/incorrect highlighting
• Leaderboard — View all attempts ranked by score
• Delete Quizzes — Remove quizzes you no longer need
• Responsive Design — Works on desktop and mobile
• Premium Dark UI — Glassmorphism, gradient accents, smooth animations

---

📁 Project Structure

project/
├── core/                   # Django project settings
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── quizzes/                # Django app
│   ├── models.py           # Quiz, Question, Option, Attempt models
│   ├── serializers.py      # DRF serializers
│   ├── views.py            # API views
│   ├── urls.py             # API routes
│   └── admin.py            # Admin panel config
├── client/                 # React frontend
│   ├── src/
│   │   ├── App.jsx         # Router + Navbar
│   │   ├── api.js          # API service layer
│   │   ├── index.css       # Design system
│   │   ├── main.jsx        # Entry point
│   │   └── pages/
│   │       ├── HomePage.jsx
│   │       ├── CreateQuizPage.jsx
│   │       ├── QuizDetailPage.jsx
│   │       ├── QuizAttemptPage.jsx
│   │       └── ResultsPage.jsx
│   ├── index.html
│   ├── vite.config.js
│   └── package.json
├── manage.py
└── README.md

---

⚙️ Setup Instructions

Prerequisites

• Python 3.10+
• Node.js 18+
• pip

1. Clone the project

git clone <repo-url>
cd project

2. Backend Setup

# Install Python dependencies
pip install django djangorestframework django-cors-headers

# Run migrations
python manage.py migrate

# (Optional) Create admin superuser
python manage.py createsuperuser

# Start Django server
python manage.py runserver

The backend runs on http://127.0.0.1:8000

3. Frontend Setup

cd client

# Install dependencies
npm install

# Start dev server
npm run dev

The frontend runs on http://localhost:5173 and proxies API calls to Django.

---

🔗 API Endpoints

Method	Endpoint	Description
GET	/api/quizzes/	List all quizzes
POST	/api/quizzes/	Create a new quiz
GET	/api/quizzes/<id>/	Get quiz detail (with answers)
DELETE	/api/quizzes/<id>/	Delete a quiz
GET	/api/quizzes/<id>/attempt/	Get quiz for taking (no answers)
POST	/api/quizzes/<id>/submit/	Submit a quiz attempt
GET	/api/quizzes/<id>/attempts/	Get all attempts (leaderboard)
GET	/api/attempts/<id>/	Get a specific attempt result

Example: Create a Quiz

POST /api/quizzes/
{
  "title": "JavaScript Basics",
  "description": "Test your JS knowledge",
  "questions": [
    {
      "text": "What keyword declares a variable?",
      "options": [
        { "text": "let", "is_correct": true },
        { "text": "print", "is_correct": false },
        { "text": "dim", "is_correct": false }
      ]
    }
  ]
}

Example: Submit an Attempt

POST /api/quizzes/<quiz-id>/submit/
{
  "participant_name": "John",
  "answers": [
    { "question_id": "<uuid>", "selected_option_id": "<uuid>" }
  ]
}

---

👥 Team Structure (5 Members)

Role	Responsibilities
Team Lead	Planning, coordination, integration, conflict resolution
Frontend Dev	React pages, UI/UX, form validation, API integration
Backend Dev (Quiz Logic)	Django views, serializers, scoring logic
Backend Dev (Database)	Models, schema design, migrations, query optimization
QA / Docs	Testing, bug reporting, README, API docs, demo prep

---

📝 License

MIT