How vannda-r9/spark-pc works
Spark PC is a frontend-only PC storefront: shoppers browse and compare products, add items to a persistent cart, and submit an order inquiry rather than paying through a backend. Account registration/login supports profile and order-history views; language selection is shared across the UI. The graph distinguishes page-level workflows, product/cart/order state, and account services. The README documents local product data, but the provided tree and excerpts show a product service using an API wrapper; backend and service wiring beyond cited references are not assumed.
Main entry points: CartContext.jsx Cart state · page.js Product search · product.service.js Product service · CompareContext.jsx Compare state
Components 27
Storefront
- Home page
app/page.js - Featured products
components/home/FeaturedSection.jsx - Product search
app/shop/page.js - Product detail
app/product/[id]/page.js
Shopping
- Product service
services/product.service.js - Product card
components/product/ProductCard.jsx - Product actions
components/product/ProductActions.jsx - Cart page
app/cart/page.js - Cart state
context/CartContext.jsx - Order inquiry
components/cart/OrderInquiryModal.jsx - Compare page
app/compare/page.js - Compare table
components/compare/CompareTable.jsx - Budget recommendations
components/compare/BudgetRecommendation.jsx - Compare state
context/CompareContext.jsx
Accounts
- Order history
components/account/MyOrdersList.jsx - Login form
components/auth/LoginForm.jsx - Signup form
components/auth/SignupForm.jsx - Auth state
context/AuthContext.jsx - User profile
components/account/UserProfile.jsx
Shared UI & state
- Language state
context/LanguageContext.jsx - Toast feedback
components/ui/Toast.jsx - Navigation
components/layout/Navbar.jsx
Browser services
- Order service
services/order.service.js - Auth service
services/auth.service.js - Browser localStorage
Other components
- Shopper
- Product API
Connections 45
- Shopper → Home page: opens
app/page.js - Home page → Featured products: renders
app/page.js - Home page → Product service: loads featured
app/page.js - Shopper → Product search: searches
app/shop/page.js - Product search → Product service: loads products
app/shop/page.js - Product search → Product card: renders
app/shop/page.js - Product search → Cart state: adds items
app/shop/page.js - Product search → Toast feedback: shows feedback
app/shop/page.js - Product card → Compare state: toggles compare
components/product/ProductCard.jsx - Shopper → Product detail: opens product
app/product/[id]/page.js - Product detail → Product service: loads product
app/product/[id]/page.js - Product detail → Product actions: renders
app/product/[id]/page.js - Product actions → Cart state: adds items
components/product/ProductActions.jsx - Product actions → Compare state: toggles compare
components/product/ProductActions.jsx - Shopper → Cart page: reviews cart
app/cart/page.js - Cart page → Cart state: reads and updates
app/cart/page.js - Cart page → Order inquiry: opens inquiry
app/cart/page.js - Order inquiry → Cart state: reads and clears
components/cart/OrderInquiryModal.jsx - Order inquiry → Auth state: gets user
components/cart/OrderInquiryModal.jsx - Order inquiry → Order service: creates order
components/cart/OrderInquiryModal.jsx - Shopper → Compare page: compares products
app/compare/page.js - Compare page → Compare table: renders
app/compare/page.js - Compare table → Compare state: reads compare list
components/compare/CompareTable.jsx - Compare table → Cart state: adds items
components/compare/CompareTable.jsx - Compare page → Toast feedback: shows feedback
app/compare/page.js - Budget recommendations → Product service: finds by budget
components/compare/BudgetRecommendation.jsx - Budget recommendations → Cart state: adds items
components/compare/BudgetRecommendation.jsx - Budget recommendations → Compare state: uses compare state
components/compare/BudgetRecommendation.jsx - Shopper → Login form: signs in
- Shopper → Signup form: registers
- Login form → Auth state: authenticates
components/auth/LoginForm.jsx - Signup form → Auth state: registers
components/auth/SignupForm.jsx - Auth state → Auth service: validates and stores session
context/AuthContext.jsx - Shopper → User profile: views profile
- User profile → Auth state: reads account
components/account/UserProfile.jsx - User profile → Order service: reads orders
components/account/UserProfile.jsx - Shopper → Order history: views orders
- Order history → Order service: loads user orders
components/account/MyOrdersList.jsx - Auth service → Browser localStorage: reads and writes
services/auth.service.js - Order service → Browser localStorage: reads and writes
services/order.service.js - Cart state → Browser localStorage: persists cart
context/CartContext.jsx - Compare state → Browser localStorage: persists compare list
context/CompareContext.jsx - Product service → Product API: fetches products
services/product.service.js - Home page → Language state: uses translations
app/page.js - Navigation → Language state: uses translations
components/layout/Navbar.jsx