# hasibur14/dinedorm-client architecture

> Architecture diagram of the GitHub repository hasibur14/dinedorm-client, 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/hasibur14/dinedorm-client
- Repository: https://github.com/hasibur14/dinedorm-client

## Overview

1. **Overall shape**
   - This is a **single-page React frontend** built with **Vite** and styled with **Tailwind CSS**.
   - The repository is primarily the client for “Dine Dorm”; the README indicates it talks to a separate **Node/MongoDB backend** for meals, reviews, users, JWT auth, and Stripe payments.

2. **App entry and shell**
   - The runtime starts from `index.html` → `src/main.jsx`.
   - Global styling lives in `src/index.css`.
   - The app shell is split into two main presentation boundaries:
     - `src/Layout/Main.jsx` for the public-facing site
     - `src/Layout/DashboardLayout.jsx` for authenticated dashboard screens

3. **Routing and access control**
   - Route composition is centralized in `src/Routes/Routes.jsx`.
   - Protected navigation is enforced with:
     - `src/Routes/PrivetRoute.jsx` for authenticated routes
     - `src/Routes/AdminRoute.jsx` for admin-only routes
   - This creates the main boundary between public pages, user dashboard pages, and admin dashboard pages.

4. **Authentication and identity**
   - Firebase is the client-side auth integration point via `src/firebase/firebase.config.js`.
   - `src/Provider/AuthProvider.jsx` likely exposes auth state and session actions to the rest of the app.
   - `src/hooks/useAuth.jsx` and `src/components/SocialLogin/SocialLogin.jsx` suggest multiple auth entry points, including social sign-in.
   - The app uses **JWT** for secured backend requests, separate from Firebase’s auth session.

5. **API/data access layer**
   - Server communication is abstracted behind custom hooks in `src/hooks/`.
   - `useAxiosPublic.jsx` and `useAxiosSecure.jsx` are the key transport boundaries:
     - public requests for unauthenticated data
     - secure requests that attach JWT and handle protected endpoints
   - Domain hooks such as `useMeal.jsx`, `useReview.jsx`, `useUser.jsx`, `useUpcomingMeal.jsx`, and `useRequestMeal.jsx` isolate page components from raw API details.

6. **Public site pages**
   - The public experience is organized under `src/pages/Home/` plus standalone pages like `About`, `Contact`, `AllMeals`, `MealDetails`, `UpcomingMeal`, and `JoinUs`.
   - Home is composed of modular sections: banner, meal categories, membership, testimonials, and “why choose us”.
   - `public/whyChooseUs.json` is a static content source used by the marketing/landing experience.

7. **Meal discovery and content browsing**
   - The meal-centric flow is a major domain area:
     - `AllMeals/Meals.jsx` for browsing and filtering
     - `MealDetails/MealDetails.jsx` for a meal’s full record and reviews
     - `Home/MealCategory/*` for category-based discovery
     - `UpcomingMeal/UpcomingMeal.jsx` for teaser content tied to subscription upsell
   - The README’s search/filter feature is reflected in this area, where pages likely consume meal hooks and render category/price/keyword-driven views.

8. **Payments and premium flow**
   - The premium subscription path is handled in `src/pages/Home/Checkout/`.
   - `Checkout.jsx` and `CheckoutForm.jsx` indicate a dedicated payment boundary, with Stripe mentioned in the README.
   - This flow likely connects the UI to a backend payment intent endpoint, then updates user membership status after successful payment.

9. **User dashboard subsystem**
   - User-specific state and actions live under `src/pages/Dashboard/User/`.
   - Main features:
     - `MyProfile` for account info
     - `MyReviews` and `ReviewEdit` for review management
     - `RequestedMeals` for meal requests
     - `PaymentHistory` for subscriptions/payments
   - These screens are protected by the auth/JWT layer and use secure API hooks.

10. **Admin dashboard subsystem**
   - Admin functions are grouped under `src/pages/Dashboard/Admin/`.
   - This area covers:
     - meal creation and updates
     - meal publication/serving workflow
     - review moderation
     - user management
     - upcoming meal scheduling
     - admin profile
   - `AdminRoute.jsx` is the boundary that keeps this area separate from normal users.

11. **Shared UI and cross-cutting components**
   - Reusable visual elements live in `src/components/`:
     - titles, containers, loading state, notifications, review modal, social login
   - Shared navigation and chrome live in `src/pages/Shared/`:
     - `Navbar`, `Sidebar`, `Footer`, and dropdown menus
   - These components form the common UI layer used across both public pages and dashboard views.

12. **Stateful interaction patterns**
   - `NotificationDropDown` and `ReviewModal` indicate modal/dropdown-driven interactions layered on top of page data.
   - `LoadingSpinner.jsx` represents async fetching states across the app.
   - The app likely follows a pattern of: page component → custom hook → axios client → backend → render/update UI state.

13. **Deployment and infrastructure**
   - `firebase.json`, `.firebaserc`, and the `.firebase/` directory show the frontend is deployed on **Firebase Hosting**.
   - The live site is hosted at the Firebase URL in the README.
   - Build tooling is standard Vite with Tailwind/PostCSS and ESLint, so the repo is focused on client delivery rather than backend runtime concerns.

14. **What to show in an architecture diagram**
   - Draw the frontend as a React SPA with three major zones:
     - public marketing/meals browsing
     - authenticated user dashboard
     - admin dashboard
   - Put **AuthProvider/Firebase auth** and **JWT-secured axios clients** as shared infrastructure services across all protected flows.
   - Treat the backend as an external system providing meals, reviews, users, requests, payments, and admin mutations; Firebase Hosting is the deployment target for the client.

Main entry points: [`src/hooks/useAxiosSecure.jsx`](https://github.com/hasibur14/dinedorm-client/blob/main/src/hooks/useAxiosSecure.jsx) (Secure API), [`src/hooks/useMeal.jsx`](https://github.com/hasibur14/dinedorm-client/blob/main/src/hooks/useMeal.jsx) (Meal Hooks), [`src/Routes/Routes.jsx`](https://github.com/hasibur14/dinedorm-client/blob/main/src/Routes/Routes.jsx) (Routes), [`src/pages/Dashboard/Admin/AddMeals/AddMeals.jsx`](https://github.com/hasibur14/dinedorm-client/blob/main/src/pages/Dashboard/Admin/AddMeals/AddMeals.jsx) (Admin Dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_index_html["index.html<br/>entry document<br/>[index.html]"]
  node_main(("main.jsx<br/>react entry<br/>[main.jsx]"))
  node_routes["Routes<br/>route map<br/>[Routes.jsx]"]
  node_main_layout["Main Shell<br/>public layout<br/>[Main.jsx]"]
  node_dashboard_layout["Dash Shell<br/>dashboard layout"]
  node_privet_route{{"Private Route<br/>route guard<br/>[PrivetRoute.jsx]"}}
  node_admin_route{{"Admin Route<br/>route guard<br/>[AdminRoute.jsx]"}}
end

subgraph group_public["Public experience"]
  node_home["Home<br/>landing page<br/>[Home.jsx]"]
  node_meals["All Meals<br/>browse page<br/>[Meals.jsx]"]
  node_meal_details["Meal Details<br/>detail page<br/>[MealDetails.jsx]"]
  node_checkout["Checkout<br/>payment flow<br/>[Checkout.jsx]"]
end

subgraph group_dashboard["Dashboard"]
  node_user_dash["User Dashboard<br/>user area<br/>[MyProfile.jsx]"]
  node_admin_dash["Admin Dashboard<br/>admin area<br/>[AddMeals.jsx]"]
end

subgraph group_shared["Shared UI"]
  node_shared_ui["Shared UI<br/>reusable components<br/>[BannerTitle.jsx]"]
  node_navbar["Navbar<br/>site chrome<br/>[Navbar.jsx]"]
  node_sidebar["Sidebar<br/>dashboard chrome<br/>[Sidebar.jsx]"]
end

subgraph group_data["Data layer"]
  node_auth_provider["AuthProvider<br/>session context<br/>[AuthProvider.jsx]"]
  node_axios_public["Public API<br/>http client<br/>[useAxiosPublic.jsx]"]
  node_axios_secure["Secure API<br/>http client<br/>[useAxiosSecure.jsx]"]
  node_meal_hooks["Meal Hooks<br/>domain hooks<br/>[useMeal.jsx]"]
  node_review_hooks["Review Hooks<br/>domain hooks<br/>[useReview.jsx]"]
  node_user_hooks["User Hooks<br/>domain hooks<br/>[useUser.jsx]"]
  node_request_hooks["Request Hooks<br/>domain hooks<br/>[useRequestMeal.jsx]"]
  node_upcoming_hooks["Upcoming Hooks<br/>domain hooks"]
end

subgraph group_infra["Infrastructure"]
  node_firebase_auth["Firebase Auth<br/>auth config<br/>[firebase.config.js]"]
  node_hosting[("Firebase Hosting<br/>deployment target<br/>[firebase.json]")]
end

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

node_index_html -->|"loads"| node_main
node_main -->|"mounts"| node_routes
node_routes -->|"public shell"| node_main_layout
node_routes -->|"dashboard shell"| node_dashboard_layout
node_routes -->|"protects"| node_privet_route
node_routes -->|"protects"| node_admin_route
node_auth_provider -->|"auth state"| node_firebase_auth
node_privet_route -->|"checks"| node_auth_provider
node_admin_route -->|"checks"| node_auth_provider
node_axios_secure -->|"token"| node_auth_provider
node_axios_secure -->|"requests"| node_backend
node_axios_public -->|"requests"| node_backend
node_meal_hooks -->|"reads"| node_axios_public
node_meal_hooks -->|"mutates"| node_axios_secure
node_review_hooks -->|"reads/writes"| node_axios_secure
node_user_hooks -->|"reads"| node_axios_secure
node_request_hooks -->|"reads/writes"| node_axios_secure
node_upcoming_hooks -->|"reads"| node_axios_public
node_shared_ui -.->|"decorates"| node_home
node_navbar -->|"navigates"| node_home
node_sidebar -->|"navigates"| node_user_dash
node_sidebar -->|"navigates"| node_admin_dash
node_home -->|"consumes"| node_meal_hooks
node_home -->|"consumes"| node_upcoming_hooks
node_meals -->|"consumes"| node_meal_hooks
node_meal_details -->|"consumes"| node_meal_hooks
node_meal_details -->|"consumes"| node_review_hooks
node_checkout -->|"charges"| node_axios_secure
node_user_dash -->|"consumes"| node_request_hooks
node_user_dash -->|"consumes"| node_review_hooks
node_admin_dash -->|"consumes"| node_meal_hooks
node_admin_dash -->|"consumes"| node_user_hooks
node_admin_dash -->|"consumes"| node_review_hooks
node_hosting -->|"serves"| node_main
node_shared_ui -.->|"supports"| node_sidebar
node_shared_ui -.->|"supports"| node_navbar

click node_index_html "https://github.com/hasibur14/dinedorm-client/blob/main/index.html"
click node_main "https://github.com/hasibur14/dinedorm-client/blob/main/src/main.jsx"
click node_routes "https://github.com/hasibur14/dinedorm-client/blob/main/src/Routes/Routes.jsx"
click node_main_layout "https://github.com/hasibur14/dinedorm-client/blob/main/src/Layout/Main.jsx"
click node_dashboard_layout "https://github.com/hasibur14/dinedorm-client/blob/main/src/Layout/DashboardLayout.jsx"
click node_privet_route "https://github.com/hasibur14/dinedorm-client/blob/main/src/Routes/PrivetRoute.jsx"
click node_admin_route "https://github.com/hasibur14/dinedorm-client/blob/main/src/Routes/AdminRoute.jsx"
click node_auth_provider "https://github.com/hasibur14/dinedorm-client/blob/main/src/Provider/AuthProvider.jsx"
click node_firebase_auth "https://github.com/hasibur14/dinedorm-client/blob/main/src/firebase/firebase.config.js"
click node_axios_public "https://github.com/hasibur14/dinedorm-client/blob/main/src/hooks/useAxiosPublic.jsx"
click node_axios_secure "https://github.com/hasibur14/dinedorm-client/blob/main/src/hooks/useAxiosSecure.jsx"
click node_meal_hooks "https://github.com/hasibur14/dinedorm-client/blob/main/src/hooks/useMeal.jsx"
click node_review_hooks "https://github.com/hasibur14/dinedorm-client/blob/main/src/hooks/useReview.jsx"
click node_user_hooks "https://github.com/hasibur14/dinedorm-client/blob/main/src/hooks/useUser.jsx"
click node_request_hooks "https://github.com/hasibur14/dinedorm-client/blob/main/src/hooks/useRequestMeal.jsx"
click node_upcoming_hooks "https://github.com/hasibur14/dinedorm-client/blob/main/src/hooks/useUpcomingMeal.jsx"
click node_shared_ui "https://github.com/hasibur14/dinedorm-client/blob/main/src/components/BannerTitle/BannerTitle.jsx"
click node_navbar "https://github.com/hasibur14/dinedorm-client/blob/main/src/pages/Shared/Navbar/Navbar.jsx"
click node_sidebar "https://github.com/hasibur14/dinedorm-client/blob/main/src/pages/Shared/Sidebar/Sidebar.jsx"
click node_home "https://github.com/hasibur14/dinedorm-client/blob/main/src/pages/Home/Home/Home.jsx"
click node_meals "https://github.com/hasibur14/dinedorm-client/blob/main/src/pages/AllMeals/Meals.jsx"
click node_meal_details "https://github.com/hasibur14/dinedorm-client/blob/main/src/pages/MealDetails/MealDetails.jsx"
click node_checkout "https://github.com/hasibur14/dinedorm-client/blob/main/src/pages/Home/Checkout/Checkout.jsx"
click node_user_dash "https://github.com/hasibur14/dinedorm-client/blob/main/src/pages/Dashboard/User/MyProfile/MyProfile.jsx"
click node_admin_dash "https://github.com/hasibur14/dinedorm-client/blob/main/src/pages/Dashboard/Admin/AddMeals/AddMeals.jsx"
click node_hosting "https://github.com/hasibur14/dinedorm-client/blob/main/firebase.json"

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_index_html,node_main,node_routes,node_main_layout,node_dashboard_layout,node_privet_route,node_admin_route toneBlue
class node_home,node_meals,node_meal_details,node_checkout toneAmber
class node_user_dash,node_admin_dash toneMint
class node_shared_ui,node_navbar,node_sidebar toneRose
class node_auth_provider,node_axios_public,node_axios_secure,node_meal_hooks,node_review_hooks,node_user_hooks,node_request_hooks,node_upcoming_hooks toneIndigo
class node_firebase_auth,node_hosting toneTeal
class node_backend toneNeutral
```

## Components

### App shell

React SPA bootstrap and routing

- [index.html](https://github.com/hasibur14/dinedorm-client/blob/main/index.html): entry document · Vite entry document · `index.html`
- [main.jsx](https://github.com/hasibur14/dinedorm-client/blob/main/src/main.jsx): react entry · Bootstraps the SPA · `src/main.jsx`
- [Routes](https://github.com/hasibur14/dinedorm-client/blob/main/src/Routes/Routes.jsx): route map · Central route composition · `src/Routes/Routes.jsx`
- [Main Shell](https://github.com/hasibur14/dinedorm-client/blob/main/src/Layout/Main.jsx): public layout · Public-facing app shell · `src/Layout/Main.jsx`
- [Dash Shell](https://github.com/hasibur14/dinedorm-client/blob/main/src/Layout/DashboardLayout.jsx): dashboard layout · Authenticated dashboard shell · `src/Layout/DashboardLayout.jsx`
- [Private Route](https://github.com/hasibur14/dinedorm-client/blob/main/src/Routes/PrivetRoute.jsx): route guard · Authenticated route boundary · `src/Routes/PrivetRoute.jsx`
- [Admin Route](https://github.com/hasibur14/dinedorm-client/blob/main/src/Routes/AdminRoute.jsx): route guard · Admin-only route boundary · `src/Routes/AdminRoute.jsx`

### Public experience

Marketing, discovery, and checkout flows

- [Home](https://github.com/hasibur14/dinedorm-client/blob/main/src/pages/Home/Home/Home.jsx): landing page · Homepage composition · `src/pages/Home/Home/Home.jsx`
- [All Meals](https://github.com/hasibur14/dinedorm-client/blob/main/src/pages/AllMeals/Meals.jsx): browse page · Meal listing and filtering · `src/pages/AllMeals/Meals.jsx`
- [Meal Details](https://github.com/hasibur14/dinedorm-client/blob/main/src/pages/MealDetails/MealDetails.jsx): detail page · Single meal and reviews view · `src/pages/MealDetails/MealDetails.jsx`
- [Checkout](https://github.com/hasibur14/dinedorm-client/blob/main/src/pages/Home/Checkout/Checkout.jsx): payment flow · Stripe-backed premium purchase · `src/pages/Home/Checkout/Checkout.jsx`

### Dashboard

Protected user and admin screens

- [User Dashboard](https://github.com/hasibur14/dinedorm-client/blob/main/src/pages/Dashboard/User/MyProfile/MyProfile.jsx): user area · Protected member screens · `src/pages/Dashboard/User/MyProfile/MyProfile.jsx`
- [Admin Dashboard](https://github.com/hasibur14/dinedorm-client/blob/main/src/pages/Dashboard/Admin/AddMeals/AddMeals.jsx): admin area · Protected admin management screens · `src/pages/Dashboard/Admin/AddMeals/AddMeals.jsx`

### Shared UI

Reusable UI and chrome components

- [Shared UI](https://github.com/hasibur14/dinedorm-client/blob/main/src/components/BannerTitle/BannerTitle.jsx): reusable components · Titles, containers, loader, modal, notifications, social login · `src/components/BannerTitle/BannerTitle.jsx`
- [Navbar](https://github.com/hasibur14/dinedorm-client/blob/main/src/pages/Shared/Navbar/Navbar.jsx): site chrome · Top-level navigation · `src/pages/Shared/Navbar/Navbar.jsx`
- [Sidebar](https://github.com/hasibur14/dinedorm-client/blob/main/src/pages/Shared/Sidebar/Sidebar.jsx): dashboard chrome · Dashboard navigation rail · `src/pages/Shared/Sidebar/Sidebar.jsx`

### Data layer

Auth, API, and domain hooks

- [AuthProvider](https://github.com/hasibur14/dinedorm-client/blob/main/src/Provider/AuthProvider.jsx): session context · Exposes auth state and actions · `src/Provider/AuthProvider.jsx`
- [Public API](https://github.com/hasibur14/dinedorm-client/blob/main/src/hooks/useAxiosPublic.jsx): http client · Unauthenticated backend requests · `src/hooks/useAxiosPublic.jsx`
- [Secure API](https://github.com/hasibur14/dinedorm-client/blob/main/src/hooks/useAxiosSecure.jsx): http client · JWT-protected backend requests · `src/hooks/useAxiosSecure.jsx`
- [Meal Hooks](https://github.com/hasibur14/dinedorm-client/blob/main/src/hooks/useMeal.jsx): domain hooks · Meal discovery and details data · `src/hooks/useMeal.jsx`
- [Review Hooks](https://github.com/hasibur14/dinedorm-client/blob/main/src/hooks/useReview.jsx): domain hooks · Review fetch and mutation access · `src/hooks/useReview.jsx`
- [User Hooks](https://github.com/hasibur14/dinedorm-client/blob/main/src/hooks/useUser.jsx): domain hooks · User and role lookup · `src/hooks/useUser.jsx`
- [Request Hooks](https://github.com/hasibur14/dinedorm-client/blob/main/src/hooks/useRequestMeal.jsx): domain hooks · Requested meal workflows · `src/hooks/useRequestMeal.jsx`
- [Upcoming Hooks](https://github.com/hasibur14/dinedorm-client/blob/main/src/hooks/useUpcomingMeal.jsx): domain hooks · Upcoming meal data access · `src/hooks/useUpcomingMeal.jsx`

### Infrastructure

Firebase and deployment configuration

- [Firebase Auth](https://github.com/hasibur14/dinedorm-client/blob/main/src/firebase/firebase.config.js): auth config · Client auth integration · `src/firebase/firebase.config.js`
- [Firebase Hosting](https://github.com/hasibur14/dinedorm-client/blob/main/firebase.json): deployment target · Frontend deployment and hosting · `firebase.json`

### Other components

- **Backend API**: external service · Meals, reviews, users, auth, and payments

## Connections

- index.html → main.jsx: loads · Document loads the React entry
- main.jsx → Routes: mounts · App bootstrap renders route tree
- Routes → Main Shell: public shell · Public routes render in main layout
- Routes → Dash Shell: dashboard shell · Protected routes render in dashboard layout
- Routes → Private Route: protects · Authenticated pages are gated
- Routes → Admin Route: protects · Admin pages are gated
- AuthProvider → Firebase Auth: auth state · Session is backed by Firebase auth
- Private Route → AuthProvider: checks · Uses auth context for access control
- Admin Route → AuthProvider: checks · Uses auth context and role state
- Secure API → AuthProvider: token · Attaches authenticated session token
- Secure API → Backend API: requests · Protected API calls hit backend
- Public API → Backend API: requests · Public API calls hit backend
- Meal Hooks → Public API: reads · Meal browsing uses public transport
- Meal Hooks → Secure API: mutates · Some meal actions require secure transport
- Review Hooks → Secure API: reads/writes · Review operations are authenticated
- User Hooks → Secure API: reads · User and role queries are secured
- Request Hooks → Secure API: reads/writes · Requested meal workflow is secured
- Upcoming Hooks → Public API: reads · Upcoming meals can be shown publicly
- Shared UI → Home: decorates · Shared components are used across pages
- Navbar → Home: navigates · Primary public navigation
- Sidebar → User Dashboard: navigates · User dashboard navigation
- Sidebar → Admin Dashboard: navigates · Admin dashboard navigation
- Home → Meal Hooks: consumes · Homepage sections render meal data
- Home → Upcoming Hooks: consumes · Upsell sections show upcoming meals
- All Meals → Meal Hooks: consumes · Listing page fetches browsable meals
- Meal Details → Meal Hooks: consumes · Details page loads one meal and reviews
- Meal Details → Review Hooks: consumes · Review interactions live here
- Checkout → Secure API: charges · Payment flow calls secure backend endpoints
- User Dashboard → Request Hooks: consumes · User dashboard manages requests
- User Dashboard → Review Hooks: consumes · User dashboard manages reviews
- Admin Dashboard → Meal Hooks: consumes · Admin screens manage meals
- Admin Dashboard → User Hooks: consumes · Admin screens manage users and roles
- Admin Dashboard → Review Hooks: consumes · Admin screens moderate reviews
- Firebase Hosting → main.jsx: serves · Firebase Hosting delivers the SPA
- Shared UI → Sidebar: supports · Shared UI underpins chrome components
- Shared UI → Navbar: supports · Shared UI underpins navigation