How balloprotel/tkb-shop-full works
TKB Shop is a React storefront backed by FastAPI microservices. Shoppers browse products, manage a cart and favorites, authenticate, place orders, and pay; administrators manage catalog, orders, users, newsletter, and dashboard settings. The frontend uses the API Gateway as its sole API entry point. The README documents service ownership, while sampled service code confirms gateway routing, catalog quoting/stock operations, and backoffice aggregation. Some frontend and service internals were not excerpted, so uncertain connections are omitted.
Main entry points: App.jsx App Routes · app/main.py API Gateway · api.js API Client · app/main.py Backoffice Service
Components 27
Storefront
- App Routes
frontend/src/App.jsx - Product Discovery
frontend/src/pages/Home.jsx - Category Browsing
frontend/src/pages/CategoryPage.jsx - Product Details
frontend/src/pages/ProductDetails.jsx - Cart
frontend/src/pages/Cart.jsx - Checkout
frontend/src/pages/Checkout.jsx - Order History
frontend/src/pages/MyOrders.jsx - User Profile
frontend/src/pages/UserProfile.jsx - Authentication UI
frontend/src/pages/auth/Login.jsx - Admin Console
frontend/src/pages/admin/DashboardHome.jsx - Catalog Admin
frontend/src/pages/admin/AdminProducts.jsx - API Client
frontend/src/utils/api.js
Commerce Services
- Catalog Service
services/catalog/app/main.py - Orders Service
services/orders/app/main.py - Payments Service
services/payments/app/main.py
Platform Services
- API Gateway
services/gateway/app/main.py - Auth Service
services/auth/app/main.py - Backoffice Service
services/backoffice/app/main.py - Email Delivery
services/notifications/app/main.py - Request Observability
services/auth/app/observability.py
Client State
- Cart State
frontend/src/context/CartContext.jsx - Favorites State
frontend/src/context/FavoritesContext.jsx - Auth Storage
frontend/src/utils/authStorage.js
Other components
- Shopper
- Administrator
- Stripe
- PayPal
Connections 40
- Shopper → App Routes: uses
README.md - Administrator → App Routes: uses
README.md - App Routes → Product Discovery: routes to
frontend/src/App.jsx - App Routes → Category Browsing: routes to
frontend/src/App.jsx - App Routes → Product Details: routes to
frontend/src/App.jsx - App Routes → Cart: routes to
frontend/src/App.jsx - App Routes → Checkout: routes to
frontend/src/App.jsx - App Routes → Order History: routes to
frontend/src/App.jsx - App Routes → User Profile: routes to
frontend/src/App.jsx - App Routes → Authentication UI: routes to
frontend/src/App.jsx - App Routes → Admin Console: routes to
frontend/src/App.jsx - App Routes → Catalog Admin: routes to
frontend/src/App.jsx - Checkout → Cart State: reads cart
frontend/src/pages/Checkout.jsx - Cart → Cart State: updates cart
frontend/src/pages/Cart.jsx - Product Discovery → Favorites State: uses favorites
frontend/src/pages/Home.jsx - Category Browsing → Favorites State: uses favorites
frontend/src/pages/CategoryPage.jsx - User Profile → Auth Storage: reads auth
frontend/src/pages/UserProfile.jsx - Product Discovery → API Client: requests data
frontend/src/pages/Home.jsx - Category Browsing → API Client: requests data
frontend/src/pages/CategoryPage.jsx - Checkout → API Client: submits order
frontend/src/pages/Checkout.jsx - Order History → API Client: loads orders
frontend/src/pages/MyOrders.jsx - Authentication UI → API Client: authenticates
- Admin Console → API Client: loads stats
frontend/src/pages/admin/DashboardHome.jsx - Catalog Admin → API Client: manages products
frontend/src/pages/admin/AdminProducts.jsx - API Client → API Gateway: calls API
README.md - API Gateway → Catalog Service: routes products
services/gateway/app/main.py - API Gateway → Auth Service: routes auth
services/gateway/app/main.py - API Gateway → Orders Service: routes orders
services/gateway/app/main.py - API Gateway → Payments Service: routes payments
README.md - API Gateway → Backoffice Service: routes backoffice
README.md - API Gateway → Email Delivery: routes notifications
README.md - Orders Service → Catalog Service: quotes items
services/orders/app/main.py - Orders Service → Catalog Service: commits stock
services/orders/app/main.py - Backoffice Service → Auth Service: validates admin
services/backoffice/app/main.py - Backoffice Service → Auth Service: fetches user stats
services/backoffice/app/main.py - Backoffice Service → Catalog Service: fetches catalog stats
services/backoffice/app/main.py - Backoffice Service → Orders Service: fetches order stats
services/backoffice/app/main.py - Payments Service → Stripe: integrates
README.md - Payments Service → PayPal: integrates
README.md - Auth Service → Request Observability: installs middleware
services/auth/app/main.py