System Design
System Architecture
Below is a high-level overview of our application's system architecture. The diagram shows the different components of the system and how they interact with each other.
System Components
User
Represents the end-user who interacts with the application through a web interface. They initiate actions such as submitting AI prompts, creating bookings, and viewing data in the frontend.
React App
A client-side web application that renders the user interface. It sends requests to the backend, displays the data returned, and handles user interactions in the browser. It is deployed as an Azure Static Web App.
Flask App
The backend web application responsible for processing requests from the frontend. It interacts with external services such as the Azure AI Service and Gmail SMTP server, as well as a data store for data storage and retrieval. It is deployed as an Azure App Service.
Azure AI Service
A cloud-based AI service that receives prompts from the backend and returns AI-generated responses, it can also execute certain function calls in the backend. Specifically, we utilise a fine-tuned GPT-4o-mini OpenAI Assistant.
Gmail SMTP Server
A mail server used by the backend to send booking confirmation emails to users. It handles the delivery of the emails to the recipients.
Azure PostgreSQL Database Server
A managed relational database that securely stores user and booking data. The backend interacts with the database to query, insert and update stored information.
Site Map
The site map provides a visual representation of the website's structure, showing the relationships between different pages and sections.
Sequence Diagrams
Below are the sequence diagrams illustrating the flow of interactions between different components of our system for key processes:
Booking Flow
Chatbot Flow
Design Patterns
Our application integrates several design patterns to ensure maintainability, scalability, and a clear separation of concerns. Below are the key patterns we've implemented:
Service Layer Pattern
The backend of our project will implement a Service Layer pattern to separate
business
logic from controllers and data access. This pattern creates distinct service classes such as
BookingService, AIService, and EmailService that
encapsulate related operations.
Facade Pattern
We will implement the Facade pattern in our backend API routes to provide simplified interfaces to complex subsystems. This pattern simplifies client interactions with our API by hiding the complexity of the underlying systems and providing clear, consistent interfaces.
Component-Based Architecture
The frontend will be built using a Component-Based Architecture with React, creating reusable, self-contained UI elements. This architecture improves maintainability, promotes code reuse across the application, and provides a consistent user experience. It also makes testing easier by enabling us to test components in isolation.
Three-Tier Architecture
We will use a Three-Tier Architecture to separate our application into distinct tiers for presentation (React frontend), application logic (Flask backend), and data (Azure PostgreSQL database). This separation enhances maintainability and allows each layer to scale independently.
Data Storage
The Entity-Relationship (ER) diagram below illustrates the database structure of our application, showing the relationships between different tables and their attributes. Also note that emails are unique for users and start times are unique for timeslots.
