Skip to content

Software Design

This page includes a short description of the overall architecture style of the system, its high-level system components, and their logical (what data they exchange) and control (how they invoke each other) dependencies.


Architecture Diagram

This diagram provides a high-level understanding of the architecture involved in the project.

Architecture Diagram


AWS Architecture

For details about how images are stored and retrieved, see the Media Storage Architecture.


ER Diagram for the database schema

View it on Lucidchart

ER Diagram


UML Class Diagram

This diagram is a description of logical entities of the domain through a UML diagram.

View it on mermaid

UML Class Diagram


Sequence Diagrams

View them on Lucidchart

Authentication

Sequence Diagram

Site Inspection Form

Sequence Diagram

Update Form

Sequence Diagram

Image Upload

Sequence Diagram

Sequence Diagram

Site Profiles

Sequence Diagram


Low-Fidelity User Interface

This is a low-fidelity projection of the end-product. The final design may take a different direction.

View them on figma

This is a low-fidelity UI for the web app

Low-Fidelity User Interface for web app

This is a low-fidelity UI for the mobile app

Low-Fidelity User Interface for mobile app


List of Technologies Used

Backend: Supabase + PostgreSQL + AWS

Cloud Infrastructure & Cost Control

Deployment: Cybera

Mobile: React Native

Testing & Tools