# e1n7/sari-sari-store architecture

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

- Interactive diagram: https://gitdiagram.com/e1n7/sari-sari-store
- Repository: https://github.com/e1n7/sari-sari-store

## Overview

This is a small React inventory-management app for a sari-sari store. A user browses and filters products, adds or edits product details, deletes products, and adjusts stock; the app loads and persists product data through Supabase. The sampled source confirms product loading, insertion, and deletion, but excerpts omit some update and stock-adjustment wiring, so those links are not expanded.

Main entry points: [`src/App.jsx`](https://github.com/e1n7/sari-sari-store/blob/main/src/App.jsx) (Inventory browsing and actions), [`src/supabase.js`](https://github.com/e1n7/sari-sari-store/blob/main/src/supabase.js) (Supabase client), [`src/main.jsx`](https://github.com/e1n7/sari-sari-store/blob/main/src/main.jsx) (React bootstrap)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Application entry"]
  node_main["React bootstrap<br/>[main.jsx]"]
  node_app["App state and loading<br/>[App.jsx]"]
end

subgraph group_inventory["Inventory experience"]
  node_inventory_view["Inventory browsing and actions<br/>[App.jsx]"]
  node_product_form["Product form modal<br/>[App.jsx]"]
end

subgraph group_data["Data access"]
  node_supabase_client["Supabase client<br/>[supabase.js]"]
  node_products_store[("Products table")]
end

node_user(("Store user"))
node_supabase_service["Supabase service"]

node_main -->|"renders"| node_app
node_user -->|"manages inventory"| node_inventory_view
node_app -->|"renders"| node_inventory_view
node_inventory_view -->|"opens form"| node_product_form
node_app -->|"loads products"| node_supabase_client
node_inventory_view -->|"inserts, deletes"| node_supabase_client
node_supabase_client -->|"queries"| node_supabase_service
node_supabase_service -->|"reads and writes"| node_products_store

click node_main "https://github.com/e1n7/sari-sari-store/blob/main/src/main.jsx"
click node_app "https://github.com/e1n7/sari-sari-store/blob/main/src/App.jsx"
click node_inventory_view "https://github.com/e1n7/sari-sari-store/blob/main/src/App.jsx"
click node_product_form "https://github.com/e1n7/sari-sari-store/blob/main/src/App.jsx"
click node_supabase_client "https://github.com/e1n7/sari-sari-store/blob/main/src/supabase.js"

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_main,node_app,node_user toneBlue
class node_inventory_view,node_product_form toneAmber
class node_supabase_client,node_products_store toneMint
class node_supabase_service toneIndigo
```

## Components

### Application entry

- [React bootstrap](https://github.com/e1n7/sari-sari-store/blob/main/src/main.jsx): `src/main.jsx`
- [App state and loading](https://github.com/e1n7/sari-sari-store/blob/main/src/App.jsx): `src/App.jsx`

### Inventory experience

- [Inventory browsing and actions](https://github.com/e1n7/sari-sari-store/blob/main/src/App.jsx): `src/App.jsx`
- [Product form modal](https://github.com/e1n7/sari-sari-store/blob/main/src/App.jsx): `src/App.jsx`

### Data access

- [Supabase client](https://github.com/e1n7/sari-sari-store/blob/main/src/supabase.js): `src/supabase.js`
- **Products table**

### Other components

- **Store user**
- **Supabase service**

## Connections

- React bootstrap → App state and loading: renders
- Store user → Inventory browsing and actions: manages inventory
- App state and loading → Inventory browsing and actions: renders
- Inventory browsing and actions → Product form modal: opens form
- App state and loading → Supabase client: loads products
- Inventory browsing and actions → Supabase client: inserts, deletes
- Supabase client → Supabase service: queries
- Supabase service → Products table: reads and writes