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

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

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