Yaal-Bus - Smart & Fast Bus Booking System

Yaal-Bus is a full-stack bus booking application built with the MERN stack (MongoDB, Express, React, Node.js). The app allows users to search buses, select seats, make payments via Stripe, and manage their bookings. Admins can manage buses, view bookings, send notifications, and monitor analytics.

Table of Contents

• Features
• Screenshots
• Tech Stack
• Project Structure
• Getting Started
• Usage
• Contributing
• License

Features

User

• Register and login securely.
• Search for buses by route and date.
• Select seats with real-time availability.
• Confirm selected seats.
• View QR ticket after booking.
• Make secure payments via Stripe.
• View booking history.
• Help and gallery pages.

Admin

• Login to admin panel.
• Add, edit, or delete buses.
• Manage bookings and their statuses.
• Send notifications to users.
• Dashboard with analytics and charts.

General

• Responsive design (desktop, tablet, mobile).
• Real-time seat booking status: available, in-progress, booked.
• Smooth loaders and toast notifications for better UX.
• Error handling for invalid actions or IDs.

Screenshots

User Interface

Admin Interface

Tech Stack

• Frontend: React, Redux Toolkit, Tailwind CSS, React Router, React Icons, Stripe API
• Backend: Node.js, Express.js, MongoDB, Mongoose
• Authentication: JWT
• Payments: Stripe API
• Other Tools: Vite, Axios, Toast notifications

---

Project Structure

├── .git/ 🚫 (auto-hidden)
├── client/
│   ├── dist/ 🚫 (auto-hidden)
│   ├── node_modules/ 🚫 (auto-hidden)
│   ├── public/
│   ├── src/
│   │   ├── Components/
│   │   │   ├── Admin/
│   │   │   │   ├── AdminLogin.jsx
│   │   │   │   ├── BusDetails.jsx
│   │   │   │   ├── DashboardChart.jsx
│   │   │   │   ├── Sidebar.jsx
│   │   │   │   └── TimeDisplay.jsx
│   │   │   └── User/
│   │   │       ├── Footer.jsx
│   │   │       ├── Hero.jsx
│   │   │       ├── Login.jsx
│   │   │       ├── Map.jsx
│   │   │       ├── Navbar.jsx
│   │   │       └── Register.jsx
│   │   ├── Context/
│   │   │   └── AuthContext.jsx
│   │   ├── Layouts/
│   │   │   ├── AdminLayout.jsx
│   │   │   ├── AdminPagesLayout.jsx
│   │   │   ├── BookingLayout.jsx
│   │   │   └── UserLayout.jsx
│   │   ├── Pages/
│   │   │   ├── Admin/
│   │   │   │   ├── AddBus.jsx
│   │   │   │   ├── AdminPageNotFound.jsx
│   │   │   │   ├── Bookings.jsx
│   │   │   │   ├── Buses.jsx
│   │   │   │   ├── DashBoard.jsx
│   │   │   │   ├── EditBus.jsx
│   │   │   │   └── Notification.jsx
│   │   │   └── User/
│   │   │       ├── Gallery.jsx
│   │   │       ├── Help.jsx
│   │   │       ├── Home.jsx
│   │   │       ├── MyBooking.jsx
│   │   │       ├── PageNotFound.jsx
│   │   │       ├── QrTicket.jsx
│   │   │       ├── SearchBuses.jsx
│   │   │       ├── SeatConfirmation.jsx
│   │   │       ├── SeatSelection.jsx
│   │   │       ├── Stripe.jsx
│   │   │       └── Ticket.jsx
│   │   ├── Routes/
│   │   │   └── PrivateRoute.jsx
│   │   ├── Slice/
│   │   │   └── bookingSlice.js
│   │   ├── Store/
│   │   │   └── store.js
│   │   ├── Utils/
│   │   │   ├── ConfirmationToast.jsx
│   │   │   ├── ContentLoader.jsx
│   │   │   ├── FetchDatas.js
│   │   │   ├── FormatDateAndTime.js
│   │   │   ├── MainLoader.css
│   │   │   ├── MainLoader.jsx
│   │   │   ├── SpinnerLoader.jsx
│   │   │   ├── Toast.js
│   │   │   └── useRequirePreviousData.jsx
│   │   ├── index.css
│   │   └── main.jsx
│   ├── .env 🚫 (auto-hidden)
│   ├── .gitignore
│   ├── eslint.config.js
│   ├── index.html
│   ├── package-lock.json
│   ├── package.json
│   ├── vercel.json
│   └── vite.config.js
│
│
│
│
├── server/
│   ├── Config/
│   │   └── connect.js
│   ├── Controllers/
│   │   ├── bookings.controller.js
│   │   ├── bus.controller.js
│   │   └── user.controller.js
│   ├── Modules/
│   │   ├── booking.model.js
│   │   ├── bus.model.js
│   │   └── user.model.js
│   ├── Routes/
│   │   ├── bookings.routes.js
│   │   ├── bus.routes.js
│   │   ├── paymentRoute.js
│   │   └── user.routes.js
│   ├── middleware/
│   │   ├── asyncHandler.js
│   │   ├── errorHandler.js
│   │   └── notFound.js
│   ├── node_modules/ 🚫 (auto-hidden)
│   ├── views/
│   ├── .env 🚫 (auto-hidden)
│   ├── .gitignore
│   ├── env copy
│   ├── package-lock.json
│   ├── package.json
│   ├── seedBookingData.js
│   ├── seedBusData.js
│   ├── seedUserData.js
│   └── server.js
├── Readme.md
├── package-lock.json
└── package.json

Getting Started

Prerequisites

• Node.js & npm
• MongoDB (local or cloud)
• Stripe account for payment integration

Backend Setup

cd server
npm install

PORT=
MONGO_URI=
FRONTEND_URL=
NODE_ENV=
JWT_SECRET=
STRIPE_SECRET_KEY=
SMTP_USER=
SMTP_PSW=
SENDER_EMAIL=
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=

npm run dev

Frontend Setup

cd client
npm install

VITE_BACKEND_URL=
VITE_PUBLIC_STRIPE_KEY=
VITE_ADMIN_EMAIL=
VITE_ADMIN_PASSWORD=

npm run dev

Usage

• Users can register/login, search buses, select seats, pay, and view QR tickets.

• Admins can manage buses, bookings, and notifications.

• Real-time seat status ensures smooth booking experience.

Website

Visit the live Yaal-Bus application here:

Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.

License

This project is licensed under the MIT License. See the LICENCE file for details.

© 2025 YaalBus. Powered by S.Thanushan.