g1thub-05/e-commerce-app

Purpose and Runtime

A client-side React e-commerce SPA for browsing FakeStore products, filtering/searching inventory, viewing details, and managing a simulated cart. It runs through Vite and is deployed as static hosting (README links to Vercel). Core runtime dependencies include React, React Router DOM, Axios, Context API, and React Toastify.

Paths: src/main.jsx, src/App.jsx, vite.config.js, index.html.

Application Bootstrap and Routing

main.jsx mounts the React application; App.jsx is the composition root for global providers, router-driven page selection, shared navigation, and app-level styling. Route protection is centralized rather than embedded in individual pages.

Paths: src/main.jsx, src/App.jsx, src/components/ProtectedRoute/ProtectedRoute.jsx.

Authentication Boundary

Authentication state and auth operations are separated from page UI in an Auth context plus an auth module. Login is its dedicated page; protected navigation passes through ProtectedRoute, creating the access-control boundary for routes that require an authenticated user.

Paths: src/context/AuthContext.jsx, src/context/auth.js, src/pages/Login/Login.jsx, src/components/ProtectedRoute/ProtectedRoute.jsx.

Product Data Integration

The service layer is the boundary between UI and the external FakeStore REST API, using Axios. Product-oriented pages consume this data to render catalog and detail views; the client owns presentation-level filtering rather than a backend domain service.

Paths: src/services/api.js, src/pages/Home/Home.jsx, src/pages/ProductDetails/ProductDetails.jsx.

Catalog Discovery Flow

Home is the catalog orchestration page: it obtains products, applies search/category selection, and renders reusable product cards. Search and category controls are independent UI components, allowing discovery state to remain coordinated by the catalog page.

Paths: src/pages/Home/Home.jsx, src/components/SearchBar/SearchBar.jsx, src/components/CategoryFilter/CategoryFilter.jsx, src/components/ProductCard/ProductCard.jsx.

Cart State and Checkout Simulation

Cart state is shared application-wide through CartContext. Product cards/details add products into that state; the Cart page renders line items and supports cart mutation through CartItem. Currency formatting is isolated for consistent price display. No payment, order, or server-side cart system is indicated.

Paths: src/context/CartContext.jsx, src/pages/Cart/Cart.jsx, src/components/CartItem/CartItem.jsx, src/utils/currency.js.

Shared UI and External Services

Navbar connects global navigation, authentication-aware access, and cart-oriented navigation across pages. Toastify provides user feedback for actions. The only described external business-data dependency is FakeStore API; Vercel is the documented deployment target.

Paths: src/components/Navbar/Navbar.jsx, src/services/api.js, package.json.