Frontend ‐ Backend Flow guide - hokumcangus/taste-of-aloha GitHub Wiki

🔄 Frontend -> Backend Flow

This guide tracks how data moves from the user's click in the browser to the PostgreSQL database.

🛒 Shopping Cart Flow

  1. UI Component: User clicks "Add to Cart" in apps/web/src/components/Menu/.
  2. State Management: The useCart hook (Redux) updates the local state.
  3. API Call: The cartService.js sends a POST request to /api/cart.
  4. Backend Route: apps/backend/src/routes/cartRoutes.js receives the request.
  5. Controller: cartController.js validates the item and quantity.
  6. Persistence: Prisma saves the cart item to the database.

📋 Menu Loading Flow

  1. Page Load: apps/web/src/pages/Home calls fetchMenu.
  2. Backend: menuController.js queries the Menu table via prisma.menu.findMany().
  3. Normalization: The controller ensures category names are standardized before sending the JSON response.

🛠 Troubleshooting Data Flow

If data isn't showing up:

  • Check the Network Tab (F12) to see if the request hits :3000.
  • Run npx prisma studio in apps/backend to see if the data exists in the DB.