# mahi8026/ticket-bari architecture

> Architecture diagram of the GitHub repository mahi8026/ticket-bari, 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/mahi8026/ticket-bari
- Repository: https://github.com/mahi8026/ticket-bari

## Overview

1. **Overall shape**
   Ticket Bari is a React single-page frontend for a bus ticket marketplace. It is built with Vite, deployed on Firebase Hosting, and uses client-side routing for all user flows. The repository contains no backend implementation; instead, it calls an external Node/Express API through secure Axios hooks.

2. **Primary architectural boundary**
   The app is split between:
   - **Public customer-facing flows**: browse tickets, view details, book seats, pay
   - **Authenticated role-based areas**: user dashboard, admin dashboard, vendor routes
   - **Shared platform services**: auth, theming, secure API access, SEO, loading/feedback

3. **Routing and layout layer**
   `src/Routes/Routes.jsx` defines the route graph, with route guards in `PrivateRoute`, `AdminRoute`, and `VendorRoute`. Page composition is handled by two main shells:
   - `MainLayout` for the public site
   - `DashboardLayout` for authenticated dashboard sections  
   This is the key structural boundary for any architecture diagram.

4. **Authentication and session management**
   Firebase Authentication is the identity layer, wired through `AuthProvider` and the `useAuth` hook. The app supports login/register and Google social login, then redirects users according to role. Role resolution is abstracted behind `useRole`, while `useUserProfile` suggests profile-backed identity data beyond Firebase auth state.

5. **Backend data access**
   `useAxiosSecure` is the main API boundary for authenticated requests to the backend service. This is likely where JWT or Firebase token attachment happens before reaching the server. From the frontend perspective, all protected business data—tickets, bookings, roles, payment records—flows through this layer.

6. **Ticket discovery and browsing**
   The public experience centers on `Home`, `AllTickets`, and `TicketDetails`, with supporting pages like `About`, `Blog`, `Help`, and `Contact`. `TicketCard` and `BookingModal` are reusable UI units for listing and selection. `SeatSelectionDemo`, `SeatMap`, and `SeatSelectionModal` indicate seat-picking is a dedicated interaction model, not just a simple form.

7. **Booking and payment flow**
   The booking pipeline is split across modal-driven seat selection, checkout, and payment components. `CheckoutForm`, `PaymentForm`, `PaymentMethodSelector`, and `MobileBankingPayment` show a modular payment experience with Stripe integration. `src/Pages/Dashboard/CheckoutForm.jsx` and `src/components/CheckoutForm.jsx` suggest the checkout flow is reused in more than one context.

8. **User dashboard subsystem**
   The user area contains `MyBookings`, `Payment`, `TransactionHistory`, and `UserProfile`. This section represents the post-booking lifecycle: reviewing reservations, completing or tracking payment, and viewing receipts/history. It is isolated from public browsing by dashboard routing and auth checks.

9. **Admin subsystem**
   Admin pages include `AdminHome`, `ManageTickets`, `ManageUsers`, and `AdvertiseTickets`. This implies a moderation/operations control plane for verifying content, managing roles, and promoting or suppressing ticket visibility. The README’s mention of fraud/banning and homepage advertisement toggles fits this admin boundary.

10. **Vendor subsystem**
   The route and folder scaffolding includes a vendor area, even though the listed files are sparse. Architecturally, this indicates a third role tier for operators who add/manage inventory and monitor booking requests. In diagrams, it should be shown as a protected dashboard branch parallel to user and admin.

11. **Cross-cutting UI systems**
   `Navbar`, `Footer`, `LoadingSpinner`, and `ThemeToggle` are shared shell components. `SEOHead` handles page metadata, while `PerformanceMonitor` suggests client-side performance instrumentation. These are global concerns applied across routes rather than tied to any single business flow.

12. **State and UX infrastructure**
   The repo uses React hooks for reusable stateful logic: theme, auth, role, profile, and secure API access. This keeps business pages thin and delegates platform concerns to hook/provider layers. The presence of SweetAlert2, React Query, Tailwind/DaisyUI, and Swiper in the README indicates a modern interactive frontend with cached data fetching and responsive UI behavior.

13. **Deployment/runtime constraints**
   Firebase Hosting is the production delivery layer, and `public/_redirects` plus `firebase.json` indicate SPA rewrite handling for client-side routes. `index.html`, `main.jsx`, and `App.jsx` form the app bootstrap chain, with `App` likely mounting providers, routing, and global shell components.

14. **What to emphasize in an architecture diagram**
   The clearest diagram should show:
   - Browser client at the center
   - Firebase Auth as the identity provider
   - External backend API behind `useAxiosSecure`
   - Role-gated route branches for User/Admin/Vendor
   - Booking/payment flow ending in Stripe
   - Shared layout/component layer spanning all pages

Main entry points: [`src/Routes/Routes.jsx`](https://github.com/mahi8026/ticket-bari/blob/main/src/Routes/Routes.jsx) (Routes), [`src/hooks/useAxiosSecure.jsx`](https://github.com/mahi8026/ticket-bari/blob/main/src/hooks/useAxiosSecure.jsx) (Secure API), [`src/App.jsx`](https://github.com/mahi8026/ticket-bari/blob/main/src/App.jsx) (App), [`src/components/Shared/Navbar.jsx`](https://github.com/mahi8026/ticket-bari/blob/main/src/components/Shared/Navbar.jsx) (Shared UI)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_g_shell["App Shell"]
  node_n_app["App<br/>bootstrap<br/>[App.jsx]"]
  node_n_routes["Routes<br/>router<br/>[Routes.jsx]"]
  node_n_main_layout["Main Layout<br/>[MainLayout.jsx]"]
  node_n_dash_layout["Dashboard Layout"]
end

subgraph group_g_identity["Identity & Access"]
  node_n_auth_provider["Auth Provider<br/>auth state<br/>[AuthProvider.jsx]"]
  node_n_use_auth["useAuth<br/>hook<br/>[useAuth.jsx]"]
  node_n_use_role["useRole<br/>hook<br/>[useRole.jsx]"]
  node_n_use_profile["useUserProfile<br/>hook<br/>[useUserProfile.jsx]"]
  node_n_private["Private Route<br/>route guard<br/>[PrivateRoute.jsx]"]
  node_n_admin_route["Admin Route<br/>route guard<br/>[AdminRoute.jsx]"]
  node_n_vendor_route["Vendor Route<br/>route guard<br/>[VendorRoute.jsx]"]
end

subgraph group_g_public["Public Flows"]
  node_n_home["Home<br/>public page<br/>[Home.jsx]"]
  node_n_all_tickets["All Tickets<br/>catalog page<br/>[AllTickets.jsx]"]
  node_n_ticket_details["Ticket Details<br/>detail page<br/>[TicketDetails.jsx]"]
  node_n_booking_modal["Booking Modal<br/>booking ui<br/>[BookingModal.jsx]"]
  node_n_seat_selection["Seat Selection<br/>interaction<br/>[SeatMap.jsx]"]
  node_n_checkout["Checkout<br/>payment flow<br/>[CheckoutForm.jsx]"]
  node_n_payment["Payment<br/>[PaymentForm.jsx]"]
end

subgraph group_g_dashboard["Dashboards"]
  node_n_user_dash["User Dashboard<br/>user area<br/>[MyBookings.jsx]"]
  node_n_admin_dash["Admin Dashboard<br/>admin area<br/>[AdminHome.jsx]"]
  node_n_vendor_dash["Vendor Dashboard<br/>vendor area"]
end

subgraph group_g_platform["Platform Services"]
  node_n_shared_ui["Shared UI<br/>ui system<br/>[Navbar.jsx]"]
  node_n_seo_monitor["SEO & Monitor<br/>cross-cutting<br/>[SEOHead.jsx]"]
  node_n_secure_api["Secure API<br/>api hook<br/>[useAxiosSecure.jsx]"]
  node_n_firebase_auth[("Firebase Auth<br/>identity provider<br/>[firebase.config.js]")]
end

node_n_app -->|"wraps"| node_n_auth_provider
node_n_app -->|"mounts"| node_n_routes
node_n_app -.->|"shares"| node_n_shared_ui
node_n_routes -->|"uses"| node_n_main_layout
node_n_routes -->|"uses"| node_n_dash_layout
node_n_routes -->|"protects"| node_n_private
node_n_routes -->|"protects"| node_n_admin_route
node_n_routes -->|"protects"| node_n_vendor_route
node_n_auth_provider -->|"backs"| node_n_firebase_auth
node_n_use_auth -->|"reads"| node_n_auth_provider
node_n_use_role -->|"queries"| node_n_secure_api
node_n_use_profile -->|"queries"| node_n_secure_api
node_n_private -->|"checks"| node_n_use_auth
node_n_admin_route -->|"checks"| node_n_use_role
node_n_vendor_route -->|"checks"| node_n_use_role
node_n_home -->|"renders in"| node_n_main_layout
node_n_all_tickets -->|"loads"| node_n_secure_api
node_n_ticket_details -->|"loads"| node_n_secure_api
node_n_ticket_details -->|"opens"| node_n_booking_modal
node_n_booking_modal -->|"advances to"| node_n_seat_selection
node_n_seat_selection -->|"confirms"| node_n_checkout
node_n_checkout -->|"hands off"| node_n_payment
node_n_payment -->|"submits"| node_n_secure_api
node_n_user_dash -->|"reads"| node_n_secure_api
node_n_admin_dash -->|"manages"| node_n_secure_api
node_n_vendor_dash -->|"operates on"| node_n_secure_api
node_n_shared_ui -.->|"composes"| node_n_main_layout
node_n_shared_ui -.->|"composes"| node_n_dash_layout
node_n_seo_monitor -.->|"supports"| node_n_routes

click node_n_app "https://github.com/mahi8026/ticket-bari/blob/main/src/App.jsx"
click node_n_routes "https://github.com/mahi8026/ticket-bari/blob/main/src/Routes/Routes.jsx"
click node_n_main_layout "https://github.com/mahi8026/ticket-bari/blob/main/src/Layout/MainLayout.jsx"
click node_n_dash_layout "https://github.com/mahi8026/ticket-bari/blob/main/src/Layout/DashboardLayout.jsx"
click node_n_auth_provider "https://github.com/mahi8026/ticket-bari/blob/main/src/providers/AuthProvider.jsx"
click node_n_use_auth "https://github.com/mahi8026/ticket-bari/blob/main/src/hooks/useAuth.jsx"
click node_n_use_role "https://github.com/mahi8026/ticket-bari/blob/main/src/hooks/useRole.jsx"
click node_n_use_profile "https://github.com/mahi8026/ticket-bari/blob/main/src/hooks/useUserProfile.jsx"
click node_n_private "https://github.com/mahi8026/ticket-bari/blob/main/src/Routes/PrivateRoute.jsx"
click node_n_admin_route "https://github.com/mahi8026/ticket-bari/blob/main/src/Routes/AdminRoute.jsx"
click node_n_vendor_route "https://github.com/mahi8026/ticket-bari/blob/main/src/Routes/VendorRoute.jsx"
click node_n_home "https://github.com/mahi8026/ticket-bari/blob/main/src/Pages/Home.jsx"
click node_n_all_tickets "https://github.com/mahi8026/ticket-bari/blob/main/src/Pages/AllTickets.jsx"
click node_n_ticket_details "https://github.com/mahi8026/ticket-bari/blob/main/src/Pages/TicketDetails.jsx"
click node_n_booking_modal "https://github.com/mahi8026/ticket-bari/blob/main/src/components/BookingModal.jsx"
click node_n_seat_selection "https://github.com/mahi8026/ticket-bari/blob/main/src/components/SeatSelection/SeatMap.jsx"
click node_n_checkout "https://github.com/mahi8026/ticket-bari/blob/main/src/components/CheckoutForm.jsx"
click node_n_payment "https://github.com/mahi8026/ticket-bari/blob/main/src/components/PaymentForm.jsx"
click node_n_user_dash "https://github.com/mahi8026/ticket-bari/blob/main/src/Pages/Dashboard/User/MyBookings.jsx"
click node_n_admin_dash "https://github.com/mahi8026/ticket-bari/blob/main/src/Pages/Dashboard/Admin/AdminHome.jsx"
click node_n_vendor_dash "https://github.com/mahi8026/ticket-bari/tree/main/src/Pages/Dashboard/Vendor"
click node_n_shared_ui "https://github.com/mahi8026/ticket-bari/blob/main/src/components/Shared/Navbar.jsx"
click node_n_seo_monitor "https://github.com/mahi8026/ticket-bari/blob/main/src/components/SEO/SEOHead.jsx"
click node_n_secure_api "https://github.com/mahi8026/ticket-bari/blob/main/src/hooks/useAxiosSecure.jsx"
click node_n_firebase_auth "https://github.com/mahi8026/ticket-bari/blob/main/src/firebase/firebase.config.js"

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_n_app,node_n_routes,node_n_main_layout,node_n_dash_layout toneBlue
class node_n_auth_provider,node_n_use_auth,node_n_use_role,node_n_use_profile,node_n_private,node_n_admin_route,node_n_vendor_route toneAmber
class node_n_home,node_n_all_tickets,node_n_ticket_details,node_n_booking_modal,node_n_seat_selection,node_n_checkout,node_n_payment toneMint
class node_n_user_dash,node_n_admin_dash,node_n_vendor_dash toneRose
class node_n_shared_ui,node_n_seo_monitor,node_n_secure_api,node_n_firebase_auth toneIndigo
```

## Components

### App Shell

Bootstrap, layouts, and route composition.

- [App](https://github.com/mahi8026/ticket-bari/blob/main/src/App.jsx): bootstrap · Root application bootstrap and provider assembly. · `src/App.jsx`
- [Routes](https://github.com/mahi8026/ticket-bari/blob/main/src/Routes/Routes.jsx): router · Client-side route graph and flow composition. · `src/Routes/Routes.jsx`
- [Main Layout](https://github.com/mahi8026/ticket-bari/blob/main/src/Layout/MainLayout.jsx): layout · Public site shell for browsing pages. · `src/Layout/MainLayout.jsx`
- [Dashboard Layout](https://github.com/mahi8026/ticket-bari/blob/main/src/Layout/DashboardLayout.jsx): layout · Authenticated dashboard shell and navigation. · `src/Layout/DashboardLayout.jsx`

### Identity & Access

Authentication, roles, and guarded routes.

- [Auth Provider](https://github.com/mahi8026/ticket-bari/blob/main/src/providers/AuthProvider.jsx): auth state · Firebase-backed session and identity context. · `src/providers/AuthProvider.jsx`
- [useAuth](https://github.com/mahi8026/ticket-bari/blob/main/src/hooks/useAuth.jsx): hook · Auth access hook for user/session state. · `src/hooks/useAuth.jsx`
- [useRole](https://github.com/mahi8026/ticket-bari/blob/main/src/hooks/useRole.jsx): hook · Role resolution for protected areas. · `src/hooks/useRole.jsx`
- [useUserProfile](https://github.com/mahi8026/ticket-bari/blob/main/src/hooks/useUserProfile.jsx): hook · Profile-backed identity data beyond auth state. · `src/hooks/useUserProfile.jsx`
- [Private Route](https://github.com/mahi8026/ticket-bari/blob/main/src/Routes/PrivateRoute.jsx): route guard · Authentication gate for protected routes. · `src/Routes/PrivateRoute.jsx`
- [Admin Route](https://github.com/mahi8026/ticket-bari/blob/main/src/Routes/AdminRoute.jsx): route guard · Role gate for admin sections. · `src/Routes/AdminRoute.jsx`
- [Vendor Route](https://github.com/mahi8026/ticket-bari/blob/main/src/Routes/VendorRoute.jsx): route guard · Role gate for vendor sections. · `src/Routes/VendorRoute.jsx`

### Public Flows

Customer-facing discovery and booking.

- [Home](https://github.com/mahi8026/ticket-bari/blob/main/src/Pages/Home.jsx): public page · Landing page for ticket discovery. · `src/Pages/Home.jsx`
- [All Tickets](https://github.com/mahi8026/ticket-bari/blob/main/src/Pages/AllTickets.jsx): catalog page · Browse and filter ticket inventory. · `src/Pages/AllTickets.jsx`
- [Ticket Details](https://github.com/mahi8026/ticket-bari/blob/main/src/Pages/TicketDetails.jsx): detail page · Ticket view with booking entry points. · `src/Pages/TicketDetails.jsx`
- [Booking Modal](https://github.com/mahi8026/ticket-bari/blob/main/src/components/BookingModal.jsx): booking ui · Reusable booking and seat-selection trigger. · `src/components/BookingModal.jsx`
- [Seat Selection](https://github.com/mahi8026/ticket-bari/blob/main/src/components/SeatSelection/SeatMap.jsx): interaction · Seat map and seat-picking flow. · `src/components/SeatSelection/SeatMap.jsx`
- [Checkout](https://github.com/mahi8026/ticket-bari/blob/main/src/components/CheckoutForm.jsx): payment flow · Checkout entry and payment preparation. · `src/components/CheckoutForm.jsx`
- [Payment](https://github.com/mahi8026/ticket-bari/blob/main/src/components/PaymentForm.jsx): payment · Stripe-oriented payment experience. · `src/components/PaymentForm.jsx`

### Dashboards

Authenticated user, admin, and vendor areas.

- [User Dashboard](https://github.com/mahi8026/ticket-bari/blob/main/src/Pages/Dashboard/User/MyBookings.jsx): user area · Post-booking personal account area. · `src/Pages/Dashboard/User/MyBookings.jsx`
- [Admin Dashboard](https://github.com/mahi8026/ticket-bari/blob/main/src/Pages/Dashboard/Admin/AdminHome.jsx): admin area · Operations control plane for tickets and users. · `src/Pages/Dashboard/Admin/AdminHome.jsx`
- [Vendor Dashboard](https://github.com/mahi8026/ticket-bari/tree/main/src/Pages/Dashboard/Vendor): vendor area · Protected vendor workspace for inventory and requests. · `src/Pages/Dashboard/Vendor`

### Platform Services

Shared UI, SEO, API, and runtime services.

- [Shared UI](https://github.com/mahi8026/ticket-bari/blob/main/src/components/Shared/Navbar.jsx): ui system · Navbar, footer, loading, and theme controls. · `src/components/Shared/Navbar.jsx`
- [SEO & Monitor](https://github.com/mahi8026/ticket-bari/blob/main/src/components/SEO/SEOHead.jsx): cross-cutting · Page metadata and client performance instrumentation. · `src/components/SEO/SEOHead.jsx`
- [Secure API](https://github.com/mahi8026/ticket-bari/blob/main/src/hooks/useAxiosSecure.jsx): api hook · Authenticated Axios boundary to the backend service. · `src/hooks/useAxiosSecure.jsx`
- [Firebase Auth](https://github.com/mahi8026/ticket-bari/blob/main/src/firebase/firebase.config.js): identity provider · External authentication provider used by the frontend. · `src/firebase/firebase.config.js`

## Connections

- App → Auth Provider: wraps · App initializes session context.
- App → Routes: mounts · App renders the route graph.
- App → Shared UI: shares · Global shell components span the app.
- Routes → Main Layout: uses · Public routes render in the main site shell.
- Routes → Dashboard Layout: uses · Dashboard routes render in the authenticated shell.
- Routes → Private Route: protects · Protected branches require authentication.
- Routes → Admin Route: protects · Admin branch requires admin role.
- Routes → Vendor Route: protects · Vendor branch requires vendor role.
- Auth Provider → Firebase Auth: backs · Identity state is sourced from Firebase.
- useAuth → Auth Provider: reads · Auth hook consumes provider state.
- useRole → Secure API: queries · Role resolution may depend on backend data.
- useUserProfile → Secure API: queries · Profile data is loaded through secure API access.
- Private Route → useAuth: checks · Authentication gate uses session state.
- Admin Route → useRole: checks · Admin gate uses resolved role.
- Vendor Route → useRole: checks · Vendor gate uses resolved role.
- Home → Main Layout: renders in · Landing page uses the public shell.
- All Tickets → Secure API: loads · Ticket catalog comes from backend data.
- Ticket Details → Secure API: loads · Ticket detail data comes from backend data.
- Ticket Details → Booking Modal: opens · Details page starts the booking flow.
- Booking Modal → Seat Selection: advances to · Booking proceeds into seat selection.
- Seat Selection → Checkout: confirms · Selected seats feed checkout.
- Checkout → Payment: hands off · Checkout transitions to payment.
- Payment → Secure API: submits · Payment records and booking updates flow through backend access.
- User Dashboard → Secure API: reads · Bookings, history, and profile data come from backend APIs.
- Admin Dashboard → Secure API: manages · Ticket and user administration uses protected API calls.
- Vendor Dashboard → Secure API: operates on · Vendor inventory and booking workflows use protected API calls.
- Shared UI → Main Layout: composes · Shared chrome is used in the public shell.
- Shared UI → Dashboard Layout: composes · Shared chrome is used in the dashboard shell.
- SEO & Monitor → Routes: supports · Metadata and instrumentation apply across routed pages.