Bus Reservation System

Bus Reservation System helps users to book and cancel their seats online through this website. Hence, erasing the difficulties of long queues and complicated processes.

Comment

Inspiration

This project began as a simple academic exercise in C programming — a console-based Bus Reservation System using structs and file handling.

While the program worked, it felt limited. It relied on a text-based menu.

I challenged myself with a question:

What if I could transform this traditional procedural C program into a modern, interactive web application?

This project is the result of that transformation — a complete migration from console-based logic to a full-stack web architecture using Node.js and JavaScript.

What it does

The Bus Reservation System is a full-stack web application that allows users to:

• Book a seat • Cancel a booking • View passenger details • Check available seats • Visualize seat layout

Unlike the original C program, this version:

• Uses RESTful APIs • Dynamically renders data in the browser • Stores data persistently in a JSON file • Adapts to desktop, tablet, and mobile devices

How I built it

  1. Backend Architecture:

I rebuilt the C file-handling logic using:

• Node.js • Express.js • File System (fs module)

I designed a structured JSON-based storage system (bus.json). Each seat object contains:

{
  "seat_no": 1,
  "is_booked": false,
  "name": "EMPTY",
  "phone": "-",
  "time": ""
}

I also created REST API routes:

• GET /seats • GET /passengers • POST /book • POST /cancel

These APIs replaced the original C switch-case menu system.

  1. Frontend Design:

The frontend was built using:

• HTML5 • CSS3 (with responsive media queries) • Vanilla JavaScript (Fetch API + DOM manipulation)

Instead of printf, I dynamically generated elements using JavaScript and updated the DOM in real time.

Seat layout rendering was redesigned visually:

🟢 Green → Available 🔴 Red → Booked

  1. Responsive Design:

I implemented three layout modes:

• Desktop (Global View) • Tablet View • Mobile View

Using CSS media queries, grid systems were adjusted dynamically to prevent horizontal scrolling and ensure usability across devices.

Challenges we ran into

  1. Internal Server Errors (500):

While fetching seat data, the browser received HTML instead of JSON. The issue was traced to invalid or missing JSON files.

Fixed by validating file structure and handling errors properly.

  1. Type Mismatch Bugs:

Seat numbers from HTML inputs were strings, while JSON stored numbers. Strict equality comparison failed.

Fixed by converting values using Number() before comparison.

  1. Static File Routing Issues:

Images initially failed to load because I used local file paths instead of Express static routing.

Fixed by properly organizing assets inside the public folder.

  1. Function Not Triggering:

The cancel button initially did nothing because no event handler was attached.

Fixed by properly binding onclick and understanding event-driven behavior.

Accomplishments that I'm proud of

Successfully transformed a console-based C program into a full-stack web application Migrating procedural C logic into an event-driven Node.js architecture required rethinking how data flows and how user interaction is handled.

Built a working file-based persistence system Implemented structured JSON storage that mimics C structs and maintains booking data across sessions without using a database.

Connected frontend and backend using REST APIs Designed API routes that allow seamless communication between browser UI and server logic — replacing traditional console input/output.

Created a responsive, user-friendly interface Implemented desktop, tablet, and mobile layouts using CSS Grid and media queries to ensure accessibility across devices.

Solved real-world debugging challenges Diagnosed and fixed issues such as JSON parsing errors, type mismatches, static asset routing problems, and event handling bugs — strengthening practical debugging skills.

Designed a dynamic seat visualization system Built an interface that visually reflects booking status in real time, making system behavior intuitive and interactive.

Organized a scalable project structure Structured the project into backend logic, public assets, and data storage — mirroring real-world full-stack project architecture.

Completed an end-to-end system independently From backend APIs to UI design and responsive styling, this project represents a full development lifecycle rather than isolated features.

What I learned

This project significantly expanded my understanding of:

• Converting procedural logic into event-driven architecture • Frontend–backend communication using Fetch API • File-based data persistence in Node.js • JSON as a structured data format • RESTful API design principles • Responsive web design using CSS Grid and Media Queries • Debugging 500 errors and JSON parsing issues

Most importantly, I learned how different programming paradigms (C vs JavaScript) approach problem-solving differently.

Conclusion

This project represents more than just a reservation system.

It represents my transition from learning syntax to understanding systems — from writing programs that run in a terminal to building applications that users can interact with through a browser.

Transforming a procedural C application into a full-stack web system strengthened my understanding of architecture, debugging, and modern software development practices.

Share this project:

Updates