How paul-developer-stack/tarea-5-frontend works
HT-03 is a React single-page storefront backed by HT-02. A shopper browses and filters products, views details, adds items to a locally persisted cart, then signs in and submits delivery and payment-choice details to place an order. Administrators sign in and manage products through a protected CRUD view. The graph includes the documented catalog, authentication, checkout, and administration capabilities; unsampled page internals are represented at their exact paths, with relationships limited to documented or indexed references.
Main entry points: App.jsx App Router · AuthContext.jsx Session Context · api.js Backend API Client · CartContext.jsx Cart Context
Components 19
SPA and Navigation
- App Router
src/App.jsx - Application Bootstrap
src/main.jsx - Navigation Bar
src/components/Navbar.jsx
Product Discovery
- Catalog Search
src/pages/Home.jsx - Product Card
src/components/ProductCard.jsx - Product Detail
src/pages/ProductDetail.jsx - Catalog References
src/catalogo.js
Identity and State
- Session Context
src/context/AuthContext.jsx - Login Page
src/pages/Login.jsx - Registration Page
src/pages/Register.jsx - Admin Route Guard
src/components/ProtectedRoute.jsx
Cart and Administration
- Cart Context
src/context/CartContext.jsx - Cart and Checkout
src/pages/Cart.jsx - Product Administration
src/pages/Admin.jsx - Backend API Client
src/api.js
Other components
- Shopper
- Administrator
- Browser Local Storage
- HT-02 Backend
Connections 34
- Application Bootstrap → App Router: renders
src/main.jsx - Application Bootstrap → Session Context: provides session
src/main.jsx - Application Bootstrap → Cart Context: provides cart
src/main.jsx - App Router → Navigation Bar: renders
src/App.jsx - App Router → Catalog Search: routes to
src/App.jsx - App Router → Cart and Checkout: routes to
src/App.jsx - App Router → Product Detail: routes to
src/App.jsx - App Router → Login Page: routes to
src/App.jsx - App Router → Registration Page: routes to
src/App.jsx - App Router → Admin Route Guard: guards admin route
src/App.jsx - Admin Route Guard → Product Administration: renders
src/App.jsx - Navigation Bar → Session Context: reads session
src/components/Navbar.jsx - Navigation Bar → Cart Context: reads item count
src/components/Navbar.jsx - Catalog Search → Backend API Client: loads products
src/pages/Home.jsx - Catalog Search → Cart Context: adds products
src/pages/Home.jsx - Catalog Search → Product Card: renders
src/pages/Home.jsx - Product Detail → Backend API Client: loads products
src/pages/ProductDetail.jsx - Product Detail → Cart Context: adds products
src/pages/ProductDetail.jsx - Login Page → Session Context: signs in
src/pages/Login.jsx - Registration Page → Backend API Client: registers account
src/pages/Register.jsx - Registration Page → Session Context: uses session
src/pages/Register.jsx - Admin Route Guard → Session Context: checks role
src/components/ProtectedRoute.jsx - Session Context → Backend API Client: authenticates
src/context/AuthContext.jsx - Cart and Checkout → Cart Context: reads and updates
src/pages/Cart.jsx - Cart and Checkout → Session Context: checks session
src/pages/Cart.jsx - Cart and Checkout → Backend API Client: submits order
src/pages/Cart.jsx - Product Administration → Backend API Client: manages products
src/pages/Admin.jsx - Product Administration → Session Context: reads token
src/pages/Admin.jsx - Backend API Client → Catalog References: merges catalog references
src/api.js - Backend API Client → HT-02 Backend: sends API requests
README.md - Cart Context → Browser Local Storage: persists cart
src/context/CartContext.jsx - Session Context → Browser Local Storage: persists session
src/context/AuthContext.jsx - Shopper → App Router: uses storefront
- Administrator → App Router: uses storefront