balagrishnan/react-posts-crud

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.