# 🧠 SmolBrainDuel

![Logo](assets/logo.png)

A fast-paced, group-based quiz game where speed and smarts go head to head!

---

## 📑 Table of Contents

- [Features](#-features)
- [Architecture](#-architecture)
- [Prerequisites](#-prerequisites)
- [Getting Started](#-getting-started)
- [Usage](#-usage)
- [Environment Variables](#-environment-variables)

## ✨ Features

- Real-time group quiz gameplay  
- Faster answers yield higher scores  
- User-friendly interface built with Vue.js  
- Backend API developed using Express.js and PostgreSQL  
- Backend synchronization via Redis  
- Fully containerized for seamless deployment  

## 🧱 Architecture

The system includes the following services:

- **Frontend**: Built with Vue.js and Vite  
- **Backend**: Developed using Express.js  
- **Database**: PostgreSQL, for storing quiz data and lobby states  
- **Load Balancer**: NGINX, for load balancing and serving static files  
- **Redis**: Used for syncing backend state and broadcasting events  

![Architecture Overview](assets/overview.png)

## 🧰 Technologies

- **Frontend**: Vue.js 3, Vue Router, TypeScript, Tailwind CSS, Vite
- **Backend**: Express.js, TypeScript, PostgreSQL, Redis, SSE
- **Loadbalancer**: NGINX

## 🚀 Getting Started

Follow these steps to set up and run the application:

1. **Clone the repository**:

    ```sh
    git clone https://github.com/yourusername/group_quiz.git
    cd group_quiz
    ```

2. **Build and start the services**:

    ```sh
    docker-compose up --build --scale backend=2 -d
    ```

3. **Access the application**:

    - Frontend: [http://localhost](http://localhost)

## 🎮 Usage

- **Create a Lobby**: Users can initiate a new quiz lobby.  
- **Join a Lobby**: Users can enter an existing lobby using a unique code.  
- **Start the Quiz**: The lobby creator can launch the quiz; participants will answer questions in real time.  
- **Scoring**: Points are awarded based on answer speed — quicker responses earn more points.  

## ⚙️ Environment Variables

Set the following environment variables as needed:

- **Frontend**:  
  - `VITE_BACKEND_URL`: Base URL for the backend API

## Screenshots

![Architecture Overview](assets/Game1.png)
![Architecture Overview](assets/Game2.png)
![Architecture Overview](assets/Game3.png)
![Architecture Overview](assets/Game4.png)
![Architecture Overview](assets/Game5.png)