TRAVELLIO-An AI Based Travel Planner

Name: Thinakkar T

Reg. No: 23BCE1751

Introduction

In the modern digital age, planning travel can be a complex and fragmented process. Users often spend hours switching between different websites and applications to research destinations, build itineraries, and manage bookings. This process is time-consuming and often overwhelming. This project, the "Travellio-AI Travel Planner," is a web-based application designed to solve this problem by centralizing and simplifying travel planning.

The application allows users to enter their travel preferences, such as destination, budget, and interests, through an interactive web interface. It then leverages a powerful backend AI (such as the Gemini API) to process these preferences and generate a complete, customized travel itinerary. The entire full-stack application is containerized using Docker, which ensures that it runs consistently, scales easily, and can be deployed in any environment. This project demonstrates a practical, end-to-end workflow of building, containerizing, and deploying a modern, AI-driven web application.

Objectives of Part 1 (DA1)

The primary objective of DA1 was to establish a proof-of-concept (PoC) for the project by containerizing the application's static frontend. This involved:

• Developing the core user interface (UI) using HTML, CSS, and JavaScript.
• Creating a Dockerfile to package these static files into a single container, likely using a lightweight web server image like nginx.
• Successfully building and running the container to demonstrate that the website could be locally hosted and accessed from a web browser. This stage validated the foundational step of dockerizing the client-side of the application.

Objectives of Part 2 (DA2)

The objective of DA2 was to evolve the static PoC into a fully dynamic, multi-container application with a complete client-server architecture. This phase focused on:

• Developing a separate backend service (e.g., using Python/Node.js) to handle business logic.
• Containerizing this backend service in its own Docker container.
• The backend container is responsible for receiving API requests from the frontend, processing the user's input (like destination and dates), communicating with an external AI API to generate the travel plan, and sending the structured response back to the frontend.
• Using Docker Compose to define and manage both the frontend and backend containers, establishing a network for them to communicate.

Objectives of Part 3 (DA3)

The primary objective of DA3 is to consolidate, document, and present the finalized, multi-container AI Travel Planner. This includes:

• Preparing comprehensive project documentation that covers the architecture, implementation steps, and outcomes for all three DA phases.
• Creating this final report/blog post as a single source of documentation.
• Preparing for and delivering a live demonstration of the fully functional application for the "Docker Showdown" event, showcasing its features, multi-container architecture, and seamless operation.

Name of the containers involved and the download links

1. Frontend Container (tinku/travel-frontend)
• Purpose: Serves the static HTML, CSS, and JavaScript files to the user's browser.
2. Backend Container (tinku/travel-backend)
• Purpose: Runs the backend application server, processes requests from the frontend, and communicates with the external AI API.
• Base Image Download Link: https://github.com/Tinku-9/Travellio-Dockered.git

Name of the other software involved along with the purpose

• VS Code: The primary Integrated Development Environment (IDE) used for writing all the code (HTML, CSS, JS, Python/Node.js, Dockerfiles).
• Docker Desktop: Used to build, manage, and run the Docker containers and orchestrate the multi-container application using Docker Compose.
• Python : The language used to write the backend server logic.
• Flask: The web framework used to create API endpoints on the backend.
• Gemini API: The external large language model API used to generate the intelligent travel itineraries.
• HTML/CSS/JavaScript: The core technologies used to build the interactive frontend user interface.
• Docker Compose: The tool used to define and run the multi-container application.

 

Overall architecture of all your three Das

Description of the Architecture:

The project's architecture evolved from a single-container static site (DA1) to a robust two-container microservice model (DA2/DA3). The final architecture, managed by Docker Compose, separates the application into two distinct services for scalability and maintainability.

The Frontend Container runs an Nginx web server to serve the static UI files (HTML, CSS, JS). When a user inputs their travel details in the browser, the JavaScript in the frontend does not perform any logic itself. Instead, it sends an API request (e.g., a POST request with JSON data) to the backend service. Docker Compose manages the networking, allowing the frontend to easily find the backend container using its service name (e.g., http://backend:5000/generate).

The Backend Container runs a application (e.g., Python with Flask) that listens for incoming API requests. Upon receiving a request from the frontend, it validates the data, constructs a new prompt, and sends its own API request to the external AI API (e.g., Google's Gemini API). After receiving the AI-generated travel plan, the backend service formats this data (usually into JSON) and sends it back as the response to the frontend. The frontend's JavaScript then parses this JSON response and dynamically renders the travel plan on the webpage for the user.

Procedure - Part 1 - Steps involved in the process

This part covers the creation of the single static container.

1. Step 1: Create Frontend Files I created the index.html, style.css, and script.js files for the website's UI.                                                                
   
   
   
2. Step 2: Create the Dockerfile I created a Dockerfile in the same directory to define the static frontend container. This file uses an nginx base image and copies the static files into the server's default web directory.
3.  Step 3: Build the Docker Image I used the docker build command to create the image from the Dockerfile. docker build -t travel-frontend-v1 .
4. Step 4: Run the Docker Container I ran the built image as a container, mapping port 80 inside the container to port 8080 on my local machine. docker run -d -p 8080:80 travel-frontend-v1
5. Step 5: Verify the Result I opened my web browser and navigated to http://localhost:8080. The AI Travel Planner website loaded successfully.

Procedure - Part 2 - Steps involved in the process

This part covers the creation of the multi-container application (frontend + backend).

1. Step 1: Create Backend Application I created a new folder for the backend and wrote the server-side application using Python and flask and created a /generate API endpoint. This code is responsible for receiving requests and calling the Gemini API.

2. Step 2: Create Backend Dockerfile I created a new Dockerfile for the backend, based on a python image.

3. Step 3: Update Frontend JavaScript I modified the script.js in the frontend to send a fetch request to the backend service's endpoint (/generate) instead of doing any work locally.

4. Step 4: Create docker-compose.yml I created a docker-compose.yml file in the project's root directory. This file defines two services: frontend and backend. It sets up the builds, ports, and network so they can communicate.

5. Step 5: Build and Run with Docker Compose From the root directory, I ran a single command to build and run both containers. docker-compose up --build

6. Step 6: Verify Full Functionality I opened http://localhost:8080 again. This time, I entered a destination, and the website successfully communicated with the backend, which called the AI API and returned a complete travel plan.

Procedure - Part 3 - Steps involved in the process

This part involves creating this documentation.

1. Step 1: Registered for the Docker Showdown event on the Events Hub.
2. Step 2: Reviewed all faculty instructions and the required format for the documentation.
3. Step 3: Systematically gathered all materials from DA1 and DA2, including code, Dockerfiles, and screenshots.
4. Step 4: Wrote the content for each required section (Introduction, Objectives, Architecture, etc.).
5. Step 5: Redrew the architecture diagram using a drawing tool and embedded it.
6. Step 6: Assembled all screenshots and procedures in the correct order.
7. Step 7: Created this blog post on blogger.com using a non-VIT email.
8. Step 8: Submitted the link to this blog post to the Google Form provided.

 

What modification is done in the containers after downloading

I did not just download and run pre-built containers; I used official base images and modified them by adding my own code and configuration.

1. For the Frontend Container (Base Image: nginx:alpine)
• Step 1: Created a Dockerfile.
• Step 2: Used the FROM nginx:alpine instruction to use this lightweight base.
• Step 3: Used the COPY instruction to add my custom index.html, style.css, and script.js files into the container's default Nginx webroot directory (/usr/share/nginx/html). This replaced the default Nginx welcome page with my application.
2. For the Backend Container (Base Image: python:3.10-slim)
• Step 1: Created a Dockerfile.
• Step 2: Used FROM python:3.10-slim to get a lightweight Python environment.
• Step 3: Set a working directory using WORKDIR /app.
• Step 4: Copied the requirements.txt file (containing Flask, requests, google-generativeai, etc.) into the container.
• Step 5: Ran RUN pip install -r requirements.txt to install all my project's dependencies inside the container.
• Step 6: Copied all my backend Python source code (e.g., app.py) into the /app directory.
• Step 7: Exposed the port the application runs on (e.g., EXPOSE 5000).
• Step 8: Set the CMD instruction (e.g., CMD ["python", "app.py"]) to automatically start my server when the container launches.

Github link / dockerhub link of your modified containers

• GitHub Repository: [Paste your full GitHub project link here, e.g., https://github.com/your-username/ai-travel-planner]
• Docker Hub Link: [Paste your Docker Hub link here, e.g., https://hub.docker.com/r/your-username/travel-frontend] (if you pushed them)

What are the outcomes of your DA?

The development of this project resulted in a fully functional, AI-powered travel planner web application, successfully deployed using a multi-container Docker architecture. The system effectively integrates a responsive frontend UI with a powerful backend AI service, demonstrating a complete, end-to-end project lifecycle.

The primary outcome is a scalable, maintainable, and easy-to-deploy application. By separating the frontend and backend into distinct containers, the application follows a modern microservices pattern. This project successfully demonstrates the practical application of Docker and Docker Compose to manage a full-stack application, transforming a complex task like travel planning into a simple, interactive, and intelligent user experience.

Conclusion

This three-part project has been a highly insightful and rewarding experience, providing a strong practical understanding of Docker, full-stack development, and microservice architecture. I successfully learned how to containerize individual services and then orchestrate them using Docker Compose, managing dependencies, networking, and deployment in a consistent, reproducible way.

The system successfully achieves its goal of providing intelligent, AI-generated travel plans through a simple and clean web interface. While the current implementation is a complete and functional product, there is significant potential for future enhancement. This could include adding a third container for a database (like PostgreSQL or MongoDB) to save user plans, integrating user authentication, or expanding the backend to connect with more APIs, such as for live flight and hotel data. Overall, this project has been invaluable in strengthening my technical skills in building and deploying real-world, AI-driven web applications using modern containerization tools.

References and Acknowledgement

1. Original Owners of Containers:
• The official Nginx base image on Docker Hub, maintained by the Nginx team: https://hub.docker.com/_/nginx
• The official Python base image on Docker Hub, maintained by the Python Docker Maintainers: https://hub.docker.com/_/python
2. VIT SCOPE:
• I would like to express my gratitude to VIT, SCOPE, for the  Cloud Computingcourse (Course Code:  BCSE408L) in the Fall Semester, 2025 . This project was a core component of the course and provided the opportunity to apply theoretical concepts in a practical, hands-on manner.
3. IITB Docker Tutorial:

https://script.spoken-tutorial.org/index.php/Docker

 

4. Any Others:
• I would like to sincerely thank my professor, Dr. T Subbulakshmi mam, for their valuable guidance, clear instructions, and continuous support throughout all three phases of this DA.
• I also extend my thanks to my friends and family for their encouragement.