How shorif45653/sole-hub works
SoleHub is a React shoe-shopping storefront backed by Supabase. Customers browse and filter products, manage a cart, check out through a simulated-payment flow, and track orders; admins manage products, orders, and customers. The graph distinguishes pages, shared state, and service-layer calls. Some routes and features are documented but their implementations were not sampled, so those connections are shown only where the route excerpt, source index, or README supports them.
Main entry points: App.jsx Route Application · supabase.js Supabase Client · CartContext.jsx Cart State · productService.js Product Catalog Service
Components 22
Storefront
- Route Application
frontend/src/App.jsx - Homepage
frontend/src/pages/Home.jsx - Product Shop
frontend/src/pages/Shop.jsx - Product Details
frontend/src/pages/ProductDetails.jsx
Shopping and Orders
- Cart Page
frontend/src/pages/Cart.jsx - Checkout
frontend/src/pages/Checkout.jsx - Demo Payment
frontend/src/pages/DemoPayment.jsx - Order History and Details
frontend/src/pages/MyOrders.jsx
Identity and Shared State
- Authentication and Profile
frontend/src/context/AuthContext.jsx - Cart State
frontend/src/context/CartContext.jsx - Wishlist State
frontend/src/context/WishlistContext.jsx
Data Services
- Product Catalog Service
frontend/src/services/productService.js - Order and Payment Service
frontend/src/services/orderService.js - Address Service
frontend/src/services/addressService.js - Admin Service
frontend/src/services/adminService.js - Supabase Client
frontend/src/services/supabase.js
Administration
- Admin Dashboard
frontend/src/pages/admin/Dashboard.jsx - Product Management
frontend/src/pages/admin/ProductForm.jsx - Order Management
frontend/src/pages/admin/Orders.jsx - Customer Management
frontend/src/pages/admin/Users.jsx
Other components
- Customer
- Supabase Backend
Connections 36
- Customer → Route Application: uses storefront
- Route Application → Homepage: routes to
frontend/src/App.jsx - Route Application → Product Shop: routes to
frontend/src/App.jsx - Route Application → Product Details: routes to
frontend/src/App.jsx - Route Application → Cart Page: routes to
frontend/src/App.jsx - Route Application → Checkout: routes to
frontend/src/App.jsx - Route Application → Demo Payment: routes to
frontend/src/App.jsx - Route Application → Order History and Details: routes to
frontend/src/App.jsx - Route Application → Authentication and Profile: provides state
frontend/src/App.jsx - Route Application → Cart State: provides state
frontend/src/App.jsx - Route Application → Wishlist State: provides state
frontend/src/App.jsx - Homepage → Product Catalog Service: fetches products
frontend/src/pages/Home.jsx - Product Shop → Product Catalog Service: fetches products
frontend/src/pages/Shop.jsx - Product Details → Product Catalog Service: fetches product
frontend/src/pages/ProductDetails.jsx - Product Details → Cart State: adds to cart
frontend/src/pages/ProductDetails.jsx - Cart Page → Cart State: reads and updates
frontend/src/pages/Cart.jsx - Checkout → Cart State: reads cart
frontend/src/pages/Checkout.jsx - Checkout → Order and Payment Service: creates order
frontend/src/pages/Checkout.jsx - Demo Payment → Order and Payment Service: processes payment
frontend/src/pages/DemoPayment.jsx - Order History and Details → Order and Payment Service: reads orders
- Authentication and Profile → Supabase Client: auth and profile access
frontend/src/context/AuthContext.jsx - Cart State → Supabase Client: persists cart
frontend/src/context/CartContext.jsx - Cart State → Authentication and Profile: reads user
frontend/src/context/CartContext.jsx - Product Catalog Service → Supabase Client: queries catalog
frontend/src/services/productService.js - Order and Payment Service → Supabase Client: queries orders
frontend/src/services/orderService.js - Address Service → Supabase Client: accesses addresses
frontend/src/services/addressService.js - Admin Service → Supabase Client: manages records
frontend/src/services/adminService.js - Supabase Client → Supabase Backend: connects to
- Route Application → Admin Dashboard: routes to
frontend/src/App.jsx - Route Application → Product Management: routes to
frontend/src/App.jsx - Route Application → Order Management: routes to
frontend/src/App.jsx - Route Application → Customer Management: routes to
frontend/src/App.jsx - Admin Dashboard → Supabase Client: reads statistics
frontend/src/pages/admin/Dashboard.jsx - Product Management → Admin Service: manages catalog
frontend/src/pages/admin/ProductForm.jsx - Order Management → Supabase Client: manages orders
frontend/src/pages/admin/Orders.jsx - Customer Management → Supabase Client: manages customers
frontend/src/pages/admin/Users.jsx