How martin-leo-frontend-developer/shopping-app works
This is a React shopping-cart application: shoppers browse products and manage a cart, while an administrator can sign in and add products; registration and purchase-review pages are also routed. The sampled code shows Firebase Authentication, Firestore, Storage, and messaging usage. The README describes only the Create React App scaffold, and Admin and ViewPurchase implementation details were not sampled, so their internal behavior and data connections are not inferred.
Main entry points: index.jsx Route setup · Home.jsx Catalog and cart · AppLayout.jsx App layout · SignUp.jsx Registration
Components 18
App shell and routing
- Route setup
src/index.jsx - App layout
src/components/AppLayout.jsx - Header and logout
src/components/Header.jsx
Identity and access
- Registration
src/pages/SignUp.jsx - Sign in
src/pages/Login.jsx - Protected admin gate
src/index.jsx
Catalog and cart
- Catalog and cart
src/pages/Home.jsx - Purchase review
src/pages/ViewPurchase.jsx
Administration
- Admin page
src/pages/Admin.jsx - Add product
src/pages/AddProduct.jsx
Firebase services
- Firebase setup
src/components/config.js - Firebase Authentication
- Firestore
- Firebase Storage
- Firebase Messaging
Other components
- Shopper
- Administrator
- Messaging worker
public/firebase-messaging-sw.js
Connections 24
- Shopper → Route setup: opens app
- Administrator → Route setup: opens app
- Route setup → App layout: renders shell
- Route setup → Catalog and cart: routes to
- Route setup → Registration: routes to
- Route setup → Sign in: routes to
- Route setup → Protected admin gate: guards routes
- Protected admin gate → Admin page: renders
- Route setup → Add product: routes to
- Route setup → Purchase review: routes to
- App layout → Header and logout: renders
- App layout → Firebase Authentication: observes session
- Header and logout → Firebase Authentication: signs out
- Registration → Firebase Authentication: creates account
- Registration → Firestore: writes profile
- Sign in → Firebase Authentication: signs in
- Protected admin gate → Firebase Authentication: checks session
- Catalog and cart → Firestore: reads catalog and cart
- Catalog and cart → Firestore: updates cart
- Add product → Firebase Storage: uploads image
- Add product → Firestore: saves product
- Catalog and cart → Firebase Messaging: requests token and listens
- Route setup → Messaging worker: registers worker
- Messaging worker → Firebase Messaging: receives background messages