FastX Frontend

FastX is a role-based bus ticket booking platform built with React, enabling passengers, bus operators, and administrators to manage bookings, routes, buses, refunds, and profiles through a secure and responsive interface.

The application supports JWT authentication, Google OAuth login, seat selection, wallet-based booking flow, refund management, booking confirmation emails, PDF e-ticket generation, and role-based dashboards.

---

Features

Authentication & Security

• JWT Authentication
• Refresh Token Mechanism
• Google OAuth Login
• Role-Based Access Control (PASSENGER, OPERATOR, ADMIN)
• Protected Routes
• Profile Completion Flow for OAuth Users
• Password Update Support

Passenger Features

• Signup & Login
• Google OAuth Authentication
• Search Available Buses
• Seat Selection
• Ticket Booking
• Booking Checkout Flow
• Booking Confirmation Modal
• Booking History Management
• Active & Past Bookings
• Wallet-Based Booking Flow (Mock)
• Profile Management
• Refund Request System
• Booking Confirmation Email
• PDF E-Ticket Generation

Operator Features

• Dashboard Analytics
• Bus Management (CRUD)
• Route Management (CRUD)
• Booking Management
• Booking Details Modal
• Refund Approval / Rejection
• Booking Cancellation
• Profile Management
• Password Management

Admin Features

• Dashboard Overview
• Passenger Management
• Operator Management
• Route Management
• Booking Oversight
• Delete Operations

UI & Experience

• Fully Responsive Design
• Mobile & Desktop Support
• Toast Notifications
• Modal-Based Workflows
• Role-Based Dashboard Navigation

---

Tech Stack

Frontend

• React
• Redux Toolkit
• React Router DOM
• Tailwind CSS
• Axios
• React Toastify
• Vite

Backend Integration

• Spring Boot REST APIs
• JWT Authentication
• Google OAuth2 Login
• Email Service
• PDF Generation Service

---

Authentication Flow

FastX supports both local authentication and Google OAuth login.

Landing Page

Signup (Desktop)

Signup (Mobile)

Signin (Desktop)

Signin (Mobile)

---

Passenger Flow

Passengers can search buses, book seats, manage profiles, track bookings, request refunds, and receive e-ticket confirmations.

Passenger Dashboard

Search Available Buses

Passengers can search buses based on route and travel details.

Booking Management

Passengers can manage and track bookings.

OAuth Initial Profile Completion

Google OAuth users complete profile setup after authentication.

Profile Management

Passengers can edit profile information and update password.

Ticket Details Modal

Detailed ticket information with booking details.

Seat Selection

Passengers can choose available seats before booking.

Checkout Page

Wallet-based booking flow for ticket confirmation.

Booking Confirmation Modal

Confirmation after successful booking.

Booking Confirmation Email

Passengers receive booking confirmation through email.

E-Ticket PDF

Generated PDF ticket after successful booking.

Edit Profile Modal

Update passenger details.

Refund Request Modal

Passengers can request refunds for bookings.

---

Operator Flow

Bus operators manage buses, routes, bookings, refunds, and operational analytics.

Operator Dashboard

Overview of operational data and statistics.

Booking Details Modal

Detailed booking information for operators.

Bus Management

Operators can manage buses.

Add / Update Bus

Modal for creating or updating bus information.

Route Management

Manage travel routes and schedules.

Add / Update Route

Modal for route management.

Operator Booking Management

Manage booking records.

Refund Management

Approve or reject passenger refund requests.

Delete Confirmation Modal

Confirmation for delete actions.

Refund Approval Modal

Approve refund requests.

---

Admin Flow

Administrators manage platform-wide data and system operations.

Admin Dashboard

High-level system overview.

Passenger Management

Manage registered passengers.

Operator Management

Manage bus operators.

Booking Management

View and manage booking data.

Route Management

Manage routes across the platform.

---

Role-Based Architecture

FastX supports three user roles:

Passenger

• Search buses
• Book tickets
• Select seats
• Manage bookings
• Request refunds
• Manage profile
• Wallet-based booking

Operator

• Manage buses
• Manage routes
• Handle refunds
• View bookings
• Cancel bookings
• View dashboard statistics

Admin

• Manage passengers
• Manage operators
• Manage routes
• Monitor bookings
• Platform oversight

---

Responsive UI

The application is designed to support both desktop and mobile devices with responsive layouts for authentication, dashboards, and booking workflows.

---

Project Setup

Clone Repository

git clone <repository-url>
cd FastX-Frontend

Install Dependencies

npm install

Run Development Server

npm run dev

Application will start on:

http://localhost:5173

---

Backend Requirement

This frontend requires the FastX backend server to be running for authentication, booking, routes, refunds, and dashboard operations.

---

Future Improvements

• Online Payment Gateway Integration
• Real-Time Bus Tracking
• Push Notifications
• Seat Layout Enhancements
• Booking Analytics Improvements
• Dark Mode Support

---

Skills Demonstrated

• React Development
• Redux Toolkit State Management
• Role-Based UI Architecture
• Authentication & Authorization Flows
• Google OAuth Integration
• Responsive UI Development
• API Integration
• State Management
• Booking Workflow Design
• Dashboard Development
• Modal-Based UI Patterns
• Tailwind CSS Styling