How nguyenlehoaitam/react-hompage works
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: AppDbContext.cs EF data context · App.jsx Routes and nav · Program.cs ASP.NET startup · api.js HTTP client
Components 17
React storefront
- React entry
src/main.jsx - Routes and nav
src/App.jsx - Storefront home
src/pages/Home.jsx - About page
src/pages/About.jsx - Contact page
src/pages/Contact.jsx - Product service
src/services/productService.js - Category service
src/services/categoryService.js - HTTP client
src/services/api.js
Backend API
- ASP.NET startup
backend/Program.cs - Product endpoints
backend/Controllers/ProductsController.cs - Category endpoints
backend/Controllers/CategoriesController.cs - Initial seed
backend/Data/DbInitializer.cs
Product data
- EF data context
backend/Data/AppDbContext.cs - Product model
backend/Models/Product.cs - Category model
backend/Models/Category.cs - SQLite database
backend/database.sqlite
Other components
- Visitor
Connections 18
- 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