# eazybytes/fullstack-react-springboot architecture
> Architecture diagram of the GitHub repository eazybytes/fullstack-react-springboot, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.
- Interactive diagram: https://gitdiagram.com/eazybytes/fullstack-react-springboot
- Repository: https://github.com/eazybytes/fullstack-react-springboot
## Overview
EazyStore is a React storefront backed by a Spring Boot service, with catalog browsing, account access, cart and checkout, customer profile/order views, contact messaging, and administration. The shown router mounts the application, assigns loaders/actions to several routes, and protects checkout, profile, order, and admin routes. Backend implementation paths are visible in the tree, but their request flow was not excerpted; those cross-layer connections are therefore omitted rather than asserted.
Main entry points: [`section_23/eazystore-ui/src/main.jsx`](https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore-ui/src/main.jsx) (App Router), [`section_23/eazystore-ui/src/api/apiClient.js`](https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore-ui/src/api/apiClient.js) (API Client), [`section_23/eazystore/src/main/java/com/eazybytes/eazystore/controller/AuthController.java`](https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore/src/main/java/com/eazybytes/eazystore/controller/AuthController.java) (Auth Controller), [`section_23/eazystore-ui/src/components/ProductListings.jsx`](https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore-ui/src/components/ProductListings.jsx) (Catalog Views)
## Diagram (Mermaid)
```mermaid
flowchart TD
subgraph group_web["Storefront"]
node_router["App Router
[main.jsx]"]
node_catalog["Catalog Views"]
node_product["Product Detail
[ProductDetail.jsx]"]
node_cartui["Cart and Checkout
[CheckoutForm.jsx]"]
node_accountui["Account Views
[Profile.jsx]"]
node_adminui["Admin Views
[AdminOrders.jsx]"]
node_contactui["Contact Form
[Contact.jsx]"]
end
subgraph group_state["Client State"]
node_cartstate["Cart State
[cart-context.jsx]"]
node_authstate["Auth State
[auth-context.jsx]"]
node_api["API Client
[apiClient.js]"]
end
subgraph group_server["Backend"]
node_productapi["Product API"]
node_productservice["Product Service"]
node_productstore[("Product Store")]
node_contactapi["Contact API"]
node_contactstore[("Contact Store")]
end
subgraph group_identity["Identity"]
node_authapi["Auth Controller"]
node_jwt["JWT Utility
[JwtUtil.java]"]
node_customers[("Customer Data
[Customer.java]")]
node_roles[("Role Data
[Role.java]")]
end
node_shopper(("Shopper"))
node_shopper -->|"uses"| node_router
node_router -->|"routes to"| node_catalog
node_router -->|"routes to"| node_product
node_router -->|"routes to"| node_cartui
node_router -->|"routes to"| node_accountui
node_router -->|"routes to"| node_adminui
node_router -->|"routes to"| node_contactui
node_router -->|"provides"| node_authstate
node_router -->|"provides"| node_cartstate
node_router -.->|"uses"| node_api
node_catalog -.->|"requests products"| node_api
node_product -.->|"requests product"| node_api
node_cartui -.->|"uses"| node_cartstate
node_accountui -.->|"uses"| node_authstate
node_adminui -.->|"requests admin data"| node_api
node_contactui -.->|"submits message"| node_api
node_api -.->|"HTTP requests"| node_productapi
node_api -.->|"HTTP requests"| node_contactapi
node_productapi -.->|"delegates"| node_productservice
node_productservice -.->|"reads products"| node_productstore
node_contactapi -.->|"stores messages"| node_contactstore
node_api -.->|"HTTP requests"| node_authapi
node_authapi -.->|"creates tokens"| node_jwt
node_authapi -.->|"uses customer data"| node_customers
node_authapi -.->|"uses roles"| node_roles
click node_router "https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore-ui/src/main.jsx"
click node_catalog "https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore-ui/src/components/ProductListings.jsx"
click node_product "https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore-ui/src/components/ProductDetail.jsx"
click node_cartui "https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore-ui/src/components/CheckoutForm.jsx"
click node_accountui "https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore-ui/src/components/Profile.jsx"
click node_adminui "https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore-ui/src/components/admin/AdminOrders.jsx"
click node_contactui "https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore-ui/src/components/Contact.jsx"
click node_cartstate "https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore-ui/src/store/cart-context.jsx"
click node_authstate "https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore-ui/src/store/auth-context.jsx"
click node_api "https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore-ui/src/api/apiClient.js"
click node_productapi "https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_14/eazystore/src/main/java/com/eazybytes/eazystore/controller/ProductController.java"
click node_productservice "https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_14/eazystore/src/main/java/com/eazybytes/eazystore/service/impl/ProductServiceImpl.java"
click node_productstore "https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_14/eazystore/src/main/java/com/eazybytes/eazystore/repository/ProductRepository.java"
click node_contactapi "https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_14/eazystore/src/main/java/com/eazybytes/eazystore/controller/ContactController.java"
click node_contactstore "https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_14/eazystore/src/main/java/com/eazybytes/eazystore/repository/ContactRepository.java"
click node_authapi "https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore/src/main/java/com/eazybytes/eazystore/controller/AuthController.java"
click node_jwt "https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_13/eazystore/src/main/java/com/eazybytes/eazystore/util/JwtUtil.java"
click node_customers "https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_14/eazystore/src/main/java/com/eazybytes/eazystore/entity/Customer.java"
click node_roles "https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_15/eazystore/src/main/java/com/eazybytes/eazystore/entity/Role.java"
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_router,node_catalog,node_product,node_cartui,node_accountui,node_adminui,node_contactui toneBlue
class node_cartstate,node_authstate,node_api toneAmber
class node_productapi,node_productservice,node_productstore,node_contactapi,node_contactstore toneMint
class node_authapi,node_jwt,node_customers,node_roles toneRose
class node_shopper toneIndigo
```
## Components
### Storefront
- [App Router](https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore-ui/src/main.jsx): `section_23/eazystore-ui/src/main.jsx`
- [Catalog Views](https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore-ui/src/components/ProductListings.jsx): `section_23/eazystore-ui/src/components/ProductListings.jsx`
- [Product Detail](https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore-ui/src/components/ProductDetail.jsx): `section_23/eazystore-ui/src/components/ProductDetail.jsx`
- [Cart and Checkout](https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore-ui/src/components/CheckoutForm.jsx): `section_23/eazystore-ui/src/components/CheckoutForm.jsx`
- [Account Views](https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore-ui/src/components/Profile.jsx): `section_23/eazystore-ui/src/components/Profile.jsx`
- [Admin Views](https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore-ui/src/components/admin/AdminOrders.jsx): `section_23/eazystore-ui/src/components/admin/AdminOrders.jsx`
- [Contact Form](https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore-ui/src/components/Contact.jsx): `section_23/eazystore-ui/src/components/Contact.jsx`
### Client State
- [Cart State](https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore-ui/src/store/cart-context.jsx): `section_23/eazystore-ui/src/store/cart-context.jsx`
- [Auth State](https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore-ui/src/store/auth-context.jsx): `section_23/eazystore-ui/src/store/auth-context.jsx`
- [API Client](https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore-ui/src/api/apiClient.js): `section_23/eazystore-ui/src/api/apiClient.js`
### Backend
- [Product API](https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_14/eazystore/src/main/java/com/eazybytes/eazystore/controller/ProductController.java): `section_14/eazystore/src/main/java/com/eazybytes/eazystore/controller/ProductController.java`
- [Product Service](https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_14/eazystore/src/main/java/com/eazybytes/eazystore/service/impl/ProductServiceImpl.java): `section_14/eazystore/src/main/java/com/eazybytes/eazystore/service/impl/ProductServiceImpl.java`
- [Product Store](https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_14/eazystore/src/main/java/com/eazybytes/eazystore/repository/ProductRepository.java): `section_14/eazystore/src/main/java/com/eazybytes/eazystore/repository/ProductRepository.java`
- [Contact API](https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_14/eazystore/src/main/java/com/eazybytes/eazystore/controller/ContactController.java): `section_14/eazystore/src/main/java/com/eazybytes/eazystore/controller/ContactController.java`
- [Contact Store](https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_14/eazystore/src/main/java/com/eazybytes/eazystore/repository/ContactRepository.java): `section_14/eazystore/src/main/java/com/eazybytes/eazystore/repository/ContactRepository.java`
### Identity
- [Auth Controller](https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_23/eazystore/src/main/java/com/eazybytes/eazystore/controller/AuthController.java): `section_23/eazystore/src/main/java/com/eazybytes/eazystore/controller/AuthController.java`
- [JWT Utility](https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_13/eazystore/src/main/java/com/eazybytes/eazystore/util/JwtUtil.java): `section_13/eazystore/src/main/java/com/eazybytes/eazystore/util/JwtUtil.java`
- [Customer Data](https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_14/eazystore/src/main/java/com/eazybytes/eazystore/entity/Customer.java): `section_14/eazystore/src/main/java/com/eazybytes/eazystore/entity/Customer.java`
- [Role Data](https://github.com/eazybytes/fullstack-react-springboot/blob/main/section_15/eazystore/src/main/java/com/eazybytes/eazystore/entity/Role.java): `section_15/eazystore/src/main/java/com/eazybytes/eazystore/entity/Role.java`
### Other components
- **Shopper**
## Connections
- Shopper → App Router: uses
- App Router → Catalog Views: routes to (evidence: `section_23/eazystore-ui/src/main.jsx`)
- App Router → Product Detail: routes to (evidence: `section_23/eazystore-ui/src/main.jsx`)
- App Router → Cart and Checkout: routes to (evidence: `section_23/eazystore-ui/src/main.jsx`)
- App Router → Account Views: routes to (evidence: `section_23/eazystore-ui/src/main.jsx`)
- App Router → Admin Views: routes to (evidence: `section_23/eazystore-ui/src/main.jsx`)
- App Router → Contact Form: routes to (evidence: `section_23/eazystore-ui/src/main.jsx`)
- App Router → Auth State: provides (evidence: `section_23/eazystore-ui/src/main.jsx`)
- App Router → Cart State: provides (evidence: `section_23/eazystore-ui/src/main.jsx`)
- App Router → API Client: uses
- Catalog Views → API Client: requests products
- Product Detail → API Client: requests product
- Cart and Checkout → Cart State: uses
- Account Views → Auth State: uses
- Admin Views → API Client: requests admin data
- Contact Form → API Client: submits message
- API Client → Product API: HTTP requests
- API Client → Contact API: HTTP requests
- Product API → Product Service: delegates
- Product Service → Product Store: reads products
- Contact API → Contact Store: stores messages
- API Client → Auth Controller: HTTP requests
- Auth Controller → JWT Utility: creates tokens (evidence: `section_23/eazystore/src/main/java/com/eazybytes/eazystore/controller/AuthController.java`)
- Auth Controller → Customer Data: uses customer data (evidence: `section_23/eazystore/src/main/java/com/eazybytes/eazystore/controller/AuthController.java`)
- Auth Controller → Role Data: uses roles (evidence: `section_23/eazystore/src/main/java/com/eazybytes/eazystore/controller/AuthController.java`)