How piyushpb/airplane-ticket-booking works
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: AppRoutes.jsx App Routes · tickets.js Ticket Routes · userSchema.js Domain Models · index.js API Server
Components 24
Frontend SPA
User-facing React application for search, booking, profile, and ticket display.
- Client App · Main browser application shell and entry point.
frontend/src/App.jsx - App Routes · Client-side navigation and page switching.
frontend/src/Routes/AppRoutes.jsx - Auth State · Shared authentication/session state for the SPA.
frontend/src/context/authContext.jsx - Booking Flow · Multi-step ticket booking forms and review screens.
frontend/src/components/TicketBookingForm/FareSummary.jsx - Search UI · Flight search and result card components.
frontend/src/components/Card/SearchedFlightCards.jsx - Ticket View · 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 · Admin workspace entry and protected admin navigation.
frontend/src/admin/Admin.jsx - Admin Login · Admin authentication entry point.
frontend/src/admin/AdminLogin.jsx - Airline/Flight Admin · Screens for creating airlines and flights.
frontend/src/admin/AddFlight.jsx - Ticket Verify · QR scanner and ticket verification workflow.
frontend/src/admin/VerifyTicket.jsx
Backend API
Express server, route handlers, controllers, auth, and persistence models.
- API Server · Backend application bootstrap and request entry point.
backend/index.js - Auth Routes · Authentication endpoints.
backend/Routes/auth.js - Flight Routes · Flight search and flight management endpoints.
backend/Routes/flights.js - Booking Routes · Seat reservation and booking endpoints.
backend/Routes/booking.js - Ticket Routes · Ticket issuance and verification endpoints.
backend/Routes/tickets.js - Auth Logic · Login, signup, and user session handling.
backend/controller/authController.js - Flight Logic · Flight search and flight administration logic.
backend/controller/flightController.js - Booking Logic · Booking creation and seat assignment logic.
backend/controller/bookingController.js - Ticket Logic · Ticket creation, retrieval, and verification logic.
backend/controller/ticketController.js - Token Guard · Protected-route token verification.
backend/auth/verifyToken.js - Domain Models · User, airline, flight, booking, and ticket schemas.
backend/models/userSchema.js
External Services
Hosting, storage, and database services used by the application.
- MongoDB · Primary persistence layer for users, flights, bookings, and tickets.
- Cloudinary · External image upload and asset storage service.
- Firebase Hosting · Frontend deployment and hosting layer.
frontend/firebase.json
Connections 32
- 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.