Case Study: Book n' Fly

This project showcases a flight search and seat recommendation web app built for CGI summer internship application. It features a Spring Boot backend and React frontend, containerized with Docker. Using SerpAPI for real Google Flights data or mock data for offline testing.

Github View On GitHub

Overview

The goal was to create a functional tool to search for flights and receive seat recommendations. The project integrates a Spring Boot backend, a React frontend, and Docker containerization, with real flight data sourced via SerpAPI’s Google Flights integration and a mock API for offline testing.

The assignment required a web application with two core functionalities:

  • Flight Selection: Enable users to search flights based on criteria such as destination, date, flight time, and price.
  • Seat Recommendation: Recommend seats on a flight based on user preferences (e.g., window seat, extra legroom, proximity to exits) and display them on a seat plan with randomly generated occupied seats.

Additional stretch goals included integrating real airline data, supporting flight transfers, and adding tests, seat classes, all while ensuring clear documentation and ease of deployment.

Planning

The development began with a research phase to identify suitable flight data APIs, leading to the selection of SerpAPI for its access to Google Flights data. Functional requirements were defined, providing structure despite not all goals being fully met due to time constraints.

System Diagram

Implementation

The project was split into two main directories: /frontend for the React application and /backend for the Spring Boot service.
Three deployment options were provided:

  • Docker Hub: Prebuilt image for quick testing.
  • Local Docker Build: Custom image creation with some flexibility.
  • Local Development: Manual setup for backend (Maven/IDE) and frontend (npm).

The flight search allowed searching based on user inputs and selection of the data source, mock or real data. Seat recommendations were visualized on a static seat plan with random occupancy. Mock data ensured functionality without an API key, enhancing ease of development and testing.

Results

The application successfully met core requirements:

  • Users could input search details, seat preferences and access real or mock data.
  • A mock seat plan was displayed with seat recommendations.
  • Dockerization and detailed setup instructions ensured easy deployment.

Screenshots

Main Page

Main page of application

Flight Page

Flight page