# dmitryi-88/reactbookshop architecture

> Architecture diagram of the GitHub repository dmitryi-88/reactbookshop, 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/dmitryi-88/reactbookshop
- Repository: https://github.com/dmitryi-88/reactbookshop

## Overview

React Book Shop is a browser-based book store. A shopper browses the catalog, searches or filters books, opens a description, and adds books to a persistent cart. From the cart they adjust quantities and submit an order; the app records it, updates stock, and provides an orders view. The README also documents theme persistence, toast notices, and loading/error handling. Paths and wiring for unsampled providers and the orders page are taken only from the tree and README; their internal details are not inferred.

Main entry points: [`src/pages/MainPage/MainPage.jsx`](https://github.com/dmitryi-88/reactbookshop/blob/main/src/pages/MainPage/MainPage.jsx) (Catalog page), [`src/API/UseApi.js`](https://github.com/dmitryi-88/reactbookshop/blob/main/src/API/UseApi.js) (Store API), [`src/pages/Cart/Cart.jsx`](https://github.com/dmitryi-88/reactbookshop/blob/main/src/pages/Cart/Cart.jsx) (Cart page), [`src/App.jsx`](https://github.com/dmitryi-88/reactbookshop/blob/main/src/App.jsx) (Routes and shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["App runtime"]
  node_entry["React entry<br/>[main.jsx]"]
  node_app["Routes and shell<br/>[App.jsx]"]
  node_query["Query provider"]
  node_api["Store API<br/>[UseApi.js]"]
  node_toast["Toast notice<br/>[Toast.jsx]"]
  node_loading["Loading state<br/>[LoadingPage.jsx]"]
  node_error["Error state<br/>[ErrorPage.jsx]"]
end

subgraph group_catalog["Book catalog"]
  node_catalog_page["Catalog page<br/>[MainPage.jsx]"]
  node_search["Title search<br/>[SearchBar.jsx]"]
  node_author_filter["Author filter<br/>[FilterByAuthor.jsx]"]
  node_books["Book cards<br/>[BooksList.jsx]"]
  node_description["Book details"]
end

subgraph group_checkout["Cart and orders"]
  node_cart_page["Cart page<br/>[Cart.jsx]"]
  node_cart_item["Cart item<br/>[CartItem.jsx]"]
  node_orders_page["Orders page<br/>[Orders.jsx]"]
end

subgraph group_state["Shared state"]
  node_cart_provider["Cart provider<br/>[CartProvider.jsx]"]
  node_cart_reducer["Cart reducer<br/>[cartReducer.jsx]"]
  node_storage_hook["Local storage hook"]
  node_theme_provider["Theme provider<br/>[ThemeProvider.jsx]"]
  node_toast_provider["Toast provider<br/>[ToastProvider.jsx]"]
end

node_shopper(("Shopper"))
node_json_server[("JSON Server")]
node_browser_storage[("Browser storage")]

node_shopper -->|"opens shop"| node_entry
node_entry -->|"renders"| node_app
node_entry -->|"provides queries"| node_query
node_entry -->|"provides theme"| node_theme_provider
node_app -->|"routes to"| node_catalog_page
node_app -->|"routes to"| node_cart_page
node_app -->|"routes to"| node_orders_page
node_app -->|"provides cart"| node_cart_provider
node_catalog_page -->|"loads catalog"| node_api
node_api -->|"fetches books"| node_json_server
node_catalog_page -->|"renders"| node_search
node_catalog_page -->|"renders"| node_author_filter
node_catalog_page -->|"renders results"| node_books
node_catalog_page -->|"renders details"| node_description
node_catalog_page -->|"shows loading"| node_loading
node_catalog_page -->|"shows errors"| node_error
node_books -->|"dispatches add"| node_cart_provider
node_books -->|"triggers notice"| node_toast_provider
node_toast_provider -->|"shows notice"| node_toast
node_cart_page -->|"renders items"| node_cart_item
node_cart_page -->|"creates order"| node_api
node_cart_page -->|"updates stock"| node_api
node_api -->|"writes order"| node_json_server
node_api -->|"patches stock"| node_json_server
node_cart_page -->|"clears cart"| node_cart_provider
node_cart_page -->|"navigates after order"| node_orders_page
node_orders_page -->|"loads orders"| node_api
node_api -->|"fetches orders"| node_json_server
node_cart_provider -->|"reduces actions"| node_cart_reducer
node_cart_provider -->|"persists cart"| node_storage_hook
node_storage_hook -->|"reads and writes"| node_browser_storage
node_theme_provider -->|"persists theme"| node_storage_hook

click node_entry "https://github.com/dmitryi-88/reactbookshop/blob/main/src/main.jsx"
click node_app "https://github.com/dmitryi-88/reactbookshop/blob/main/src/App.jsx"
click node_query "https://github.com/dmitryi-88/reactbookshop/blob/main/src/QueryClientProvider.jsx"
click node_catalog_page "https://github.com/dmitryi-88/reactbookshop/blob/main/src/pages/MainPage/MainPage.jsx"
click node_search "https://github.com/dmitryi-88/reactbookshop/blob/main/src/components/SearchBar/SearchBar.jsx"
click node_author_filter "https://github.com/dmitryi-88/reactbookshop/blob/main/src/components/FilterByAuthor/FilterByAuthor.jsx"
click node_books "https://github.com/dmitryi-88/reactbookshop/blob/main/src/components/BooksList/BooksList.jsx"
click node_description "https://github.com/dmitryi-88/reactbookshop/blob/main/src/components/BookDescription/BookDescription.jsx"
click node_api "https://github.com/dmitryi-88/reactbookshop/blob/main/src/API/UseApi.js"
click node_cart_page "https://github.com/dmitryi-88/reactbookshop/blob/main/src/pages/Cart/Cart.jsx"
click node_cart_item "https://github.com/dmitryi-88/reactbookshop/blob/main/src/components/CartItem/CartItem.jsx"
click node_orders_page "https://github.com/dmitryi-88/reactbookshop/blob/main/src/pages/Orders/Orders.jsx"
click node_cart_provider "https://github.com/dmitryi-88/reactbookshop/blob/main/src/context/CartProvider.jsx"
click node_cart_reducer "https://github.com/dmitryi-88/reactbookshop/blob/main/src/reducers/cartReducer.jsx"
click node_storage_hook "https://github.com/dmitryi-88/reactbookshop/blob/main/src/hooks/UseLocalStorage.jsx"
click node_theme_provider "https://github.com/dmitryi-88/reactbookshop/blob/main/src/context/ThemeProvider.jsx"
click node_toast_provider "https://github.com/dmitryi-88/reactbookshop/blob/main/src/context/ToastProvider.jsx"
click node_toast "https://github.com/dmitryi-88/reactbookshop/blob/main/src/components/Toast/Toast.jsx"
click node_loading "https://github.com/dmitryi-88/reactbookshop/blob/main/src/components/LoadingPage/LoadingPage.jsx"
click node_error "https://github.com/dmitryi-88/reactbookshop/blob/main/src/components/ErrorPage/ErrorPage.jsx"

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_query,node_api,node_toast,node_loading,node_error toneBlue
class node_catalog_page,node_search,node_author_filter,node_books,node_description,node_json_server,node_browser_storage toneAmber
class node_cart_page,node_cart_item,node_orders_page toneMint
class node_cart_provider,node_cart_reducer,node_storage_hook,node_theme_provider,node_toast_provider toneRose
class node_shopper toneIndigo
```

## Components

### App runtime

- [React entry](https://github.com/dmitryi-88/reactbookshop/blob/main/src/main.jsx): `src/main.jsx`
- [Routes and shell](https://github.com/dmitryi-88/reactbookshop/blob/main/src/App.jsx): `src/App.jsx`
- [Query provider](https://github.com/dmitryi-88/reactbookshop/blob/main/src/QueryClientProvider.jsx): `src/QueryClientProvider.jsx`
- [Store API](https://github.com/dmitryi-88/reactbookshop/blob/main/src/API/UseApi.js): `src/API/UseApi.js`
- [Toast notice](https://github.com/dmitryi-88/reactbookshop/blob/main/src/components/Toast/Toast.jsx): `src/components/Toast/Toast.jsx`
- [Loading state](https://github.com/dmitryi-88/reactbookshop/blob/main/src/components/LoadingPage/LoadingPage.jsx): `src/components/LoadingPage/LoadingPage.jsx`
- [Error state](https://github.com/dmitryi-88/reactbookshop/blob/main/src/components/ErrorPage/ErrorPage.jsx): `src/components/ErrorPage/ErrorPage.jsx`

### Book catalog

- [Catalog page](https://github.com/dmitryi-88/reactbookshop/blob/main/src/pages/MainPage/MainPage.jsx): `src/pages/MainPage/MainPage.jsx`
- [Title search](https://github.com/dmitryi-88/reactbookshop/blob/main/src/components/SearchBar/SearchBar.jsx): `src/components/SearchBar/SearchBar.jsx`
- [Author filter](https://github.com/dmitryi-88/reactbookshop/blob/main/src/components/FilterByAuthor/FilterByAuthor.jsx): `src/components/FilterByAuthor/FilterByAuthor.jsx`
- [Book cards](https://github.com/dmitryi-88/reactbookshop/blob/main/src/components/BooksList/BooksList.jsx): `src/components/BooksList/BooksList.jsx`
- [Book details](https://github.com/dmitryi-88/reactbookshop/blob/main/src/components/BookDescription/BookDescription.jsx): `src/components/BookDescription/BookDescription.jsx`

### Cart and orders

- [Cart page](https://github.com/dmitryi-88/reactbookshop/blob/main/src/pages/Cart/Cart.jsx): `src/pages/Cart/Cart.jsx`
- [Cart item](https://github.com/dmitryi-88/reactbookshop/blob/main/src/components/CartItem/CartItem.jsx): `src/components/CartItem/CartItem.jsx`
- [Orders page](https://github.com/dmitryi-88/reactbookshop/blob/main/src/pages/Orders/Orders.jsx): `src/pages/Orders/Orders.jsx`

### Shared state

- [Cart provider](https://github.com/dmitryi-88/reactbookshop/blob/main/src/context/CartProvider.jsx): `src/context/CartProvider.jsx`
- [Cart reducer](https://github.com/dmitryi-88/reactbookshop/blob/main/src/reducers/cartReducer.jsx): `src/reducers/cartReducer.jsx`
- [Local storage hook](https://github.com/dmitryi-88/reactbookshop/blob/main/src/hooks/UseLocalStorage.jsx): `src/hooks/UseLocalStorage.jsx`
- [Theme provider](https://github.com/dmitryi-88/reactbookshop/blob/main/src/context/ThemeProvider.jsx): `src/context/ThemeProvider.jsx`
- [Toast provider](https://github.com/dmitryi-88/reactbookshop/blob/main/src/context/ToastProvider.jsx): `src/context/ToastProvider.jsx`

### Other components

- **Shopper**
- **JSON Server**
- **Browser storage**

## Connections

- Shopper → React entry: opens shop
- React entry → Routes and shell: renders
- React entry → Query provider: provides queries
- React entry → Theme provider: provides theme
- Routes and shell → Catalog page: routes to
- Routes and shell → Cart page: routes to
- Routes and shell → Orders page: routes to
- Routes and shell → Cart provider: provides cart
- Catalog page → Store API: loads catalog
- Store API → JSON Server: fetches books
- Catalog page → Title search: renders
- Catalog page → Author filter: renders
- Catalog page → Book cards: renders results
- Catalog page → Book details: renders details
- Catalog page → Loading state: shows loading
- Catalog page → Error state: shows errors
- Book cards → Cart provider: dispatches add
- Book cards → Toast provider: triggers notice
- Toast provider → Toast notice: shows notice
- Cart page → Cart item: renders items
- Cart page → Store API: creates order
- Cart page → Store API: updates stock
- Store API → JSON Server: writes order
- Store API → JSON Server: patches stock
- Cart page → Cart provider: clears cart
- Cart page → Orders page: navigates after order
- Orders page → Store API: loads orders
- Store API → JSON Server: fetches orders
- Cart provider → Cart reducer: reduces actions
- Cart provider → Local storage hook: persists cart
- Local storage hook → Browser storage: reads and writes
- Theme provider → Local storage hook: persists theme