How mobin34/clothes-store-project works
This is a React clothing-store storefront with catalog browsing, product details, cart and order placement, customer accounts, and role-gated management. The user enters through the app shell; shared store state loads products, users, and orders, then the router renders the selected page. Browsing can lead to product selection and cart checkout; management supports product changes and order review. Data access uses Supabase with local-storage/mock fallbacks, while order and cart behavior is partly client-side. Several page implementations were not sampled, so their internal behavior is not inferred.
Main entry points: PageRouter.jsx Page router · App.jsx App shell · api.js Data API · useStore.js Store state
Components 18
App shell and navigation
- App shell
src/App.jsx - Top navigation
src/components/Navbar.jsx - Bottom navigation
src/components/BottomBar.jsx - Page router
src/components/PageRouter.jsx
Storefront shopping
- Home page
src/pages/Home.jsx - Catalog search
src/pages/Shop.jsx - Product detail
src/pages/ProductDetail.jsx - Product card
src/components/ProductCard.jsx - Shopping cart
src/pages/Cart.jsx
Accounts and management
- Customer account
src/pages/Account.jsx - Store management
src/pages/Admin.jsx
State and data access
- Store state
src/hooks/useStore.js - Data API
src/services/api.js - Seed catalog data
src/data/mockData.js - Supabase client setup
src/services/supabaseClient.js
Other components
- Store visitor
- Browser local storage
- Supabase service
Connections 20
- Store visitor → App shell: opens
- App shell → Store state: initializes
src/App.jsx - App shell → Top navigation: renders
src/App.jsx - App shell → Page router: renders
src/App.jsx - App shell → Bottom navigation: renders
src/App.jsx - Page router → Home page: renders
src/components/PageRouter.jsx - Page router → Catalog search: renders
src/components/PageRouter.jsx - Page router → Product detail: renders
src/components/PageRouter.jsx - Page router → Shopping cart: renders
src/components/PageRouter.jsx - Page router → Customer account: renders
src/components/PageRouter.jsx - Page router → Store management: renders
src/components/PageRouter.jsx - Home page → Product card: renders
src/pages/Home.jsx - Catalog search → Product card: renders
src/pages/Shop.jsx - Product detail → Product card: renders
src/pages/ProductDetail.jsx - Store state → Data API: loads and updates
src/hooks/useStore.js - Store state → Seed catalog data: initializes user
src/hooks/useStore.js - Data API → Supabase client setup: uses client config
src/services/api.js - Data API → Seed catalog data: uses fallback data
src/services/api.js - Data API → Browser local storage: reads and writes
src/services/api.js - Supabase client setup → Supabase service: configures client
src/services/supabaseClient.js