How shubhamsarda/codebook works
CodeBook is a React storefront for browsing and buying eBooks. Visitors enter through the shared site shell, explore or search the catalog, inspect product details, and—when authenticated—use the cart, checkout, order summary, and dashboard. Product and account operations rely on services that communicate with an external API; cart and filter state are managed in client-side contexts and reducers. Several page and service implementations were not excerpted, so their internal call relationships are omitted where the available evidence does not establish them.
Main entry points: AllRoutes.js Route dispatch · ProductsList.js Product catalog · App.js App shell · CartContext.js Cart state
Components 25
Application shell
- App shell
src/App.js - Route dispatch
src/routes/AllRoutes.js - Header and search
src/components/Layouts/Header.js - Footer
src/components/Layouts/Footer.js - Search
src/components/Sections/Search.js
Storefront browsing
- Home page
src/pages/Home/HomePage.js - Product catalog
src/pages/Products/ProductsList.js - Catalog filters
src/pages/Products/components/FilterBar.js - Product details
src/pages/ProductDetail.js - Product cards
src/components/Elements/ProductCard.js - Featured products
src/pages/Home/components/FeaturedProducts.js
Purchase and account
- Cart page
src/pages/Cart/CartPage.js - Checkout
src/pages/Cart/components/Checkout.js - Order summary
src/pages/Order/OrderPage.js - Account dashboard
src/pages/Dashboard/DashboardPage.js - Login and registration
src/pages/Login.js - Order success
src/pages/Order/components/OrderSuccess.js
State and services
- Filter state
src/context/FilterContext.js - Cart state
src/context/CartContext.js - State reducers
src/reducers/index.js - Product API service
src/services/productService.js - Authentication service
src/services/authService.js - User and order service
src/services/dataService.js
Other components
- Shopper
- External API
Connections 27
- Shopper → App shell: opens storefront
- App shell → Header and search: renders
src/App.js - App shell → Route dispatch: renders
src/App.js - App shell → Footer: renders
src/App.js - Route dispatch → Home page: routes to
src/routes/AllRoutes.js - Route dispatch → Product catalog: routes to
src/routes/AllRoutes.js - Route dispatch → Product details: routes to
src/routes/AllRoutes.js - Route dispatch → Login and registration: routes to
src/routes/AllRoutes.js - Route dispatch → Cart page: routes to
src/routes/AllRoutes.js - Route dispatch → Order summary: routes to
src/routes/AllRoutes.js - Route dispatch → Account dashboard: routes to
src/routes/AllRoutes.js - Header and search → Search: renders
src/components/Layouts/Header.js - Product catalog → Product API service: fetches products
src/pages/Products/ProductsList.js - Product catalog → Filter state: reads filtered products
src/pages/Products/ProductsList.js - Product catalog → Catalog filters: renders filters
src/pages/Products/ProductsList.js - Product catalog → Product cards: renders cards
src/pages/Products/ProductsList.js - Product cards → Cart state: uses cart context
src/components/Elements/ProductCard.js - Filter state → State reducers: dispatches actions
src/context/FilterContext.js - Cart state → State reducers: uses reducers
src/context/CartContext.js - Product API service → External API: requests catalog data
- Authentication service → External API: authenticates users
src/services/authService.js - User and order service → External API: reads and writes
src/services/dataService.js - Checkout → Cart state: uses cart context
src/pages/Cart/components/Checkout.js - Checkout → User and order service: creates orders
src/pages/Cart/components/Checkout.js - Account dashboard → User and order service: loads account data
src/pages/Dashboard/DashboardPage.js - Home page → Featured products: renders featured section
src/pages/Home/HomePage.js - Order summary → Order success: renders outcome
src/pages/Order/OrderPage.js