How devmonzer/online-shopping-store works
This is a React storefront: shoppers browse and search products, inspect details, add items to a persistent cart, and proceed to checkout and payment. Separate workflows cover account authentication and contact messages. The graph reflects the routes, Redux/Saga structure, and sampled components; Firebase/Firestore and Stripe are documented capabilities, but unsampled implementation details limit some integration links.
Main entry points: navigation.component.jsx Navigation · user.saga.js User workflows · cart.reducer.js Cart state · App.js App routes
Components 20
Storefront
- App routes
src/App.js - Navigation
src/routes/navigation/navigation.component.jsx - Shop browsing
src/routes/shop/shop.component.jsx - Category views
src/routes/category/category.component.jsx - Product details
src/components/card-details/card-details.jsx - Product search
src/components/search-bar/SearchBar.jsx - Contact form
src/components/contact-us/contact-us.component.jsx - Category workflows
src/store/categories/category.saga.js
Cart and checkout
- Cart state
src/store/cart/cart.reducer.js - Checkout
src/routes/checkout/checkout.component.jsx - Payment form
src/components/payment-form/payment-form.component.jsx - Payment intent
netlify/functions/create-payment-intent.js
Accounts and state
- Sign-in and signup
src/components/sign-in-form/sign-in-form.component.jsx - User workflows
src/store/user/user.saga.js - User state
src/store/user/user.reducer.js - Redux store
src/store/store.js
External services
- Firebase / Firestore
- Stripe
- EmailJS
Other components
- Shopper
Connections 24
- Shopper → App routes: opens
- App routes → Navigation: routes to
- Navigation → Shop browsing: opens
- Shop browsing → Category views: shows
- Navigation → Product search: renders
- Product search → Product details: navigates to
- Category views → Product details: opens
- Product details → Cart state: dispatches add
- Navigation → Cart state: reads
- Shopper → Checkout: opens
- Checkout → Cart state: reads
- Checkout → Payment form: renders
- Payment form → Stripe: processes payment
- Payment intent → Stripe: creates intent
- Shopper → Sign-in and signup: submits credentials
- Sign-in and signup → User workflows: dispatches actions
- App routes → User workflows: checks session
- User workflows → Firebase / Firestore: authenticates user
- User workflows → User state: dispatches results
- Category workflows → Firebase / Firestore: loads categories
- Category workflows → Redux store: updates state
- Redux store → Cart state: persists cart
- Shopper → Contact form: sends message
- Contact form → EmailJS: sends form