> ## Documentation Index
> Fetch the complete documentation index at: https://poolerz.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Component Design

> The component design of Poolerz.

The diagrams below provide a **detailed breakdown of our application’s static and dynamic architectures**, showcasing **relationships, dependencies, method overviews, and system components**.

* **Static Architecture:** Expands on the general system architecture (Figure 1) by breaking down the **frontend, backend, and database layers**, showing interactions during carpool creation and joining.
* **Dynamic Architecture:** Builds on the static architecture by **demonstrating user interactions** and **response flows** across layers.

Together, these diagrams provide a **comprehensive architectural view** of our application.

***

## **Static Component Architecture**

<img src="https://mintcdn.com/poolerz/QJ_9o0D7RJnmN_4g/images/fig4.png?fit=max&auto=format&n=QJ_9o0D7RJnmN_4g&q=85&s=8b3d7872dd6584a72ee623b4e45f10af" alt="Static Component Diagram" width="871" height="1091" data-path="images/fig4.png" />

The **static component diagram** (Figure 3.1) outlines the **key system elements** and their interactions.\
Instead of a **traditional component diagram**, we use a **class diagram** to clearly depict:

* **Application elements**
* **Interactions across layers**

### **Key Layers & Components**

#### **Frontend Layer**

This layer consists of UI components that the **user directly interacts with**:

* **Profile**
* **Modal**
* **JoinCarpool**
* **CreateCarpool**

These components handle:

* **Displaying user interfaces**
* **Accepting user input**
* **Interacting with the backend for functional operations**

*Annotations like* `<<uses>>` *and* `<<creates>>` *indicate dependencies between components.*

#### **Business Logic Layer**

This layer includes:

* **Server & Optimizer**: Handles data retrieval, user updates, and carpool grouping logic.

#### **Database Layer**

* The **backend interacts with the database** to update:
  * **Carpools Collection:** Stores **carpool details, schedules, and members**.
  * **UserData Collection:** Stores **user profiles and personal details**.

Figure 3.1 presents a **clear structural overview** of how these components work together.

***

## **Dynamic Component Architecture**

<img src="https://mintcdn.com/poolerz/QJ_9o0D7RJnmN_4g/images/fig5.png?fit=max&auto=format&n=QJ_9o0D7RJnmN_4g&q=85&s=167ec0bf2449925ae8adf921d3aa6c1a" alt="Dynamic Architecture Diagram" width="931" height="1120" data-path="images/fig5.png" />

The **dynamic architecture diagram** (Figure 3.2) illustrates the **user flow** when:

1. **Joining a carpool**
2. **Creating a carpool**
3. **Viewing a carpool**

We utilize an **interaction overview diagram** to display:

* **Primary user flows**
* **Multiple sequence diagrams nested within different processes**

### **Key User Flows**

#### **1. Joining a Carpool**

* **User selects a carpool** from the UI.
* **Data is sent to the backend**, where the system:
  * **Adds the user to the carpool database**.
  * **Sends confirmation of successful join**.

#### **2. Creating a Carpool**

* **User inputs carpool details** via the frontend.
* **Backend processes the request** and:
  * **Creates a new carpool entry in the database**.
  * **Returns confirmation of creation to the frontend**.

#### **3. Viewing a Carpool**

* **User selects a carpool to view**.
* **Frontend requests carpool details from the backend**.
* **Backend queries the database** and:
  * **Retrieves relevant data**.
  * **Returns the information to be displayed on the UI**.

Figure 3.2 effectively captures **real-time user interactions**, ensuring a **seamless user experience** across **frontend, backend, and database layers**.

***

By integrating **both static and dynamic architecture models**, our design ensures:

* **Clear system structure**
* **Efficient data flow**
* **Scalability and maintainability**