# ganapathi-139/sgs---creations architecture

> Architecture diagram of the GitHub repository ganapathi-139/sgs---creations, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ganapathi-139/sgs---creations
- Repository: https://github.com/ganapathi-139/sgs---creations

## Overview

SGS Creations is a web design studio platform: visitors explore portfolio work and service plans, submit consultation requests, and registered clients track projects; administrators manage clients, milestones, and requests. The documented runtime separates a React SPA from an Express REST API, with Vercel routing and Supabase persistence; SMTP supports verification email. The repository contains architecture documentation only, not implementation source, so feature-to-endpoint wiring and internal calls cannot be confirmed. Node paths point to the documentation describing each component.

Main entry points: [`ARCHITECTURE.md`](https://github.com/ganapathi-139/sgs---creations/blob/main/ARCHITECTURE.md) (React SPA), [`SECURITY-ARCHITECTURE.md`](https://github.com/ganapathi-139/sgs---creations/blob/main/SECURITY-ARCHITECTURE.md) (API security controls), [`README.md`](https://github.com/ganapathi-139/sgs---creations/blob/main/README.md) (Portfolio showcase)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Client experience"]
  node_spa["React SPA<br/>[ARCHITECTURE.md]"]
end

subgraph group_api["API and security"]
  node_express["Express REST API<br/>[ARCHITECTURE.md]"]
  node_security["API security controls"]
end

subgraph group_operations["Hosting and services"]
  node_edge["Vercel Edge<br/>[ARCHITECTURE.md]"]
  node_function["Serverless function<br/>[ARCHITECTURE.md]"]
  node_postgres[("Supabase PostgreSQL<br/>[ARCHITECTURE.md]")]
  node_smtp["SMTP email service<br/>[ARCHITECTURE.md]"]
end

subgraph group_workflows["Studio workflows"]
  node_showcase["Portfolio showcase<br/>[README.md]"]
  node_plans["Service plans<br/>[README.md]"]
  node_consultation["Design consultation<br/>[README.md]"]
  node_clientportal["Client project portal<br/>[README.md]"]
  node_admin["Admin management<br/>[README.md]"]
end

node_visitor(("Visitor / client"))

node_visitor -->|"requests site"| node_edge
node_edge -->|"serves SPA"| node_spa
node_visitor -->|"uses"| node_spa
node_spa -->|"presents work"| node_showcase
node_spa -->|"presents plans"| node_plans
node_spa -->|"offers intake"| node_consultation
node_spa -->|"offers tracking"| node_clientportal
node_spa -->|"offers management"| node_admin
node_edge -->|"routes /api"| node_function
node_function -->|"wraps API"| node_express
node_express -->|"applies controls"| node_security
node_express -->|"queries data"| node_postgres
node_express -->|"sends verification"| node_smtp

click node_spa "https://github.com/ganapathi-139/sgs---creations/blob/main/ARCHITECTURE.md"
click node_showcase "https://github.com/ganapathi-139/sgs---creations/blob/main/README.md"
click node_plans "https://github.com/ganapathi-139/sgs---creations/blob/main/README.md"
click node_consultation "https://github.com/ganapathi-139/sgs---creations/blob/main/README.md"
click node_clientportal "https://github.com/ganapathi-139/sgs---creations/blob/main/README.md"
click node_admin "https://github.com/ganapathi-139/sgs---creations/blob/main/README.md"
click node_edge "https://github.com/ganapathi-139/sgs---creations/blob/main/ARCHITECTURE.md"
click node_function "https://github.com/ganapathi-139/sgs---creations/blob/main/ARCHITECTURE.md"
click node_express "https://github.com/ganapathi-139/sgs---creations/blob/main/ARCHITECTURE.md"
click node_security "https://github.com/ganapathi-139/sgs---creations/blob/main/SECURITY-ARCHITECTURE.md"
click node_postgres "https://github.com/ganapathi-139/sgs---creations/blob/main/ARCHITECTURE.md"
click node_smtp "https://github.com/ganapathi-139/sgs---creations/blob/main/ARCHITECTURE.md"

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_spa,node_visitor toneBlue
class node_express,node_security toneAmber
class node_edge,node_function,node_postgres,node_smtp toneMint
class node_showcase,node_plans,node_consultation,node_clientportal,node_admin toneRose
```

## Components

### Client experience

- [React SPA](https://github.com/ganapathi-139/sgs---creations/blob/main/ARCHITECTURE.md): `ARCHITECTURE.md`

### API and security

- [Express REST API](https://github.com/ganapathi-139/sgs---creations/blob/main/ARCHITECTURE.md): `ARCHITECTURE.md`
- [API security controls](https://github.com/ganapathi-139/sgs---creations/blob/main/SECURITY-ARCHITECTURE.md): `SECURITY-ARCHITECTURE.md`

### Hosting and services

- [Vercel Edge](https://github.com/ganapathi-139/sgs---creations/blob/main/ARCHITECTURE.md): `ARCHITECTURE.md`
- [Serverless function](https://github.com/ganapathi-139/sgs---creations/blob/main/ARCHITECTURE.md): `ARCHITECTURE.md`
- [Supabase PostgreSQL](https://github.com/ganapathi-139/sgs---creations/blob/main/ARCHITECTURE.md): `ARCHITECTURE.md`
- [SMTP email service](https://github.com/ganapathi-139/sgs---creations/blob/main/ARCHITECTURE.md): `ARCHITECTURE.md`

### Studio workflows

- [Portfolio showcase](https://github.com/ganapathi-139/sgs---creations/blob/main/README.md): `README.md`
- [Service plans](https://github.com/ganapathi-139/sgs---creations/blob/main/README.md): `README.md`
- [Design consultation](https://github.com/ganapathi-139/sgs---creations/blob/main/README.md): `README.md`
- [Client project portal](https://github.com/ganapathi-139/sgs---creations/blob/main/README.md): `README.md`
- [Admin management](https://github.com/ganapathi-139/sgs---creations/blob/main/README.md): `README.md`

### Other components

- **Visitor / client**

## Connections

- Visitor / client → Vercel Edge: requests site
- Vercel Edge → React SPA: serves SPA
- Visitor / client → React SPA: uses
- React SPA → Portfolio showcase: presents work
- React SPA → Service plans: presents plans
- React SPA → Design consultation: offers intake
- React SPA → Client project portal: offers tracking
- React SPA → Admin management: offers management
- Vercel Edge → Serverless function: routes /api
- Serverless function → Express REST API: wraps API
- Express REST API → API security controls: applies controls
- Express REST API → Supabase PostgreSQL: queries data
- Express REST API → SMTP email service: sends verification