guywithnogirl/capybara_frontend

Purpose and Runtime

This is a Vite-served React single-page storefront client. It provides product browsing, account authentication, cart and wishlist management, checkout/payment, address management, and order history/detail views. The README is template-level; the application structure indicates a backend API is consumed through service modules.

Entry points: index.html, src/main.jsx, and src/App.jsx. Vite configuration is in vite.config.js.

Application Composition and Navigation

src/App.jsx is the application shell and likely owns route composition between public catalog pages and authenticated commerce/account flows. src/main.jsx mounts React and global styles (src/index.css); src/App.css supplies app-level presentation.

Page-level features are organized under src/pages, including catalog (Home.jsx, Shop.jsx, ProductDetail.jsx), customer account (Account.jsx, AddressBook.jsx), and purchase lifecycle (Cart.jsx, Checkout.jsx, Payment.jsx, OrderSuccess.jsx, OrderHistory.jsx, OrderDetails.jsx).

Shared Client State

Three React contexts define the main cross-page state boundaries:

• Authentication and current-user/session state: src/context/AuthContext.jsx, with JWT parsing in src/context/jwtDecode.js.

• Cart state and cart synchronization: src/context/CartContext.jsx.

• Saved-product state: src/context/WishlistContext.jsx.

These contexts let catalog, navigation, account, and checkout UI consume shared state without direct page-to-page coupling.

Authentication and Access Control

Authentication views are src/pages/Login.jsx, src/pages/Register.jsx, src/pages/ForgotPassword.jsx, and src/pages/ResetPassword.jsx. API operations are isolated in src/services/authService.js.

src/components/ProtectedRoute.jsx is the access-control boundary for customer-only routes such as account, address book, and order-related pages. It should depend on AuthContext, rather than individual pages interpreting tokens themselves.

Commerce Flow

Product discovery flows from home/shop listings to product detail, using reusable cards and ratings: src/pages/Home.jsx, src/pages/Shop.jsx, src/pages/ProductDetail.jsx, src/components/ProductCard.jsx, and src/components/StarRating.jsx.

The purchase path is cart → checkout → payment → success/order record: src/pages/Cart.jsx, src/pages/Checkout.jsx, src/pages/Payment.jsx, and src/pages/OrderSuccess.jsx. Historic orders and fulfillment details are presented through src/pages/OrderHistory.jsx and src/pages/OrderDetails.jsx.

API and Data Boundaries

src/services/api.js is the common HTTP integration boundary. Domain-specific service adapters separate backend calls from UI:

• Catalog/content: src/services/productService.js, src/services/categoryService.js, src/services/bannerService.js, src/services/reviewService.js.

• Customer commerce data: src/services/cartService.js, src/services/wishlistService.js, src/services/orderService.js, src/services/addressService.js.

• Identity: src/services/authService.js.

src/data/products.js may provide local catalog seed/fallback data, distinct from backend product retrieval.

Shared UI and Deployment

Global chrome and reusable interaction elements are centralized in src/components/Navbar.jsx, src/components/Footer.jsx, src/components/Spinner.jsx, and src/components/Return.jsx. CSS modules colocated with components/pages provide scoped styling.

The frontend is built and deployed via GitHub Actions at .github/workflows/deploy.yml. Static/public assets are supplied from public/assets and bundled application assets from src/assets; no backend runtime or payment provider implementation is present in this repository.