# gartgetget/barangay-forms-automated-system architecture

> Architecture diagram of the GitHub repository gartgetget/barangay-forms-automated-system, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/gartgetget/barangay-forms-automated-system
- Repository: https://github.com/gartgetget/barangay-forms-automated-system

## Overview

This is a barangay document-catalog and request-management application. Residents browse documents, register or sign in, submit multi-step requests with supporting uploads, and track their status; staff and administrators review requests and manage processing. The server exposes the API and persists application records in MongoDB, with SMS as a configurable notification integration. Separate product areas provide fairness scheduling, system/architecture overview, and TAM evaluation. The excerpts show only selected frontend and server behavior, so uncertain endpoint-to-storage links are omitted.

Main entry points: [`src/App.tsx`](https://github.com/gartgetget/barangay-forms-automated-system/blob/main/src/App.tsx) (Application Shell), [`src/api.ts`](https://github.com/gartgetget/barangay-forms-automated-system/blob/main/src/api.ts) (HTTP API Client), [`server.ts`](https://github.com/gartgetget/barangay-forms-automated-system/blob/main/server.ts) (HTTP API Server), [`src/components/AuthModal.tsx`](https://github.com/gartgetget/barangay-forms-automated-system/blob/main/src/components/AuthModal.tsx) (Authentication UI)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Resident and Staff App"]
  node_webapp["Application Shell<br/>[App.tsx]"]
  node_auth["Authentication UI<br/>[AuthModal.tsx]"]
  node_catalog["Document Catalog<br/>[DocumentCard.tsx]"]
  node_requestform["Request Submission"]
  node_myrequests["Resident Requests"]
  node_adminrequests["Request Administration"]
  node_api["HTTP API Client<br/>[api.ts]"]
end

subgraph group_server["Request Service"]
  node_server["HTTP API Server<br/>[server.ts]"]
  node_sms["SMS Provider<br/>[sms.ts]"]
end

subgraph group_data["Persistent Data"]
  node_dbhelper["Database Access<br/>[db.ts]"]
  node_mongodb[("MongoDB")]
end

subgraph group_insights["Planning and Evaluation"]
  node_fairness["Fairness Schedule"]
  node_architecture["System Overview"]
  node_evaluation["TAM Evaluation"]
end

node_resident(("Resident"))
node_staff(("Staff Admin"))
node_smsservice["Semaphore SMS"]

node_resident -->|"uses"| node_webapp
node_staff -->|"uses"| node_webapp
node_webapp -->|"opens"| node_auth
node_webapp -->|"renders"| node_catalog
node_webapp -->|"opens"| node_requestform
node_webapp -->|"opens"| node_myrequests
node_webapp -->|"renders"| node_adminrequests
node_webapp -->|"renders"| node_fairness
node_webapp -->|"renders"| node_architecture
node_webapp -->|"renders"| node_evaluation
node_auth -->|"logs in"| node_api
node_requestform -->|"submits request"| node_api
node_myrequests -->|"manages requests"| node_api
node_adminrequests -->|"manages requests"| node_api
node_architecture -->|"fetches overview"| node_api
node_api -->|"HTTP requests"| node_server
node_server -->|"connects database"| node_dbhelper
node_dbhelper -->|"reads and writes"| node_mongodb
node_server -->|"sends notifications"| node_sms
node_sms -.->|"sends SMS"| node_smsservice

click node_webapp "https://github.com/gartgetget/barangay-forms-automated-system/blob/main/src/App.tsx"
click node_auth "https://github.com/gartgetget/barangay-forms-automated-system/blob/main/src/components/AuthModal.tsx"
click node_catalog "https://github.com/gartgetget/barangay-forms-automated-system/blob/main/src/components/DocumentCard.tsx"
click node_requestform "https://github.com/gartgetget/barangay-forms-automated-system/blob/main/src/components/RequestInputModal.tsx"
click node_myrequests "https://github.com/gartgetget/barangay-forms-automated-system/blob/main/src/components/MyRequestsModal.tsx"
click node_adminrequests "https://github.com/gartgetget/barangay-forms-automated-system/blob/main/src/components/AdminRequestsView.tsx"
click node_api "https://github.com/gartgetget/barangay-forms-automated-system/blob/main/src/api.ts"
click node_server "https://github.com/gartgetget/barangay-forms-automated-system/blob/main/server.ts"
click node_dbhelper "https://github.com/gartgetget/barangay-forms-automated-system/blob/main/server/db.ts"
click node_sms "https://github.com/gartgetget/barangay-forms-automated-system/blob/main/server/sms.ts"
click node_fairness "https://github.com/gartgetget/barangay-forms-automated-system/blob/main/src/components/FairnessScheduleView.tsx"
click node_architecture "https://github.com/gartgetget/barangay-forms-automated-system/blob/main/src/components/AgileArchitectureView.tsx"
click node_evaluation "https://github.com/gartgetget/barangay-forms-automated-system/blob/main/src/components/TamEvaluationView.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_webapp,node_auth,node_catalog,node_requestform,node_myrequests,node_adminrequests,node_api toneBlue
class node_server,node_sms toneAmber
class node_dbhelper,node_mongodb toneMint
class node_fairness,node_architecture,node_evaluation toneRose
class node_resident,node_staff,node_smsservice toneIndigo
```

## Components

### Resident and Staff App

- [Application Shell](https://github.com/gartgetget/barangay-forms-automated-system/blob/main/src/App.tsx): `src/App.tsx`
- [Authentication UI](https://github.com/gartgetget/barangay-forms-automated-system/blob/main/src/components/AuthModal.tsx): `src/components/AuthModal.tsx`
- [Document Catalog](https://github.com/gartgetget/barangay-forms-automated-system/blob/main/src/components/DocumentCard.tsx): `src/components/DocumentCard.tsx`
- [Request Submission](https://github.com/gartgetget/barangay-forms-automated-system/blob/main/src/components/RequestInputModal.tsx): `src/components/RequestInputModal.tsx`
- [Resident Requests](https://github.com/gartgetget/barangay-forms-automated-system/blob/main/src/components/MyRequestsModal.tsx): `src/components/MyRequestsModal.tsx`
- [Request Administration](https://github.com/gartgetget/barangay-forms-automated-system/blob/main/src/components/AdminRequestsView.tsx): `src/components/AdminRequestsView.tsx`
- [HTTP API Client](https://github.com/gartgetget/barangay-forms-automated-system/blob/main/src/api.ts): `src/api.ts`

### Request Service

- [HTTP API Server](https://github.com/gartgetget/barangay-forms-automated-system/blob/main/server.ts): `server.ts`
- [SMS Provider](https://github.com/gartgetget/barangay-forms-automated-system/blob/main/server/sms.ts): `server/sms.ts`

### Persistent Data

- [Database Access](https://github.com/gartgetget/barangay-forms-automated-system/blob/main/server/db.ts): `server/db.ts`
- **MongoDB**

### Planning and Evaluation

- [Fairness Schedule](https://github.com/gartgetget/barangay-forms-automated-system/blob/main/src/components/FairnessScheduleView.tsx): `src/components/FairnessScheduleView.tsx`
- [System Overview](https://github.com/gartgetget/barangay-forms-automated-system/blob/main/src/components/AgileArchitectureView.tsx): `src/components/AgileArchitectureView.tsx`
- [TAM Evaluation](https://github.com/gartgetget/barangay-forms-automated-system/blob/main/src/components/TamEvaluationView.tsx): `src/components/TamEvaluationView.tsx`

### Other components

- **Resident**
- **Staff Admin**
- **Semaphore SMS**

## Connections

- Resident → Application Shell: uses (evidence: `src/App.tsx`)
- Staff Admin → Application Shell: uses (evidence: `src/App.tsx`)
- Application Shell → Authentication UI: opens (evidence: `src/App.tsx`)
- Application Shell → Document Catalog: renders (evidence: `src/App.tsx`)
- Application Shell → Request Submission: opens (evidence: `src/App.tsx`)
- Application Shell → Resident Requests: opens (evidence: `src/App.tsx`)
- Application Shell → Request Administration: renders (evidence: `src/App.tsx`)
- Application Shell → Fairness Schedule: renders (evidence: `src/App.tsx`)
- Application Shell → System Overview: renders (evidence: `src/App.tsx`)
- Application Shell → TAM Evaluation: renders (evidence: `src/App.tsx`)
- Authentication UI → HTTP API Client: logs in (evidence: `src/components/AuthModal.tsx`)
- Request Submission → HTTP API Client: submits request (evidence: `src/components/RequestInputModal.tsx`)
- Resident Requests → HTTP API Client: manages requests (evidence: `src/components/MyRequestsModal.tsx`)
- Request Administration → HTTP API Client: manages requests (evidence: `src/components/AdminRequestsView.tsx`)
- System Overview → HTTP API Client: fetches overview (evidence: `src/components/AgileArchitectureView.tsx`)
- HTTP API Client → HTTP API Server: HTTP requests (evidence: `src/api.ts`)
- HTTP API Server → Database Access: connects database (evidence: `server.ts`)
- Database Access → MongoDB: reads and writes (evidence: `server/db.ts`)
- HTTP API Server → SMS Provider: sends notifications (evidence: `server.ts`)
- SMS Provider → Semaphore SMS: sends SMS