How themukesh-dev/aurelis works
AURELIS is a React watch-storefront. Users browse featured watches or search, filter, and sort the collection; inspect product details and choose quantities; manage a cart; then enter shipping details and complete a simulated checkout that clears the cart and opens an order confirmation. The catalog is in-memory product data, and cart state is held in React context rather than a persistent store. The graph follows the documented and excerpted paths; some page internals, including cart and confirmation rendering, were not sampled.
Components 19
Storefront shell
- React entry
src/main.jsx - Routes and shell
src/App.jsx - Navigation
src/components/Navbar.jsx - Footer
src/components/Footer.jsx - Scroll reset
src/components/ScrollToTop.jsx - Not found page
src/pages/NotFound.jsx
Watch discovery
- Home page
src/pages/Home.jsx - Shop and filters
src/pages/Shop.jsx - Search input
src/components/SearchBar.jsx - Category filter
src/components/CategoryFilter.jsx - Product grid
src/components/ProductGrid.jsx - Product card
src/components/ProductCard.jsx - Product details
src/pages/ProductDetails.jsx - Watch catalog
src/data/products.js
Cart management
- Cart page
src/pages/Cart.jsx - Cart context
src/context/CartContext.jsx
Checkout
- Checkout form
src/pages/Checkout.jsx - Order confirmation
src/pages/OrderConfirmation.jsx
Other components
- Shopper
Connections 25
- Shopper → Routes and shell: opens store
src/App.jsx - React entry → Routes and shell: renders
src/main.jsx - Routes and shell → Navigation: renders
src/App.jsx - Routes and shell → Footer: renders
src/App.jsx - Routes and shell → Scroll reset: renders
src/App.jsx - Routes and shell → Home page: routes to
src/App.jsx - Routes and shell → Shop and filters: routes to
src/App.jsx - Routes and shell → Product details: routes to
src/App.jsx - Routes and shell → Cart page: routes to
src/App.jsx - Routes and shell → Checkout form: routes to
src/App.jsx - Routes and shell → Order confirmation: routes to
src/App.jsx - Routes and shell → Not found page: routes to
src/App.jsx - Home page → Watch catalog: selects featured
src/pages/Home.jsx - Home page → Product grid: renders
src/pages/Home.jsx - Shop and filters → Watch catalog: filters and sorts
src/pages/Shop.jsx - Shop and filters → Search input: renders
src/pages/Shop.jsx - Shop and filters → Category filter: renders
src/pages/Shop.jsx - Shop and filters → Product grid: renders results
src/pages/Shop.jsx - Product grid → Product card: renders
src/components/ProductGrid.jsx - Product details → Watch catalog: looks up watch
src/pages/ProductDetails.jsx - Product details → Cart context: adds items
src/pages/ProductDetails.jsx - Navigation → Cart context: reads item count
src/components/Navbar.jsx - Cart page → Cart context: uses cart state
src/pages/Cart.jsx - Checkout form → Cart context: reads and clears
src/pages/Checkout.jsx - Checkout form → Order confirmation: navigates to
src/pages/Checkout.jsx