How ras5014/codeemy-soplite works
ShopLite’s main workflow is a browser catalogue and locally persisted cart, followed by account sign-in and a protected demo checkout; the server validates cart choices, prices them from product records, and saves private order history. The graph separates the React UI, API/authentication, domain records and persistence. Relationships follow the supplied excerpts, SOURCE INDEX references and README; some client components and backend models are indexed but not excerpted, so their internal behavior is not expanded.
Main entry points: App.jsx Shop app · server.js Express API · orderRoutes.js Order routes · api.js API client
Components 20
Shop interface
- Shop app
client/src/App.jsx - Account form
client/src/components/AuthPanel.jsx - Cart panel
client/src/components/CartPanel.jsx - Order history
client/src/components/OrdersPanel.jsx - Navigation
client/src/components/Navbar.jsx - Product card
client/src/components/ProductCard.jsx - Session context
client/src/auth/AuthContext.jsx - Price formatting
client/src/utils/formatPrice.js
API and identity
- API client
client/src/api.js - Express API
server/src/server.js - Account routes
server/src/routes/authRoutes.js - Product route
server/src/routes/productRoutes.js - Order routes
server/src/routes/orderRoutes.js - JWT guard
server/src/middleware/requireAuth.js
Shop records
- Product records
server/src/models/Product.js - User records
server/src/models/User.js - Order records
server/src/models/Order.js
Persistence
- DB connection
server/src/config/db.js - MongoDB
Other components
- Shopper
Connections 28
- Shopper → Shop app: uses
README.md - Shop app → Navigation: renders
client/src/App.jsx - Shop app → Product card: renders
client/src/App.jsx - Shop app → Account form: renders
client/src/App.jsx - Shop app → Cart panel: renders
client/src/App.jsx - Shop app → Order history: renders
client/src/App.jsx - Shop app → Session context: reads session
client/src/App.jsx - Account form → API client: submits credentials
client/src/components/AuthPanel.jsx - Account form → Session context: sets session
client/src/components/AuthPanel.jsx - Shop app → API client: requests products and checkout
client/src/App.jsx - Order history → API client: loads orders
client/src/components/OrdersPanel.jsx - Cart panel → Price formatting: formats totals
client/src/components/CartPanel.jsx - Product card → Price formatting: formats price
client/src/components/ProductCard.jsx - Order history → Price formatting: formats order prices
client/src/components/OrdersPanel.jsx - API client → Express API: sends HTTP requests
README.md - Express API → DB connection: connects database
server/src/server.js - Express API → Account routes: mounts routes
server/src/server.js - Express API → Product route: mounts routes
server/src/server.js - Express API → Order routes: mounts routes
server/src/server.js - Account routes → User records: reads and creates users
server/src/routes/authRoutes.js - Product route → Product records: reads active products
server/src/routes/productRoutes.js - Order routes → JWT guard: guards requests
server/src/routes/orderRoutes.js - Order routes → Product records: loads trusted prices
server/src/routes/orderRoutes.js - Order routes → Order records: creates and reads orders
server/src/routes/orderRoutes.js - DB connection → MongoDB: connects
server/src/config/db.js - Product records → MongoDB: stores product data
README.md - User records → MongoDB: stores account data
README.md - Order records → MongoDB: stores order data
README.md