# piyushpb/airplane-ticket-booking architecture

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

- Interactive diagram: https://gitdiagram.com/piyushpb/airplane-ticket-booking
- Repository: https://github.com/piyushpb/airplane-ticket-booking

## Overview

1. **Overall shape**
   - This is a classic two-tier MERN application: a React single-page frontend and an Express/Node backend, with MongoDB-style document models on the server.
   - The product domain is airline ticket search, booking, ticket issuance, and QR-based verification, plus a separate admin console.

2. **Frontend boundary**
   - The `frontend/` app is the user-facing client, built with React and Vite, styled with Tailwind/PostCSS.
   - It is deployed through Firebase Hosting, as shown by the `.firebase`, `firebase.json`, and `.firebaserc` files.

3. **Frontend routing and page structure**
   - Application-level navigation lives in `src/Routes/AppRoutes.jsx`, with pages under `src/page/` such as Home, Login, SignUp, Profile, TicketBooking, TicketSearchPage, CheckoutPage, and Ticket.
   - This suggests a routed SPA that switches between search, booking, account, and ticket views without full page reloads.

4. **Frontend feature areas**
   - Reusable customer-facing UI is organized under `src/components/`, with dedicated pieces for hero sections, flight cards, booking forms, fare summaries, passenger details, seat reservation, ticket review, and e-ticket rendering.
   - The separation indicates a multi-step booking flow rather than a single monolithic booking screen.

5. **Admin subsystem**
   - The `src/admin/` subtree is a distinct admin workspace with its own login, dashboard, airline/flight creation screens, and ticket verification tools.
   - The presence of `qr-reader` components and `VerifyTicket.jsx` shows that admin staff can scan or validate tickets at the gate or during check-in.

6. **Client-side state and integration points**
   - `src/context/authContext.jsx` implies shared authentication state across the SPA, likely controlling protected routes and user session behavior.
   - `src/Config/Config.js` and `src/utils/uploadImageToCloudinary.js` indicate centralized client configuration and image upload integration, probably for airline logos or related admin-managed assets.

7. **Backend API boundary**
   - The backend is a standalone Express application in `backend/`, bootstrapped from `index.js`.
   - API endpoints are split by domain in `backend/Routes/`: `auth.js`, `flights.js`, `booking.js`, and `tickets.js`, which maps cleanly to the major business capabilities.

8. **Backend business logic**
   - Controllers in `backend/controller/` hold the request-handling logic for auth, flight management, booking, and ticket operations.
   - This indicates a thin route layer with domain logic centralized in controllers, a common pattern that makes the backend easier to diagram by business capability.

9. **Persistence and domain model**
   - Data is modeled in `backend/models/` with schemas for `user`, `airline`, `flight`, `booking`, and `ticket`.
   - Those entities define the core persisted workflow: users authenticate, flights are queried, bookings are created, and tickets are issued and later verified.

10. **Security and authorization**
   - `backend/auth/verifyToken.js` suggests token-based access control for protected endpoints.
   - In the architecture diagram, this is the main security boundary between public routes like login/search and restricted operations like booking management and admin actions.

11. **Primary data flow**
   - A typical user flow is: frontend searches flights → calls backend flight endpoints → backend queries stored flight data → user books a seat → booking/ticket records are created → the frontend displays an e-ticket/QR representation.
   - The admin flow is separate: admin logs in → manages airlines/flights → verifies tickets using the QR scanner interface, likely against backend ticket records.

12. **External services and infrastructure**
   - MongoDB is the implied primary datastore behind the Mongoose-style schemas.
   - Cloudinary appears to be used for image storage/upload, while Firebase Hosting serves the compiled frontend.
   - Together, these create a split deployment: static client delivery from Firebase and dynamic API/data handling from Node/Express.

13. **What to show in an architecture diagram**
   - Draw three main zones: browser SPA, admin SPA, and backend API/server.
   - Inside the backend, group routes/controllers/models by auth, flight, booking, and ticket domains.
   - Show shared dependencies from the SPA to the API, and from the API to the database plus any media/storage service.

Main entry points: [`frontend/src/Routes/AppRoutes.jsx`](https://github.com/piyushpb/airplane-ticket-booking/blob/main/frontend/src/Routes/AppRoutes.jsx) (App Routes), [`backend/Routes/tickets.js`](https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/Routes/tickets.js) (Ticket Routes), [`backend/models/userSchema.js`](https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/models/userSchema.js) (Domain Models), [`backend/index.js`](https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/index.js) (API Server)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Frontend SPA"]
  node_client_app["Client App<br/>React/Vite SPA<br/>[App.jsx]"]
  node_app_routes["App Routes<br/>Route map<br/>[AppRoutes.jsx]"]
  node_auth_context["Auth State<br/>Context<br/>[authContext.jsx]"]
  node_ticket_booking_flow["Booking Flow<br/>UI flow<br/>[FareSummary.jsx]"]
  node_search_ui["Search UI<br/>Customer UI"]
  node_ticket_view["Ticket View<br/>E-ticket UI"]
end

subgraph group_admin["Admin Workspace"]
  node_admin_shell["Admin Shell<br/>Admin SPA<br/>[Admin.jsx]"]
  node_admin_login["Admin Login<br/>Auth screen<br/>[AdminLogin.jsx]"]
  node_admin_manage["Airline/Flight Admin<br/>Admin tools<br/>[AddFlight.jsx]"]
  node_admin_verify["Ticket Verify<br/>Gate tool<br/>[VerifyTicket.jsx]"]
end

subgraph group_backend["Backend API"]
  node_api_server["API Server<br/>Express app<br/>[index.js]"]
  node_auth_routes["Auth Routes<br/>API routes<br/>[auth.js]"]
  node_flight_routes["Flight Routes<br/>API routes<br/>[flights.js]"]
  node_booking_routes["Booking Routes<br/>API routes<br/>[booking.js]"]
  node_ticket_routes["Ticket Routes<br/>API routes<br/>[tickets.js]"]
  node_auth_controller["Auth Logic<br/>Controller<br/>[authController.js]"]
  node_flight_controller["Flight Logic<br/>Controller"]
  node_booking_controller["Booking Logic<br/>Controller"]
  node_ticket_controller["Ticket Logic<br/>Controller"]
  node_token_guard["Token Guard<br/>Auth middleware<br/>[verifyToken.js]"]
  node_data_models["Domain Models<br/>Mongoose schemas<br/>[userSchema.js]"]
end

subgraph group_external["External Services"]
  node_database[("MongoDB<br/>Document store")]
  node_cloudinary[("Cloudinary<br/>Media storage")]
  node_firebase_hosting["Firebase Hosting<br/>Static hosting<br/>[firebase.json]"]
end

node_client_app -->|"uses"| node_app_routes
node_app_routes -->|"shows"| node_search_ui
node_app_routes -->|"shows"| node_ticket_booking_flow
node_app_routes -->|"shows"| node_ticket_view
node_app_routes -->|"consumes"| node_auth_context
node_auth_context -->|"protects"| node_client_app
node_admin_shell -->|"starts at"| node_admin_login
node_admin_shell -->|"contains"| node_admin_manage
node_admin_shell -->|"contains"| node_admin_verify
node_ticket_booking_flow -->|"calls"| node_booking_routes
node_search_ui -->|"calls"| node_flight_routes
node_ticket_view -->|"calls"| node_ticket_routes
node_admin_manage -->|"calls"| node_flight_routes
node_admin_verify -->|"calls"| node_ticket_routes
node_admin_login -->|"calls"| node_auth_routes
node_api_server -->|"mounts"| node_auth_routes
node_api_server -->|"mounts"| node_flight_routes
node_api_server -->|"mounts"| node_booking_routes
node_api_server -->|"mounts"| node_ticket_routes
node_auth_routes -->|"delegates"| node_auth_controller
node_flight_routes -->|"delegates"| node_flight_controller
node_booking_routes -->|"delegates"| node_booking_controller
node_ticket_routes -->|"delegates"| node_ticket_controller
node_booking_routes -->|"protects"| node_token_guard
node_ticket_routes -->|"protects"| node_token_guard
node_flight_controller -->|"uses"| node_data_models
node_booking_controller -->|"uses"| node_data_models
node_ticket_controller -->|"uses"| node_data_models
node_auth_controller -->|"uses"| node_data_models
node_data_models -->|"stores in"| node_database
node_admin_manage -.->|"uploads to"| node_cloudinary
node_client_app -.->|"deployed on"| node_firebase_hosting

click node_client_app "https://github.com/piyushpb/airplane-ticket-booking/blob/main/frontend/src/App.jsx"
click node_app_routes "https://github.com/piyushpb/airplane-ticket-booking/blob/main/frontend/src/Routes/AppRoutes.jsx"
click node_auth_context "https://github.com/piyushpb/airplane-ticket-booking/blob/main/frontend/src/context/authContext.jsx"
click node_ticket_booking_flow "https://github.com/piyushpb/airplane-ticket-booking/blob/main/frontend/src/components/TicketBookingForm/FareSummary.jsx"
click node_search_ui "https://github.com/piyushpb/airplane-ticket-booking/blob/main/frontend/src/components/Card/SearchedFlightCards.jsx"
click node_ticket_view "https://github.com/piyushpb/airplane-ticket-booking/blob/main/frontend/src/components/ETicket/TicketContainer.jsx"
click node_admin_shell "https://github.com/piyushpb/airplane-ticket-booking/blob/main/frontend/src/admin/Admin.jsx"
click node_admin_login "https://github.com/piyushpb/airplane-ticket-booking/blob/main/frontend/src/admin/AdminLogin.jsx"
click node_admin_manage "https://github.com/piyushpb/airplane-ticket-booking/blob/main/frontend/src/admin/AddFlight.jsx"
click node_admin_verify "https://github.com/piyushpb/airplane-ticket-booking/blob/main/frontend/src/admin/VerifyTicket.jsx"
click node_api_server "https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/index.js"
click node_auth_routes "https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/Routes/auth.js"
click node_flight_routes "https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/Routes/flights.js"
click node_booking_routes "https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/Routes/booking.js"
click node_ticket_routes "https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/Routes/tickets.js"
click node_auth_controller "https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/controller/authController.js"
click node_flight_controller "https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/controller/flightController.js"
click node_booking_controller "https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/controller/bookingController.js"
click node_ticket_controller "https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/controller/ticketController.js"
click node_token_guard "https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/auth/verifyToken.js"
click node_data_models "https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/models/userSchema.js"
click node_firebase_hosting "https://github.com/piyushpb/airplane-ticket-booking/blob/main/frontend/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_client_app,node_app_routes,node_auth_context,node_ticket_booking_flow,node_search_ui,node_ticket_view toneBlue
class node_admin_shell,node_admin_login,node_admin_manage,node_admin_verify toneAmber
class node_api_server,node_auth_routes,node_flight_routes,node_booking_routes,node_ticket_routes,node_auth_controller,node_flight_controller,node_booking_controller,node_ticket_controller,node_token_guard,node_data_models toneMint
class node_database,node_cloudinary,node_firebase_hosting toneRose
```

## Components

### Frontend SPA

User-facing React application for search, booking, profile, and ticket display.

- [Client App](https://github.com/piyushpb/airplane-ticket-booking/blob/main/frontend/src/App.jsx): React/Vite SPA · Main browser application shell and entry point. · `frontend/src/App.jsx`
- [App Routes](https://github.com/piyushpb/airplane-ticket-booking/blob/main/frontend/src/Routes/AppRoutes.jsx): Route map · Client-side navigation and page switching. · `frontend/src/Routes/AppRoutes.jsx`
- [Auth State](https://github.com/piyushpb/airplane-ticket-booking/blob/main/frontend/src/context/authContext.jsx): Context · Shared authentication/session state for the SPA. · `frontend/src/context/authContext.jsx`
- [Booking Flow](https://github.com/piyushpb/airplane-ticket-booking/blob/main/frontend/src/components/TicketBookingForm/FareSummary.jsx): UI flow · Multi-step ticket booking forms and review screens. · `frontend/src/components/TicketBookingForm/FareSummary.jsx`
- [Search UI](https://github.com/piyushpb/airplane-ticket-booking/blob/main/frontend/src/components/Card/SearchedFlightCards.jsx): Customer UI · Flight search and result card components. · `frontend/src/components/Card/SearchedFlightCards.jsx`
- [Ticket View](https://github.com/piyushpb/airplane-ticket-booking/blob/main/frontend/src/components/ETicket/TicketContainer.jsx): E-ticket UI · Frontend rendering for issued tickets and QR-style display. · `frontend/src/components/ETicket/TicketContainer.jsx`

### Admin Workspace

Admin-only React screens for managing airlines, flights, and ticket verification.

- [Admin Shell](https://github.com/piyushpb/airplane-ticket-booking/blob/main/frontend/src/admin/Admin.jsx): Admin SPA · Admin workspace entry and protected admin navigation. · `frontend/src/admin/Admin.jsx`
- [Admin Login](https://github.com/piyushpb/airplane-ticket-booking/blob/main/frontend/src/admin/AdminLogin.jsx): Auth screen · Admin authentication entry point. · `frontend/src/admin/AdminLogin.jsx`
- [Airline/Flight Admin](https://github.com/piyushpb/airplane-ticket-booking/blob/main/frontend/src/admin/AddFlight.jsx): Admin tools · Screens for creating airlines and flights. · `frontend/src/admin/AddFlight.jsx`
- [Ticket Verify](https://github.com/piyushpb/airplane-ticket-booking/blob/main/frontend/src/admin/VerifyTicket.jsx): Gate tool · QR scanner and ticket verification workflow. · `frontend/src/admin/VerifyTicket.jsx`

### Backend API

Express server, route handlers, controllers, auth, and persistence models.

- [API Server](https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/index.js): Express app · Backend application bootstrap and request entry point. · `backend/index.js`
- [Auth Routes](https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/Routes/auth.js): API routes · Authentication endpoints. · `backend/Routes/auth.js`
- [Flight Routes](https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/Routes/flights.js): API routes · Flight search and flight management endpoints. · `backend/Routes/flights.js`
- [Booking Routes](https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/Routes/booking.js): API routes · Seat reservation and booking endpoints. · `backend/Routes/booking.js`
- [Ticket Routes](https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/Routes/tickets.js): API routes · Ticket issuance and verification endpoints. · `backend/Routes/tickets.js`
- [Auth Logic](https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/controller/authController.js): Controller · Login, signup, and user session handling. · `backend/controller/authController.js`
- [Flight Logic](https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/controller/flightController.js): Controller · Flight search and flight administration logic. · `backend/controller/flightController.js`
- [Booking Logic](https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/controller/bookingController.js): Controller · Booking creation and seat assignment logic. · `backend/controller/bookingController.js`
- [Ticket Logic](https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/controller/ticketController.js): Controller · Ticket creation, retrieval, and verification logic. · `backend/controller/ticketController.js`
- [Token Guard](https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/auth/verifyToken.js): Auth middleware · Protected-route token verification. · `backend/auth/verifyToken.js`
- [Domain Models](https://github.com/piyushpb/airplane-ticket-booking/blob/main/backend/models/userSchema.js): Mongoose schemas · User, airline, flight, booking, and ticket schemas. · `backend/models/userSchema.js`

### External Services

Hosting, storage, and database services used by the application.

- **MongoDB**: Document store · Primary persistence layer for users, flights, bookings, and tickets.
- **Cloudinary**: Media storage · External image upload and asset storage service.
- [Firebase Hosting](https://github.com/piyushpb/airplane-ticket-booking/blob/main/frontend/firebase.json): Static hosting · Frontend deployment and hosting layer. · `frontend/firebase.json`

## Connections

- Client App → App Routes: uses · Client shell delegates navigation to route configuration.
- App Routes → Search UI: shows · Search pages render flight discovery UI.
- App Routes → Booking Flow: shows · Booking pages render the multi-step checkout flow.
- App Routes → Ticket View: shows · Ticket pages render issued tickets.
- App Routes → Auth State: consumes · Routes read shared authentication state.
- Auth State → Client App: protects · Session state controls protected client behavior.
- Admin Shell → Admin Login: starts at · Admin workspace begins with login.
- Admin Shell → Airline/Flight Admin: contains · Admin workspace includes flight and airline management.
- Admin Shell → Ticket Verify: contains · Admin workspace includes ticket verification tools.
- Booking Flow → Booking Routes: calls · Booking forms submit reservation and checkout requests.
- Search UI → Flight Routes: calls · Search screens query available flights.
- Ticket View → Ticket Routes: calls · Ticket display loads issued ticket data.
- Airline/Flight Admin → Flight Routes: calls · Admin flight creation uses flight APIs.
- Ticket Verify → Ticket Routes: calls · QR verification checks ticket APIs.
- Admin Login → Auth Routes: calls · Admin authentication uses auth APIs.
- API Server → Auth Routes: mounts · Server exposes auth route module.
- API Server → Flight Routes: mounts · Server exposes flight route module.
- API Server → Booking Routes: mounts · Server exposes booking route module.
- API Server → Ticket Routes: mounts · Server exposes ticket route module.
- Auth Routes → Auth Logic: delegates · Route handlers forward to auth controller logic.
- Flight Routes → Flight Logic: delegates · Route handlers forward to flight controller logic.
- Booking Routes → Booking Logic: delegates · Route handlers forward to booking controller logic.
- Ticket Routes → Ticket Logic: delegates · Route handlers forward to ticket controller logic.
- Booking Routes → Token Guard: protects · Booking operations are gated by token verification.
- Ticket Routes → Token Guard: protects · Ticket operations are gated by token verification.
- Flight Logic → Domain Models: uses · Flight logic reads and writes persisted domain records.
- Booking Logic → Domain Models: uses · Booking logic persists reservation state.
- Ticket Logic → Domain Models: uses · Ticket logic persists issuance and verification state.
- Auth Logic → Domain Models: uses · Auth logic reads and writes user records.
- Domain Models → MongoDB: stores in · Mongoose schemas persist to the document database.
- Airline/Flight Admin → Cloudinary: uploads to · Admin asset uploads use external media storage.
- Client App → Firebase Hosting: deployed on · Compiled frontend is hosted through Firebase.