How frostbite69425/react-shopping-cart works
Trnkts is a React shopping SPA with home, shop, and cart routes. A visitor opens the app, navigates to the shop, where product data is fetched from Fake Store API and displayed as cards; card actions update cart state held by the shared parent, and the cart shows quantities and a total. Its Checkout button clears the cart; no payment flow is shown. The graph reflects sampled source and documented capabilities; unsampled styling and other implementation details are omitted.
Main entry points: routes.jsx Route config · Shop.jsx Shop page · main.jsx React entry · Parent.jsx Shared shell
Components 13
App shell and routing
- React entry
src/main.jsx - Route config
src/routes.jsx - Shared shell
src/components/Parent.jsx - Navigation
src/components/Navbar.jsx
Product catalog
- Shop page
src/components/Shop.jsx - Product fetch
src/hooks/useImageUrl.jsx - Product card
src/components/Card.jsx - Loading indicator
src/components/Loader.jsx
Cart management
- Cart page
src/components/Cart.jsx
Page experiences
- Home page
src/components/Home.jsx - Error page
src/components/ErrorPage.jsx
Other components
- Visitor
- Fake Store API
Connections 13
- Visitor → React entry: opens
- React entry → Route config: configures router
src/main.jsx - Route config → Shared shell: renders layout
src/routes.jsx - Route config → Home page: routes home
src/routes.jsx - Route config → Shop page: routes shop
src/routes.jsx - Route config → Cart page: routes cart
src/routes.jsx - Route config → Error page: routes errors
src/routes.jsx - Shared shell → Navigation: renders
src/components/Parent.jsx - Shop page → Product fetch: loads products
src/components/Shop.jsx - Product fetch → Fake Store API: fetches products
src/hooks/useImageUrl.jsx - Shop page → Product card: renders products
src/components/Shop.jsx - Shop page → Loading indicator: shows loading
src/components/Shop.jsx - Cart page → Product card: renders cart items
src/components/Cart.jsx