# nguyenlehoaitam/react-hompage architecture

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

- Interactive diagram: https://gitdiagram.com/nguyenlehoaitam/react-hompage
- Repository: https://github.com/nguyenlehoaitam/react-hompage

## Overview

This is a React storefront for functional foods backed by an ASP.NET Core API. The principal flow is browser navigation to Home, product-service retrieval, HTTP API handling, and SQLite-backed product data returned for display. Category CRUD is also implemented in the backend and exposed through a frontend service, though its UI consumer is not established by the sampled source. About and Contact are routed pages; their behavior was not sampled.

Main entry points: [`backend/Data/AppDbContext.cs`](https://github.com/nguyenlehoaitam/react-hompage/blob/main/backend/Data/AppDbContext.cs) (EF data context), [`src/App.jsx`](https://github.com/nguyenlehoaitam/react-hompage/blob/main/src/App.jsx) (Routes and nav), [`backend/Program.cs`](https://github.com/nguyenlehoaitam/react-hompage/blob/main/backend/Program.cs) (ASP.NET startup), [`src/services/api.js`](https://github.com/nguyenlehoaitam/react-hompage/blob/main/src/services/api.js) (HTTP client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["React storefront"]
  node_entry["React entry<br/>[main.jsx]"]
  node_app["Routes and nav<br/>[App.jsx]"]
  node_home["Storefront home<br/>[Home.jsx]"]
  node_about["About page<br/>[About.jsx]"]
  node_contact["Contact page<br/>[Contact.jsx]"]
  node_productsvc["Product service<br/>[productService.js]"]
  node_categorysvc["Category service<br/>[categoryService.js]"]
  node_httpclient["HTTP client<br/>[api.js]"]
end

subgraph group_api["Backend API"]
  node_server["ASP.NET startup<br/>[Program.cs]"]
  node_productctl["Product endpoints"]
  node_categoryctl["Category endpoints"]
  node_seed["Initial seed<br/>[DbInitializer.cs]"]
end

subgraph group_data["Product data"]
  node_context["EF data context<br/>[AppDbContext.cs]"]
  node_productmodel["Product model<br/>[Product.cs]"]
  node_categorymodel["Category model<br/>[Category.cs]"]
  node_sqlite[("SQLite database<br/>[database.sqlite]")]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"routes"| node_home
node_app -->|"routes"| node_about
node_app -->|"routes"| node_contact
node_home -->|"requests products"| node_productsvc
node_productsvc -->|"calls"| node_httpclient
node_categorysvc -->|"calls"| node_httpclient
node_httpclient -->|"HTTP requests"| node_server
node_server -->|"maps routes"| node_productctl
node_server -->|"maps routes"| node_categoryctl
node_server -->|"runs seed"| node_seed
node_productctl -->|"queries and saves"| node_context
node_categoryctl -->|"queries and saves"| node_context
node_seed -->|"seeds data"| node_context
node_context -->|"reads and writes"| node_sqlite
node_context -->|"maps"| node_productmodel
node_context -->|"maps"| node_categorymodel

click node_entry "https://github.com/nguyenlehoaitam/react-hompage/blob/main/src/main.jsx"
click node_app "https://github.com/nguyenlehoaitam/react-hompage/blob/main/src/App.jsx"
click node_home "https://github.com/nguyenlehoaitam/react-hompage/blob/main/src/pages/Home.jsx"
click node_about "https://github.com/nguyenlehoaitam/react-hompage/blob/main/src/pages/About.jsx"
click node_contact "https://github.com/nguyenlehoaitam/react-hompage/blob/main/src/pages/Contact.jsx"
click node_productsvc "https://github.com/nguyenlehoaitam/react-hompage/blob/main/src/services/productService.js"
click node_categorysvc "https://github.com/nguyenlehoaitam/react-hompage/blob/main/src/services/categoryService.js"
click node_httpclient "https://github.com/nguyenlehoaitam/react-hompage/blob/main/src/services/api.js"
click node_server "https://github.com/nguyenlehoaitam/react-hompage/blob/main/backend/Program.cs"
click node_productctl "https://github.com/nguyenlehoaitam/react-hompage/blob/main/backend/Controllers/ProductsController.cs"
click node_categoryctl "https://github.com/nguyenlehoaitam/react-hompage/blob/main/backend/Controllers/CategoriesController.cs"
click node_seed "https://github.com/nguyenlehoaitam/react-hompage/blob/main/backend/Data/DbInitializer.cs"
click node_context "https://github.com/nguyenlehoaitam/react-hompage/blob/main/backend/Data/AppDbContext.cs"
click node_productmodel "https://github.com/nguyenlehoaitam/react-hompage/blob/main/backend/Models/Product.cs"
click node_categorymodel "https://github.com/nguyenlehoaitam/react-hompage/blob/main/backend/Models/Category.cs"
click node_sqlite "https://github.com/nguyenlehoaitam/react-hompage/blob/main/backend/database.sqlite"

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_entry,node_app,node_home,node_about,node_contact,node_productsvc,node_categorysvc,node_httpclient toneBlue
class node_server,node_productctl,node_categoryctl,node_seed toneAmber
class node_context,node_productmodel,node_categorymodel,node_sqlite toneMint
class node_visitor toneIndigo
```

## Components

### React storefront

- [React entry](https://github.com/nguyenlehoaitam/react-hompage/blob/main/src/main.jsx): `src/main.jsx`
- [Routes and nav](https://github.com/nguyenlehoaitam/react-hompage/blob/main/src/App.jsx): `src/App.jsx`
- [Storefront home](https://github.com/nguyenlehoaitam/react-hompage/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [About page](https://github.com/nguyenlehoaitam/react-hompage/blob/main/src/pages/About.jsx): `src/pages/About.jsx`
- [Contact page](https://github.com/nguyenlehoaitam/react-hompage/blob/main/src/pages/Contact.jsx): `src/pages/Contact.jsx`
- [Product service](https://github.com/nguyenlehoaitam/react-hompage/blob/main/src/services/productService.js): `src/services/productService.js`
- [Category service](https://github.com/nguyenlehoaitam/react-hompage/blob/main/src/services/categoryService.js): `src/services/categoryService.js`
- [HTTP client](https://github.com/nguyenlehoaitam/react-hompage/blob/main/src/services/api.js): `src/services/api.js`

### Backend API

- [ASP.NET startup](https://github.com/nguyenlehoaitam/react-hompage/blob/main/backend/Program.cs): `backend/Program.cs`
- [Product endpoints](https://github.com/nguyenlehoaitam/react-hompage/blob/main/backend/Controllers/ProductsController.cs): `backend/Controllers/ProductsController.cs`
- [Category endpoints](https://github.com/nguyenlehoaitam/react-hompage/blob/main/backend/Controllers/CategoriesController.cs): `backend/Controllers/CategoriesController.cs`
- [Initial seed](https://github.com/nguyenlehoaitam/react-hompage/blob/main/backend/Data/DbInitializer.cs): `backend/Data/DbInitializer.cs`

### Product data

- [EF data context](https://github.com/nguyenlehoaitam/react-hompage/blob/main/backend/Data/AppDbContext.cs): `backend/Data/AppDbContext.cs`
- [Product model](https://github.com/nguyenlehoaitam/react-hompage/blob/main/backend/Models/Product.cs): `backend/Models/Product.cs`
- [Category model](https://github.com/nguyenlehoaitam/react-hompage/blob/main/backend/Models/Category.cs): `backend/Models/Category.cs`
- [SQLite database](https://github.com/nguyenlehoaitam/react-hompage/blob/main/backend/database.sqlite): `backend/database.sqlite`

### Other components

- **Visitor**

## Connections

- Visitor → React entry: opens site
- React entry → Routes and nav: renders
- Routes and nav → Storefront home: routes
- Routes and nav → About page: routes
- Routes and nav → Contact page: routes
- Storefront home → Product service: requests products
- Product service → HTTP client: calls
- Category service → HTTP client: calls
- HTTP client → ASP.NET startup: HTTP requests
- ASP.NET startup → Product endpoints: maps routes
- ASP.NET startup → Category endpoints: maps routes
- ASP.NET startup → Initial seed: runs seed
- Product endpoints → EF data context: queries and saves
- Category endpoints → EF data context: queries and saves
- Initial seed → EF data context: seeds data
- EF data context → SQLite database: reads and writes
- EF data context → Product model: maps
- EF data context → Category model: maps