# KROW Project Workflows
This document contains diagrams describing the technical architecture and collaboration processes for the project.
## 1. Web App Migration Architecture
This diagram illustrates the migration workflow for the web application. It shows how the UI is exported from the Base44 environment and then connected to our new, unified backend built on Firebase services.
```mermaid
graph LR
subgraph Base44 Environment
direction TB
Client[Client] -- Modifies --> B44_UI[Base44 Visual Builder
Features:
- Event Management
- Staff Directory]
B44_UI --> B44_Backend[Base44 Backend
Provides Schemas & SDK]
end
subgraph Firebase Ecosystem - GCP
direction TB
KROW_FE[KROW Web Frontend
Vite/React + TanStack Query]
subgraph Firebase Services
direction TB
Auth[Firebase Authentication]
DataConnect[Firebase Data Connect
GraphQL API]
SQL_DB[Cloud SQL for PostgreSQL]
end
KROW_FE -- "Uses" --> Auth
KROW_FE -- "Calls API via SDK" --> DataConnect
DataConnect -- "Manages & Queries" --> SQL_DB
end
B44_UI -- "UI Code Export" --> KROW_FE
style Client fill:#f9f,stroke:#333,stroke-width:2px
style B44_UI fill:#ffe,stroke:#333,stroke-width:2px
style KROW_FE fill:#eef,stroke:#333,stroke-width:2px
```
## 2. Mobile App Architecture
This diagram shows how the native mobile applications (Client and Staff) connect to the centralized Firebase backend. This backend is the same one used by the web application.
```mermaid
graph TD
subgraph KROW Mobile Applications
direction LR
Mobile_Client[Mobile Client App
Flutter]
Mobile_Staff[Mobile Staff App
Flutter]
end
subgraph Firebase Backend Services - GCP
direction TB
Auth[Firebase Authentication]
DataConnect[Firebase Data Connect
GraphQL API &
Generated SDKs]
SQL_DB[Cloud SQL for PostgreSQL
Managed by Data Connect]
end
Mobile_Client -- "Authenticates with" --> Auth
Mobile_Client -- "Calls API via generated SDK" --> DataConnect
Mobile_Staff -- "Authenticates with" --> Auth
Mobile_Staff -- "Calls API via generated SDK" --> DataConnect
DataConnect -- "Manages & Queries" --> SQL_DB
style Mobile_Client fill:#eef,stroke:#333,stroke-width:2px
style Mobile_Staff fill:#eef,stroke:#333,stroke-width:2px
```
## 3. Collaboration Workflow for Modifications
This diagram formalizes the process to follow for any modifications initiated by the client on the Base44 platform. The objective is to control the pace of changes and evaluate their impact on our backend before integration.
```mermaid
flowchart TD
A[Client identifies a need
for modification] --> B{Define functionality
and scope};
B --> C{Does the modification impact
only the UI or also
logic/data?};
C -- "UI Only" --> D[Client makes modifications
on Base44];
C -- "Logic/Data" --> E[Team-Client Coordination
to assess impact on GCP backend];
D --> F[Planned export of the
new UI version];
E --> F;
F --> G["Developer runs the automation
1. `make integrate-export`
2. `make prepare-export`"];
G --> H[Development & Testing
- Adapt GCP backend if needed
- Validate locally];
H --> I[✅ Integration complete];
style A fill:#f9f,stroke:#333,stroke-width:2px
style D fill:#f9f,stroke:#333,stroke-width:2px
```