# balagrishnan/react-posts-crud architecture

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

- Interactive diagram: https://gitdiagram.com/balagrishnan/react-posts-crud
- Repository: https://github.com/balagrishnan/react-posts-crud

## Overview

#### Purpose and Runtime

This is a Vite-served React single-page CRUD learning app. It manages posts against JSONPlaceholder and displays products from a separately running local backend. The browser application is bootstrapped at `src/main.jsx`, with route composition in `src/App.jsx`.

#### Application Shell and Navigation

`src/App.jsx` defines the route-level application: Home (`/`), Posts (`/posts`), and Products (`/products`). Shared layout/navigation is implemented by `src/components/Navbar.jsx`, `src/components/Header.jsx`, and `src/components/Footer.jsx`; route pages are `src/pages/Home.jsx`, `src/pages/PostsPage.jsx`, and `src/pages/ProductsPage.jsx`.

#### Posts Domain: API to Session State

Posts are fetched and mutated through `src/services/postApi.js`, which calls the JSONPlaceholder REST API. `src/context/PostsContext.jsx` is the asynchronous boundary: it loads posts on provider initialization and exposes create, update, and delete actions to consumers. Because JSONPlaceholder mutations are nonpersistent, successful writes must be reflected in client state for the current browser session.

#### Posts State Management

`src/reducers/postsReducer.js` owns deterministic transitions for loading, success/error, and CRUD changes. `src/context/PostsContext.jsx` combines that reducer with React context, while `src/hooks/usePosts.js` provides the domain-facing consumer API and isolates components from direct context access.

#### Posts UI Flow

`src/pages/PostsPage.jsx` composes the posts feature. `src/components/PostForm.jsx` owns controlled form/edit-mode behavior and invokes context actions; `src/components/PostList.jsx` renders state-dependent list views; `src/components/PostItem.jsx` provides per-post edit/delete interactions. User actions flow component → posts context async action → API service → reducer → rerendered list/form.

#### Products Read Flow

Products are a separate read-only domain. `src/services/productApi.js` requests the local products endpoint, and `src/context/ProductsContext.jsx` manages request lifecycle, stored products, failures, and retry behavior through `src/reducers/productsReducer.js`. Consumers use `src/hooks/useProducts.js`; `src/pages/ProductsPage.jsx` renders results through `src/components/ProductList.jsx` and `src/components/ProductItem.jsx`.

#### Infrastructure and Delivery Boundaries

The frontend runs through Vite (`vite.config.js`) in development and is packaged for static serving. Production container/static-server assets are `Dockerfile` and `nginx.conf`; CI references include `Jenkinsfile` and `.github/workflows/playwright.yml`. External runtime dependencies are JSONPlaceholder for posts and a local products API expected by `src/services/productApi.js`; the README contains a port discrepancy (endpoint states `8081`, startup guidance states `8080`) that should be resolved before integration.

Main entry points: [`src/App.jsx`](https://github.com/balagrishnan/react-posts-crud/blob/main/src/App.jsx) (Routes and shell), [`src/context/PostsContext.jsx`](https://github.com/balagrishnan/react-posts-crud/blob/main/src/context/PostsContext.jsx) (Posts async state), [`src/pages/PostsPage.jsx`](https://github.com/balagrishnan/react-posts-crud/blob/main/src/pages/PostsPage.jsx) (Posts page), [`src/pages/ProductsPage.jsx`](https://github.com/balagrishnan/react-posts-crud/blob/main/src/pages/ProductsPage.jsx) (Products page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["React application"]
  node_vite{{"Vite dev server<br/>development runtime<br/>[vite.config.js]"}}
  node_main["Browser bootstrap<br/>React entry<br/>[main.jsx]"]
  node_app_shell["Routes and shell<br/>route composition<br/>[App.jsx]"]
  node_shared_layout["Shared navigation layout<br/>UI shell<br/>[Navbar.jsx]"]
  node_home["Home page<br/>route page<br/>[Home.jsx]"]
end

subgraph group_posts["Posts domain"]
  node_posts_page["Posts page<br/>route page<br/>[PostsPage.jsx]"]
  node_posts_context["Posts async state<br/>React context provider<br/>[PostsContext.jsx]"]
  node_posts_reducer["Posts transitions<br/>state reducer<br/>[postsReducer.js]"]
  node_use_posts["Posts consumer API<br/>React hook<br/>[usePosts.js]"]
  node_post_ui["Post form and list<br/>feature UI<br/>[PostForm.jsx]"]
  node_post_api["Posts REST client<br/>API service<br/>[postApi.js]"]
  node_jsonplaceholder[("JSONPlaceholder<br/>external REST API")]
end

subgraph group_products["Products domain"]
  node_products_page["Products page<br/>route page<br/>[ProductsPage.jsx]"]
  node_products_context["Products async state<br/>React context provider"]
  node_products_reducer["Products transitions<br/>state reducer<br/>[productsReducer.js]"]
  node_use_products["Products consumer API<br/>React hook<br/>[useProducts.js]"]
  node_product_ui["Product list<br/>feature UI<br/>[ProductList.jsx]"]
  node_product_api["Products API client<br/>API service<br/>[productApi.js]"]
  node_local_products_api[("Local products API<br/>external backend")]
end

subgraph group_delivery["Delivery"]
  node_container{{"Static production serving<br/>container deployment"}}
  node_nginx["Nginx static server<br/>web server config<br/>[nginx.conf]"]
  node_ci["CI pipelines<br/>automation"]
end

node_vite -->|"serves"| node_main
node_main -->|"mounts"| node_app_shell
node_app_shell -->|"uses"| node_shared_layout
node_app_shell -->|"/"| node_home
node_app_shell -->|"/posts"| node_posts_page
node_app_shell -->|"/products"| node_products_page
node_posts_page -->|"consumes"| node_use_posts
node_posts_page -->|"composes"| node_post_ui
node_use_posts -->|"accesses"| node_posts_context
node_post_ui -->|"invokes actions"| node_posts_context
node_posts_context -->|"loads and mutates"| node_post_api
node_posts_context -->|"dispatches"| node_posts_reducer
node_post_api -->|"REST requests"| node_jsonplaceholder
node_products_page -->|"consumes"| node_use_products
node_products_page -->|"renders"| node_product_ui
node_use_products -->|"accesses"| node_products_context
node_products_context -->|"dispatches"| node_products_reducer
node_products_context -->|"loads and retries"| node_product_api
node_product_api -->|"GET products"| node_local_products_api
node_container -->|"configures"| node_nginx
node_ci -.->|"builds and validates"| node_container

click node_vite "https://github.com/balagrishnan/react-posts-crud/blob/main/vite.config.js"
click node_main "https://github.com/balagrishnan/react-posts-crud/blob/main/src/main.jsx"
click node_app_shell "https://github.com/balagrishnan/react-posts-crud/blob/main/src/App.jsx"
click node_shared_layout "https://github.com/balagrishnan/react-posts-crud/blob/main/src/components/Navbar.jsx"
click node_home "https://github.com/balagrishnan/react-posts-crud/blob/main/src/pages/Home.jsx"
click node_posts_page "https://github.com/balagrishnan/react-posts-crud/blob/main/src/pages/PostsPage.jsx"
click node_posts_context "https://github.com/balagrishnan/react-posts-crud/blob/main/src/context/PostsContext.jsx"
click node_posts_reducer "https://github.com/balagrishnan/react-posts-crud/blob/main/src/reducers/postsReducer.js"
click node_use_posts "https://github.com/balagrishnan/react-posts-crud/blob/main/src/hooks/usePosts.js"
click node_post_ui "https://github.com/balagrishnan/react-posts-crud/blob/main/src/components/PostForm.jsx"
click node_post_api "https://github.com/balagrishnan/react-posts-crud/blob/main/src/services/postApi.js"
click node_products_page "https://github.com/balagrishnan/react-posts-crud/blob/main/src/pages/ProductsPage.jsx"
click node_products_context "https://github.com/balagrishnan/react-posts-crud/blob/main/src/context/ProductsContext.jsx"
click node_products_reducer "https://github.com/balagrishnan/react-posts-crud/blob/main/src/reducers/productsReducer.js"
click node_use_products "https://github.com/balagrishnan/react-posts-crud/blob/main/src/hooks/useProducts.js"
click node_product_ui "https://github.com/balagrishnan/react-posts-crud/blob/main/src/components/ProductList.jsx"
click node_product_api "https://github.com/balagrishnan/react-posts-crud/blob/main/src/services/productApi.js"
click node_container "https://github.com/balagrishnan/react-posts-crud/blob/main/Dockerfile"
click node_nginx "https://github.com/balagrishnan/react-posts-crud/blob/main/nginx.conf"
click node_ci "https://github.com/balagrishnan/react-posts-crud/blob/main/Jenkinsfile"

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_vite,node_main,node_app_shell,node_shared_layout,node_home toneBlue
class node_posts_page,node_posts_context,node_posts_reducer,node_use_posts,node_post_ui,node_post_api,node_jsonplaceholder toneAmber
class node_products_page,node_products_context,node_products_reducer,node_use_products,node_product_ui,node_product_api,node_local_products_api toneMint
class node_container,node_nginx,node_ci toneRose
```

## Components

### React application

- [Vite dev server](https://github.com/balagrishnan/react-posts-crud/blob/main/vite.config.js): development runtime · `vite.config.js`
- [Browser bootstrap](https://github.com/balagrishnan/react-posts-crud/blob/main/src/main.jsx): React entry · `src/main.jsx`
- [Routes and shell](https://github.com/balagrishnan/react-posts-crud/blob/main/src/App.jsx): route composition · `src/App.jsx`
- [Shared navigation layout](https://github.com/balagrishnan/react-posts-crud/blob/main/src/components/Navbar.jsx): UI shell · Navbar, header, and footer shared across routes. · `src/components/Navbar.jsx`
- [Home page](https://github.com/balagrishnan/react-posts-crud/blob/main/src/pages/Home.jsx): route page · `src/pages/Home.jsx`

### Posts domain

- [Posts page](https://github.com/balagrishnan/react-posts-crud/blob/main/src/pages/PostsPage.jsx): route page · `src/pages/PostsPage.jsx`
- [Posts async state](https://github.com/balagrishnan/react-posts-crud/blob/main/src/context/PostsContext.jsx): React context provider · Loads posts and keeps successful nonpersistent writes in session state. · `src/context/PostsContext.jsx`
- [Posts transitions](https://github.com/balagrishnan/react-posts-crud/blob/main/src/reducers/postsReducer.js): state reducer · Handles request lifecycle and CRUD transitions. · `src/reducers/postsReducer.js`
- [Posts consumer API](https://github.com/balagrishnan/react-posts-crud/blob/main/src/hooks/usePosts.js): React hook · `src/hooks/usePosts.js`
- [Post form and list](https://github.com/balagrishnan/react-posts-crud/blob/main/src/components/PostForm.jsx): feature UI · Controlled editing plus state-dependent post list rendering. · `src/components/PostForm.jsx`
- [Posts REST client](https://github.com/balagrishnan/react-posts-crud/blob/main/src/services/postApi.js): API service · `src/services/postApi.js`
- **JSONPlaceholder**: external REST API · Posts source; mutations are nonpersistent.

### Products domain

- [Products page](https://github.com/balagrishnan/react-posts-crud/blob/main/src/pages/ProductsPage.jsx): route page · `src/pages/ProductsPage.jsx`
- [Products async state](https://github.com/balagrishnan/react-posts-crud/blob/main/src/context/ProductsContext.jsx): React context provider · Owns loading, failure, stored results, and retry. · `src/context/ProductsContext.jsx`
- [Products transitions](https://github.com/balagrishnan/react-posts-crud/blob/main/src/reducers/productsReducer.js): state reducer · `src/reducers/productsReducer.js`
- [Products consumer API](https://github.com/balagrishnan/react-posts-crud/blob/main/src/hooks/useProducts.js): React hook · `src/hooks/useProducts.js`
- [Product list](https://github.com/balagrishnan/react-posts-crud/blob/main/src/components/ProductList.jsx): feature UI · List and item rendering. · `src/components/ProductList.jsx`
- [Products API client](https://github.com/balagrishnan/react-posts-crud/blob/main/src/services/productApi.js): API service · `src/services/productApi.js`
- **Local products API**: external backend · Endpoint port requires integration clarification (8080 vs 8081).

### Delivery

- [Static production serving](https://github.com/balagrishnan/react-posts-crud/blob/main/Dockerfile): container deployment · Builds frontend and serves it with Nginx. · `Dockerfile`
- [Nginx static server](https://github.com/balagrishnan/react-posts-crud/blob/main/nginx.conf): web server config · `nginx.conf`
- [CI pipelines](https://github.com/balagrishnan/react-posts-crud/blob/main/Jenkinsfile): automation · Jenkins and Playwright workflow coverage. · `Jenkinsfile`

## Connections

- Vite dev server → Browser bootstrap: serves
- Browser bootstrap → Routes and shell: mounts
- Routes and shell → Shared navigation layout: uses
- Routes and shell → Home page: /
- Routes and shell → Posts page: /posts
- Routes and shell → Products page: /products
- Posts page → Posts consumer API: consumes
- Posts page → Post form and list: composes
- Posts consumer API → Posts async state: accesses
- Post form and list → Posts async state: invokes actions
- Posts async state → Posts REST client: loads and mutates
- Posts async state → Posts transitions: dispatches
- Posts REST client → JSONPlaceholder: REST requests
- Products page → Products consumer API: consumes
- Products page → Product list: renders
- Products consumer API → Products async state: accesses
- Products async state → Products transitions: dispatches
- Products async state → Products API client: loads and retries
- Products API client → Local products API: GET products
- Static production serving → Nginx static server: configures
- CI pipelines → Static production serving: builds and validates