# eh-munna/essen-welt architecture

> Architecture diagram of the GitHub repository eh-munna/essen-welt, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/eh-munna/essen-welt
- Repository: https://github.com/eh-munna/essen-welt

## Overview

1. **Application shape**
   - EssenWelt is a **React 19 single-page frontend** built with **Vite**.
   - The repository you provided is primarily the client app; it talks to a **separate backend repo** (`essen-welt-server`) for data, auth-backed actions, bookings, orders, and admin operations.

2. **Top-level routing and page boundary**
   - The app is organized around `src/Routes/Routes.jsx` plus route guards in `PrivateRoute.jsx` and `AdminRoute.jsx`.
   - Public pages include the marketing/home experience, menu browsing, login/signup, and informational pages.
   - Protected routes split into **customer dashboards** and **admin dashboards**, which is a key architectural boundary.

3. **Layout system**
   - `src/Layouts/Layout.jsx` appears to provide the shared shell for public pages.
   - `src/Layouts/DashboardLayout.jsx` is the authenticated dashboard shell, likely containing sidebar navigation and nested dashboard content.
   - This separates the app into two major UI surfaces: **public site** and **authenticated workspace**.

4. **Global state and app-wide context**
   - The main cross-cutting providers are:
     - `AuthProvider` for Firebase-backed authentication/session state
     - `CartProvider` for ordering state
     - `TitleProvider` for page/document title handling
   - These providers are the main client-side state boundaries and likely wrap the app near `main.jsx`.

5. **Authentication and authorization flow**
   - Authentication is client-managed through **Firebase Auth** (`src/config/firebaseConfig.js`).
   - Role-based access is enforced on the frontend using route guards and hooks like `useAuth`, `useAdmin`, and `useUsers`.
   - The app likely exchanges Firebase identity for a backend-facing **JWT** via secure API calls, which is why there are separate `useAxiosPublic` and `useAxiosSecure` hooks.

6. **Data access layer**
   - Data fetching is abstracted into feature hooks under `src/hooks`:
     - menu, tables, bookings, orders, customers, users, cart, etc.
   - These hooks form the app’s server-state layer, insulating pages/components from direct API details.
   - `useAxiosPublic` and `useAxiosSecure` indicate a clear API boundary between unauthenticated and authenticated requests.

7. **Core business domains**
   - The app centers on three restaurant workflows:
     - **Menu browsing and item details**
     - **Table booking / reservations**
     - **Food ordering and payment**
   - Supporting admin workflows include menu/table CRUD, booking management, customer management, and order review.
   - The pages in `src/pages` map directly to these domain areas, making the architecture domain-driven rather than purely technical.

8. **Ordering and payment flow**
   - Cart logic lives in `CartProvider` plus `src/utils/cartUtils.js`.
   - Customers browse menu items, add them to cart, then move into `PlaceOrder`, `Cart`, `Payment`, and `PaymentSuccess`.
   - `src/components/Payment/CheckoutForm.jsx` suggests **Stripe** is the payment boundary, with the frontend handling checkout UI while the backend likely creates/validates payment intents.

9. **Booking and reservation flow**
   - Reservation features are split across booking-related pages, hooks, and modal components.
   - `BookTable`, `BookingModal`, `TableModal`, and `useBookings`/`useTable` point to a dedicated booking domain.
   - Booking state is likely created from the customer UI and then managed in admin views for approval/editing or operational handling.

10. **Admin vs customer dashboards**
   - The dashboard subtree is explicitly split into:
     - customer-facing views (`MyBookings`, `MyOrders`, profile/edit flows)
     - admin-facing views (`Dashboard`, `Customers`, `Orders`, `AddMenu`, `ModifyMenu`, `AddTable`, `ModifyTable`)
   - `DashboardSidebar` and the dashboard home components (`AdminHome`, `UserHome`, `DashboardHome`) define role-specific navigation and landing content.
   - This is the main functional separation in the app.

11. **Reusable UI component system**
   - The app uses a shared component library built from:
     - custom domain components (`FoodCard`, `ReviewSlider`, `ConfirmDialog`, etc.)
     - generated/shadcn-style primitives in `src/components/ui`
   - These primitives are the presentation layer foundation, while domain components compose them into menu cards, dialogs, drawers, forms, and modals.

12. **Notifications, metadata, and UX helpers**
   - `NotificationStack`, toast options, `DevelopmentBanner`, and `use-mobile` indicate client-side UX concerns are handled centrally.
   - `TitleProvider`/`useTitle` manage page metadata, which matters for a multi-page SPA with many user flows.
   - `App.css`, `index.css`, and Tailwind config indicate styling is utility-first with some global overrides.

13. **External service and deployment boundaries**
   - Key external dependencies that materially shape architecture are:
     - **Firebase Auth** for identity
     - **Stripe** for payments
     - **Express/MongoDB backend** for persistence and business APIs
     - **Vercel** for frontend deployment
   - The frontend is not responsible for persistence; it is a client orchestrating authenticated calls to the backend services.

14. **Overall architecture summary**
   - EssenWelt is a **modular React client** organized by **routes, layouts, domain pages, shared UI primitives, and data-fetching hooks**.
   - The main data flow is: **user interaction → contextual state/hook → API call to backend → UI update**, with Firebase and route guards controlling access.
   - The most important diagram boundaries are **public vs authenticated UI**, **customer vs admin workflows**, and **frontend vs backend/payment/auth services**.

Main entry points: [`src/Routes/Routes.jsx`](https://github.com/eh-munna/essen-welt/blob/main/src/Routes/Routes.jsx) (Routes), [`src/components/Dashboard/DashboardSidebar.jsx`](https://github.com/eh-munna/essen-welt/blob/main/src/components/Dashboard/DashboardSidebar.jsx) (Dashboard UI), [`src/context/authentication/AuthProvider.jsx`](https://github.com/eh-munna/essen-welt/blob/main/src/context/authentication/AuthProvider.jsx) (Auth state), [`src/hooks/useAxiosSecure.jsx`](https://github.com/eh-munna/essen-welt/blob/main/src/hooks/useAxiosSecure.jsx) (Secure API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_group_public["Public site"]
  node_node_layout_public["Site shell<br/>layout<br/>[Layout.jsx]"]
  node_node_public_pages["Public pages<br/>[Home.jsx]"]
  node_node_order_ui["Order flow<br/>feature-ui<br/>[Cart.jsx]"]
  node_node_payment(("Stripe checkout<br/>external<br/>[CheckoutForm.jsx]"))
end

subgraph group_group_auth["Access control"]
  node_node_main["App bootstrap<br/>entrypoint<br/>[main.jsx]"]
  node_node_routes["Routes<br/>router<br/>[Routes.jsx]"]
  node_node_private{{"Private gate<br/>route-guard<br/>[PrivateRoute.jsx]"}}
  node_node_adminroute{{"Admin gate<br/>route-guard<br/>[AdminRoute.jsx]"}}
  node_node_firebase(("Firebase auth<br/>external<br/>[firebaseConfig.js]"))
end

subgraph group_group_dash["Dashboards"]
  node_node_layout_dash["Dashboard shell<br/>layout"]
  node_node_dashboard_pages["Dash pages<br/>[Dashboard.jsx]"]
  node_node_dashboard_ui["Dashboard UI<br/>feature-ui"]
end

subgraph group_group_data["Data layer"]
  node_node_auth[("Auth state<br/>provider<br/>[AuthProvider.jsx]")]
  node_node_cart[("Cart state<br/>provider<br/>[CartProvider.jsx]")]
  node_node_title[("Title state<br/>provider<br/>[TitleProvider.jsx]")]
  node_node_api_public(("Public API<br/>hook<br/>[useAxiosPublic.jsx]"))
  node_node_api_secure(("Secure API<br/>hook<br/>[useAxiosSecure.jsx]"))
  node_node_menu_hooks(("Menu data<br/>hooks<br/>[useMenu.jsx]"))
  node_node_booking_hooks(("Booking data<br/>hooks<br/>[useBookings.jsx]"))
  node_node_order_hooks(("Order data<br/>hooks<br/>[useOrders.jsx]"))
  node_node_user_hooks(("User data<br/>hooks<br/>[useUsers.jsx]"))
end

subgraph group_group_ui["Shared UI"]
  node_node_menu_ui["Menu flow<br/>feature-ui<br/>[MenuItem.jsx]"]
  node_node_home_ui["Home features<br/>feature-ui<br/>[Hero.jsx]"]
  node_node_booking_ui["Booking UI<br/>feature-ui<br/>[BookTable.jsx]"]
  node_node_shared_ui["Shared UI kit<br/>ui-kit<br/>[button.jsx]"]
end

node_node_backend[("Backend API<br/>external-service")]

node_node_main -->|"wraps"| node_node_auth
node_node_main -->|"wraps"| node_node_cart
node_node_main -->|"wraps"| node_node_title
node_node_main -->|"mounts"| node_node_routes
node_node_routes -->|"uses"| node_node_layout_public
node_node_routes -->|"uses"| node_node_layout_dash
node_node_routes -->|"guards"| node_node_private
node_node_routes -->|"guards"| node_node_adminroute
node_node_private -->|"reads"| node_node_auth
node_node_adminroute -->|"reads"| node_node_auth
node_node_auth -->|"authenticates"| node_node_firebase
node_node_auth -->|"tokenizes"| node_node_api_secure
node_node_api_public -->|"calls"| node_node_backend
node_node_api_secure -->|"calls"| node_node_backend
node_node_menu_hooks -->|"fetches"| node_node_api_public
node_node_booking_hooks -->|"fetches"| node_node_api_secure
node_node_order_hooks -->|"fetches"| node_node_api_secure
node_node_user_hooks -->|"fetches"| node_node_api_secure
node_node_public_pages -->|"composes"| node_node_menu_ui
node_node_public_pages -->|"composes"| node_node_home_ui
node_node_public_pages -->|"composes"| node_node_booking_ui
node_node_order_ui -->|"reads"| node_node_cart
node_node_order_ui -->|"uses"| node_node_payment
node_node_dashboard_pages -->|"composes"| node_node_dashboard_ui
node_node_dashboard_pages -->|"protected by"| node_node_private
node_node_dashboard_pages -->|"protected by"| node_node_adminroute
node_node_dashboard_ui -->|"uses"| node_node_user_hooks
node_node_dashboard_ui -->|"uses"| node_node_order_hooks
node_node_dashboard_ui -->|"uses"| node_node_booking_hooks
node_node_shared_ui -->|"supports"| node_node_public_pages
node_node_shared_ui -->|"supports"| node_node_dashboard_ui
node_node_shared_ui -->|"supports"| node_node_menu_ui

click node_node_main "https://github.com/eh-munna/essen-welt/blob/main/src/main.jsx"
click node_node_routes "https://github.com/eh-munna/essen-welt/blob/main/src/Routes/Routes.jsx"
click node_node_private "https://github.com/eh-munna/essen-welt/blob/main/src/Routes/PrivateRoute.jsx"
click node_node_adminroute "https://github.com/eh-munna/essen-welt/blob/main/src/Routes/AdminRoute.jsx"
click node_node_auth "https://github.com/eh-munna/essen-welt/blob/main/src/context/authentication/AuthProvider.jsx"
click node_node_cart "https://github.com/eh-munna/essen-welt/blob/main/src/context/cart/CartProvider.jsx"
click node_node_title "https://github.com/eh-munna/essen-welt/blob/main/src/context/Title/TitleProvider.jsx"
click node_node_api_public "https://github.com/eh-munna/essen-welt/blob/main/src/hooks/useAxiosPublic.jsx"
click node_node_api_secure "https://github.com/eh-munna/essen-welt/blob/main/src/hooks/useAxiosSecure.jsx"
click node_node_menu_hooks "https://github.com/eh-munna/essen-welt/blob/main/src/hooks/useMenu.jsx"
click node_node_booking_hooks "https://github.com/eh-munna/essen-welt/blob/main/src/hooks/useBookings.jsx"
click node_node_order_hooks "https://github.com/eh-munna/essen-welt/blob/main/src/hooks/useOrders.jsx"
click node_node_user_hooks "https://github.com/eh-munna/essen-welt/blob/main/src/hooks/useUsers.jsx"
click node_node_layout_public "https://github.com/eh-munna/essen-welt/blob/main/src/Layouts/Layout.jsx"
click node_node_layout_dash "https://github.com/eh-munna/essen-welt/blob/main/src/Layouts/DashboardLayout.jsx"
click node_node_public_pages "https://github.com/eh-munna/essen-welt/blob/main/src/pages/Home.jsx"
click node_node_menu_ui "https://github.com/eh-munna/essen-welt/blob/main/src/components/Menu/MenuItem.jsx"
click node_node_home_ui "https://github.com/eh-munna/essen-welt/blob/main/src/components/Home/Hero.jsx"
click node_node_booking_ui "https://github.com/eh-munna/essen-welt/blob/main/src/components/Home/BookTable.jsx"
click node_node_order_ui "https://github.com/eh-munna/essen-welt/blob/main/src/pages/Cart.jsx"
click node_node_dashboard_pages "https://github.com/eh-munna/essen-welt/blob/main/src/pages/Dashboard.jsx"
click node_node_dashboard_ui "https://github.com/eh-munna/essen-welt/blob/main/src/components/Dashboard/DashboardSidebar.jsx"
click node_node_shared_ui "https://github.com/eh-munna/essen-welt/blob/main/src/components/ui/button.jsx"
click node_node_firebase "https://github.com/eh-munna/essen-welt/blob/main/src/config/firebaseConfig.js"
click node_node_payment "https://github.com/eh-munna/essen-welt/blob/main/src/components/Payment/CheckoutForm.jsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_node_layout_public,node_node_public_pages,node_node_order_ui,node_node_payment toneBlue
class node_node_main,node_node_routes,node_node_private,node_node_adminroute,node_node_firebase toneAmber
class node_node_layout_dash,node_node_dashboard_pages,node_node_dashboard_ui toneMint
class node_node_auth,node_node_cart,node_node_title,node_node_api_public,node_node_api_secure,node_node_menu_hooks,node_node_booking_hooks,node_node_order_hooks,node_node_user_hooks toneRose
class node_node_menu_ui,node_node_home_ui,node_node_booking_ui,node_node_shared_ui toneIndigo
class node_node_backend toneNeutral
```

## Components

### Public site

Marketing and unauthenticated restaurant browsing

- [Site shell](https://github.com/eh-munna/essen-welt/blob/main/src/Layouts/Layout.jsx): layout · Shared public page chrome · `src/Layouts/Layout.jsx`
- [Public pages](https://github.com/eh-munna/essen-welt/blob/main/src/pages/Home.jsx): pages · Home, menu, about, careers, contact, auth pages · `src/pages/Home.jsx`
- [Order flow](https://github.com/eh-munna/essen-welt/blob/main/src/pages/Cart.jsx): feature-ui · Cart, checkout, and payment success screens · `src/pages/Cart.jsx`
- [Stripe checkout](https://github.com/eh-munna/essen-welt/blob/main/src/components/Payment/CheckoutForm.jsx): external · Payment form boundary for card checkout · `src/components/Payment/CheckoutForm.jsx`

### Access control

Auth, role checks, and route protection

- [App bootstrap](https://github.com/eh-munna/essen-welt/blob/main/src/main.jsx): entrypoint · Wires providers and the root SPA · `src/main.jsx`
- [Routes](https://github.com/eh-munna/essen-welt/blob/main/src/Routes/Routes.jsx): router · Defines top-level navigation and guarded branches · `src/Routes/Routes.jsx`
- [Private gate](https://github.com/eh-munna/essen-welt/blob/main/src/Routes/PrivateRoute.jsx): route-guard · Blocks unauthenticated access · `src/Routes/PrivateRoute.jsx`
- [Admin gate](https://github.com/eh-munna/essen-welt/blob/main/src/Routes/AdminRoute.jsx): route-guard · Restricts admin-only pages · `src/Routes/AdminRoute.jsx`
- [Firebase auth](https://github.com/eh-munna/essen-welt/blob/main/src/config/firebaseConfig.js): external · Identity and session provider · `src/config/firebaseConfig.js`

### Dashboards

Customer and admin authenticated workspaces

- [Dashboard shell](https://github.com/eh-munna/essen-welt/blob/main/src/Layouts/DashboardLayout.jsx): layout · Authenticated workspace shell · `src/Layouts/DashboardLayout.jsx`
- [Dash pages](https://github.com/eh-munna/essen-welt/blob/main/src/pages/Dashboard.jsx): pages · Customer and admin dashboard screens · `src/pages/Dashboard.jsx`
- [Dashboard UI](https://github.com/eh-munna/essen-welt/blob/main/src/components/Dashboard/DashboardSidebar.jsx): feature-ui · Sidebar and role-specific dashboard home views · `src/components/Dashboard/DashboardSidebar.jsx`

### Data layer

Context, hooks, and API integration

- [Auth state](https://github.com/eh-munna/essen-welt/blob/main/src/context/authentication/AuthProvider.jsx): provider · Firebase-backed session and user state · `src/context/authentication/AuthProvider.jsx`
- [Cart state](https://github.com/eh-munna/essen-welt/blob/main/src/context/cart/CartProvider.jsx): provider · Client ordering state and cart actions · `src/context/cart/CartProvider.jsx`
- [Title state](https://github.com/eh-munna/essen-welt/blob/main/src/context/Title/TitleProvider.jsx): provider · Manages document and page titles · `src/context/Title/TitleProvider.jsx`
- [Public API](https://github.com/eh-munna/essen-welt/blob/main/src/hooks/useAxiosPublic.jsx): hook · Unauthenticated backend requests · `src/hooks/useAxiosPublic.jsx`
- [Secure API](https://github.com/eh-munna/essen-welt/blob/main/src/hooks/useAxiosSecure.jsx): hook · Authenticated backend requests · `src/hooks/useAxiosSecure.jsx`
- [Menu data](https://github.com/eh-munna/essen-welt/blob/main/src/hooks/useMenu.jsx): hooks · Menu fetching and item details data flow · `src/hooks/useMenu.jsx`
- [Booking data](https://github.com/eh-munna/essen-welt/blob/main/src/hooks/useBookings.jsx): hooks · Reservation and table availability data flow · `src/hooks/useBookings.jsx`
- [Order data](https://github.com/eh-munna/essen-welt/blob/main/src/hooks/useOrders.jsx): hooks · Customer and admin order queries · `src/hooks/useOrders.jsx`
- [User data](https://github.com/eh-munna/essen-welt/blob/main/src/hooks/useUsers.jsx): hooks · Customer and admin user management data · `src/hooks/useUsers.jsx`

### Shared UI

Reusable components and design primitives

- [Menu flow](https://github.com/eh-munna/essen-welt/blob/main/src/components/Menu/MenuItem.jsx): feature-ui · Menu listing, item detail, and menu dialogs · `src/components/Menu/MenuItem.jsx`
- [Home features](https://github.com/eh-munna/essen-welt/blob/main/src/components/Home/Hero.jsx): feature-ui · Hero, popular menu, reviews, and booking entry · `src/components/Home/Hero.jsx`
- [Booking UI](https://github.com/eh-munna/essen-welt/blob/main/src/components/Home/BookTable.jsx): feature-ui · Table booking modals and time selection · `src/components/Home/BookTable.jsx`
- [Shared UI kit](https://github.com/eh-munna/essen-welt/blob/main/src/components/ui/button.jsx): ui-kit · Reusable primitives, dialogs, cards, forms, and feedback · `src/components/ui/button.jsx`

### Other components

- **Backend API**: external-service · Separate server for data, auth-backed actions, bookings, orders, and admin operations

## Connections

- App bootstrap → Auth state: wraps · Provides authentication state to the app
- App bootstrap → Cart state: wraps · Provides cart state globally
- App bootstrap → Title state: wraps · Provides title management globally
- App bootstrap → Routes: mounts · Bootstraps the router tree
- Routes → Site shell: uses · Public routes render inside the site shell
- Routes → Dashboard shell: uses · Protected routes render inside the dashboard shell
- Routes → Private gate: guards · Applies authentication checks to protected routes
- Routes → Admin gate: guards · Applies admin checks to admin routes
- Private gate → Auth state: reads · Checks current login state
- Admin gate → Auth state: reads · Checks user identity and role
- Auth state → Firebase auth: authenticates · Delegates session management to Firebase
- Auth state → Secure API: tokenizes · Provides authenticated requests with user context
- Public API → Backend API: calls · Fetches public restaurant data
- Secure API → Backend API: calls · Fetches protected and mutating data
- Menu data → Public API: fetches · Loads menu browsing data
- Booking data → Secure API: fetches · Loads and updates reservations and tables
- Order data → Secure API: fetches · Loads and updates customer and admin orders
- User data → Secure API: fetches · Loads users, customers, and profile edits
- Public pages → Menu flow: composes · Menu page uses menu presentation components
- Public pages → Home features: composes · Home page uses hero and content sections
- Public pages → Booking UI: composes · Booking entry flows through reservation UI
- Order flow → Cart state: reads · Order screens consume cart state
- Order flow → Stripe checkout: uses · Checkout passes through Stripe payment form
- Dash pages → Dashboard UI: composes · Dashboard screens are organized by role navigation and home views
- Dash pages → Private gate: protected by · Customer dashboard routes require login
- Dash pages → Admin gate: protected by · Admin pages require admin access
- Dashboard UI → User data: uses · Dashboard views depend on user data hooks
- Dashboard UI → Order data: uses · Dashboard views depend on order data hooks
- Dashboard UI → Booking data: uses · Dashboard views depend on booking data hooks
- Shared UI kit → Public pages: supports · Shared primitives underpin page-level UI
- Shared UI kit → Dashboard UI: supports · Shared primitives underpin dashboard UI
- Shared UI kit → Menu flow: supports · Shared primitives underpin menu components