sanjai-dev46/sanjoelite-airline-platform

Purpose and Top-Level Shape

Sanjo is a two-process airline-booking demo: a React SPA provides search, booking, payment, authentication, and booking-history flows; an Express server exposes mock API endpoints. The repository explicitly identifies database, JWT authentication, and payment-provider integration as future production work.

Runtime Entry Points

• Frontend bootstraps the Vite/React application at frontend/src/main.tsx; route composition is centered in frontend/src/App.tsx.

• Backend starts a Node.js/Express HTTP server from backend/server.js, intended to run on port 5000.

• The frontend development server proxies /api traffic to the backend, separating browser UI delivery from API handling.

Client Routing and Journey Stages

The UI is organized as route-level stages:

• Discovery and results: frontend/src/pages/Home.tsx, frontend/src/pages/Search.tsx, frontend/src/pages/FlightDetails.tsx.

• Transaction flow: frontend/src/pages/Booking.tsx, frontend/src/pages/Payment.tsx, frontend/src/pages/Confirmation.tsx.

• Account-oriented flows: frontend/src/pages/Login.tsx, frontend/src/pages/Register.tsx, frontend/src/pages/BookingList.tsx.

These pages are the primary client control-flow boundary: user selection moves from flight search through booking and payment to confirmation, while authenticated-user screens support registration/login and retrieval of bookings.

Frontend Domain Boundary

frontend/src/services/api.ts is the client API boundary and should isolate pages/components from HTTP endpoint details. Shared TypeScript contracts in frontend/src/types/index.ts provide the frontend’s domain model for flights, bookings, users, and related API data. This is the main place to align future backend schemas and error/auth behavior with the UI.

Presentation Composition

Reusable UI and domain-display components keep page routes focused on orchestration:

• Flight discovery and selection: frontend/src/components/SearchBar.tsx, frontend/src/components/FlightCard.tsx.

• Booking presentation: frontend/src/components/BookingCard.tsx.

• Application shell: frontend/src/components/Navbar.tsx, frontend/src/components/Footer.tsx.

Styling is locally built with Tailwind and global CSS through frontend/tailwind.config.js and frontend/src/index.css.

API and Data Layer

backend/server.js currently concentrates the Express API surface—flight management, booking, authentication, and payment endpoints—in one server module. The README characterizes its data as mock data; no database, persistent repository layer, JWT issuer, or third-party payment SDK appears in the supplied tree. Consequently, API state and business behavior are presently bounded by that single process.

Infrastructure and External Boundaries

• Frontend runtime: React 18, TypeScript, Vite, React Router, Tailwind (frontend/package.json).

• Backend runtime: Node.js, Express, CORS, dotenv (backend/package.json, backend/.env.example).

• Deployment targets are static frontend hosting (Vercel/Netlify) and a Node host (Heroku/Railway/Render). Future external-service boundaries are a database, JWT-based identity, and Stripe/PayPal-class payment processing.