Create System Architecture Diagram for Easier Visualization

As the project grows, it’s becoming harder to quickly understand and reason about how all parts of the system fit together. We need a **clear, high-level architecture diagram** to visualize:

* Backend services and their responsibilities
* Cloud infrastructure (AWS services, auth, storage, etc.)
* Database(s) and data flow
* Frontend and how it communicates with the backend
* External services or integrations (if any)

This diagram will serve as:

* A **mental model** for development
* A **reference for onboarding (future contributors / reviewers)**
* Supporting documentation for design decisions and scaling

---

### Scope / Requirements

The diagram should include:

#### Frontend

* Web / client app
* API communication flow (REST / auth)
* Environment configuration (dev vs prod if applicable)

#### Backend

* FastAPI application structure
* API layer
* Business logic layer
* Database access layer
* Authentication / authorization flow

#### Cloud / Infrastructure

* AWS services used (e.g., Cognito, S3, EC2/Lightsail, RDS, etc.)
* Environment variables & secrets handling
* Deployment boundary

#### Database

* Type of database
* Relationship to backend services
* Read/write flow

---

### Acceptance Criteria

* [ ] Diagram clearly shows **frontend → backend → database flow**
* [ ] Cloud services are clearly labeled
* [ ] Authentication flow is understandable at a glance
* [ ] Diagram is readable even for someone new to the project
* [ ] Diagram is stored in the repository (e.g., `/docs/architecture/`)

---

### Output Format (choose one or more)

* PNG / SVG (draw.io, Excalidraw, Lucidchart)
* Mermaid diagram (for Markdown docs)
* Figma or similar (exported)

---

### Notes

This is a **documentation-first improvement** to reduce cognitive load and prevent architectural confusion as the project scales.