VISVESVARAYA TECHNOLOGICAL UNIVERSITY

JNANASANGAMA, BELAGAVI - 590018

DevOps Project Report

(22CSE1663)
On
Travel & Budget Tracking System
Submitted in partial fulfillment for the award of degree of

Bachelor of Engineering
in
COMPUTER SCIENCE AND ENGINEERING
Submitted by
Samarth B Kalyani (1BG22CS135)
Sanjay M (1BG22CS141)
T Thanush (1BG22CS166)
Venkatesh S Bati (1BG22CS177)

Internal Guide
Shrikanth Hampiholi
Dept. of CSE ,
BNMIT, Bengaluru

B.N.M. Institute of
Technology
An Autonomous Institution under VTU
Approved by AICTE, Accredited as grade A Institution by NAAC. All eligible branches – CSE, ECE, EEE,
ISE & Mech. Engg. are Accredited by NBA for academic years 2018-19 to 2024-25 & valid upto 30.06.2025
URL: www.bnmit.org
Department of Computer Science and Engineering

2024 - 2025
 B.N.M. Institute of
Technology
An Autonomous Institution under VTU
Approved by AICTE, Accredited as grade A Institution by NAAC. All eligible branches – CSE, ECE, EEE, ISE &
Mech. Engg. are Accredited by NBA for academic years 2018-19 to 2024-25 & valid upto 30.06.2025
URL: www.bnmit.org
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CERTIFICATE
Certified that the DevOps project entitled Travel & Budget Tracking System carried out by

Samarth B Kalyani (1BG22CS135), Sanjay M (1BG22CS141), T Thanush (1BG22CS166),

Venkatesh S Bati (1BG22CS177) are Bonafide students of VI Semester, BNM Institute of

Technology in partial fulfillment for the award of Bachelor of Engineering in COMPUTER

SCIENCE AND ENGINEERING of Visvesvaraya Technological University, Belagavi during the

year 2024-25. It is certified that all corrections / suggestions indicated for Internal Assessment have

been incorporated in the project report deposited in the departmental library. The DevOps project report

(22CSE1663) has been approved as it satisfies the academic requirements in respect of Project work

prescribed for the said Degree.

Shrikanth Hampiholi. Dr. Chayadevi M L Dr. S. Y. Kulkarni

Department of CSE Professor & HOD Additional Director and
BNMIT, Bengaluru Department of CSE Principal
BNMIT, Bengaluru BNMIT, Bengaluru

Name Signature with Date

Examiner 1:

Examiner 2:
 ACKNOWLEDGEMENT

We would like to place on record our sincere thanks and gratitude to the concerned people, whose
suggestions and words of encouragement has been valuable.

We express our heartfelt gratitude to the management of BNM Institute of Technology, for giving
us the opportunity to pursue Degree of Computer Science and Engineering and helping us to shape
our career. We take this opportunity to thank Shri. Narayan Rao Maanay, Secretary,
Prof. T. J. Rama Murthy, Director, Dr. S. Y. Kulkarni, Additional Director and Principal,
Prof. Eishwar N Maanay, Dean and Dr. Krishnamurthy G. N., Deputy Director for their support
and encouragement to pursue this project. We would like to thank Dr. Chayadevi M L, Professor
and Head, Dept. of Computer Science and Engineering, for her support and encouragement.

We would like to thank our guide Srikanth Hampiholi Dept. of Computer Science and
Engineering, who has been the source of inspiration throughout our project work and has provided
us with useful information at every stage of our project.

Finally, we are thankful to all the teaching and non-teaching staff of Department of Computer
Science and Engineering for their help in the successful completion of our project. Last but not the
least we would like to extend our sincere gratitude to our parents and all our friends who were a
constant source of inspiration.

Samarth B Kalyani (1BG22CS135)

Sanjay M (1BG22CS141)
T Thanush (1BG22CS166)
Venkatesh S Bati (1BG22CS177)
 ABSTRACT

The Travel Tracker project is a modern, web-based application designed to help users document,
manage, and reflect on their travel experiences. Built using a cutting-edge frontend stack—React,
Vite, and Material Tailwind—the application delivers a fast, responsive, and aesthetically pleasing
user experience. Users can log key travel details such as destinations, dates, descriptions, and
memories, creating a centralized digital travel log.

What sets this project apart is its strong alignment with DevOps principles. It integrates a CI/CD
pipeline, enabling seamless, automated deployment and continuous updates across development and
production environments. Source control is managed via Git, with frequent commits and branching
strategies to support collaborative workflows. Vitest is employed for automated testing, ensuring
reliability and minimizing regressions during feature enhancements or bug fixes. The development
pipeline fosters agility, allowing features and fixes to be integrated, tested, and deployed quickly.

The project demonstrates how the DevOps lifecycle—planning, development, integration, testing,
delivery, and monitoring—can be effectively applied in a real-world scenario. By automating
workflows and incorporating testing and version control from the outset, the Travel Tracker ensures
both development efficiency and product stability. Overall, it serves as a practical implementation of
DevOps culture in modern web application development.

.
 TABLE OF CONTENTS

CONTENTS Page No.

ACKNOWLEDGEMENT I

ABSTRACT II

LIST OF FIGURES III

Chapter 1 Introduction 1
1.1. Statement of the Problem 2
1.2. Objectives of the Project 2
1.3. Scope of the Project 3
Chapter 2 Literature Survey 5
Chapter 3 System Requirement Specification 8
3.1. Software Requirements 9
3.1.1. Key tools and their purposes are outlined below: 9
3.2. Hardware Requirements 10
3.2.1. Minimum Configuration 10
3.3. Dependencies 10
3.4. System Features Supported 11
Chapter 4 Methodology and Implementation 12
4.1. Methodology 13
4.1.1. Development Approach 13
4.1.2. Module wise breakdown 14
4.1.3. Continuous Integration & Delivery Pipeline 14
4.2. System Design 16
4.2.1. Frontend Architecture 16
4.2.2. Backend Architecture 16
4.2.3. Database Design 17
4.2.4. CI/CD Pipeline 17
4.2.5. Automated Deployment 17
4.2.6. Integration and Communication 17
4.2.7. Scalability and Fault Tolerance 17
4.3. Implementation Details 18
Chapter 5 Testing and Validation 19
5.1. Testing Methodology 20
5.2. Frontend Testing 21
5.3. Backend Testing 21
 5.4. API Service Layer Testing 22
5.5. Development & Testing Environment Setup 22
5.6. Validation Results 23
Chapter 6 Results and discussions 25
Chapter 7 Conclusion 30
REFERENCES V

LIST OF FIGURES
Figure No. Name of Figure Page No.

4.1 CI/CD pipeline followed 17

6.1 User login page 27

6.2 My Trip dashboard 28

6.3 Your Expense dashboard 29

6.4 Comparing all your trip expenses 30

LIST OF TABLES
Table No. Name of Table Page No.

3.1 Tools used 11

3.2 System configuration 11

4.1 Modules of project 15

5.1 Testing tool for front end 22

5.2 Testing tool for back end 22

5.3 API testing 23

 CHAPTER – I
INTRODUCTION
1. Introduction
CHAPTER-I
INTRODUCTION
1.1. Statement of the Problem
In today’s era of increasing global mobility, the demand for digital platforms that allow users
to track, document, and relive travel experiences is growing rapidly. While various travel
apps and digital journals exist, they often lack seamless integration of geolocation mapping,
personalized content entry, and secure user data management. Many traditional tools remain
fragmented, with limited visual representation of travel histories and weak data protection
mechanisms.
Furthermore, these applications often suffer from deployment bottlenecks, inconsistent
development environments, and poor scalability due to the lack of modern DevOps
practices. There is a clear need for a solution that not only meets user experience demands
but is also designed with continuous integration, delivery, and deployment in mind —
thereby ensuring high availability, rapid iteration, and reliability.
This project aims to address these gaps by developing a travel tracker web application that
integrates geospatial mapping, secure data management, and a DevOps-driven development
lifecycle. It focuses on delivering a production-grade, scalable platform with robust
automation and monitoring capabilities that support efficient collaboration and rapid feature
delivery.

1.2. Objectives of the Project

The Travel Tracker project is designed as a full-stack MERN (MongoDB, Express.js,
React.js, Node.js) application with an emphasis on DevOps principles. The primary
objectives include:

 Interactive Location Tracking: Provide users with a map-based interface to mark

visited locations.

 Rich Content Entry: Enable metadata capture such as titles, descriptions, travel
dates, and optional media.

 User Authentication & Security: Implement JSON Web Token (JWT)-based

B.E., Dept. of CSE, BNMIT 9 2024-2025

Travel & Budget Tracking System

authentication and secure password hashing.

 Responsive UI: Design for compatibility across desktops, tablets, and mobile
devices using responsive frameworks.

 RESTful API: Build a scalable backend with CRUD operations for trip data and
user management.

 Continuous Integration/Continuous Deployment (CI/CD): Use tools like GitHub

Actions or GitLab CI to automate testing, linting, building, and deployment to
production environments.

 Infrastructure as Code (IaC): Manage deployment environments using IaC tools

such as Docker and configuration scripts.

 Cloud-Native Hosting: Use services like Vercel for frontend and MongoDB Atlas
for database to ensure global accessibility and horizontal scaling.

 Monitoring and Logging: Integrate logging and monitoring tools (e.g., LogRocket,
or simple Node.js loggers) for debugging and performance tuning.

The project ultimately aims to bridge the gap between geographical mapping and digital
journaling, providing users with a seamless, secure, and enjoyable experience as they record
and revisit their travel stories

1.3. Scope of the Project

The scope of the Travel Tracker web application spans across frontend and backend
development, DevOps automation, and scalable deployment. While it caters to individual
users, bloggers, and travel agencies, its infrastructure and codebase are structured to support
modular growth and enterprise-grade deployment strategies:

 Development Pipeline Automation: CI/CD pipelines automatically build, test, and

deploy the application on every code push or pull request.

 Containerization and Portability: Docker containers (or Vite-based optimized builds)

ensure that the app behaves consistently across environments.

B.E., Dept. of CSE, BNMIT 10 2024-2025

Travel & Budget Tracking System

 Version Control and Branching Strategy: A Git-based version control system

supports collaborative development, feature branching, and secure releases.

While this iteration focuses on individual usage and core functionality, future expansions
could include collaborative features, travel analytics dashboards, and third-party
integrations. Its DevOps-centric foundation ensures the system can be rapidly enhanced and
deployed as requirements evolve.

B.E., Dept. of CSE, BNMIT 11 2024-2025

 CHAPTER – II
LITERATURE SURVEY
2. Literature Survey
CHAPTER-II
LITERATURE SURVEY
The concept of logging and visualizing travel data has evolved significantly over the years.
Numerous platforms have emerged aiming to simplify travel documentation and interactive
location mapping. However, many of these systems either lack customizability, are
commercial in nature. In this chapter, we review existing applicationsand technologies that
form the foundation and motivation for the development of the Travel Tracker system

S.No Topic Key Points Reference

1 Travel Planning Digital travel planners reduce user Chung, N., & Koo,
Applications cognitive load by integrating C. (2018). Journal of
itineraries, maps, and accommodation Travel Research,
details. Modern apps emphasize UX 57(5), 579–593.
and real-time access.

2 Cloud Computing Cloud enables scalable storage, Mell, P., & Grance,
in Web Apps computing, and deployment—ideal T. (2011). The NIST
for travel apps requiring availability, Definition of Cloud
elasticity, and global access. Computing.

3 MERN Stack MERN (MongoDB, Express, React, Banker, K. (2011).

Efficiency Node) is popular for full-stack MongoDB in Action.
JavaScript development. MongoDB Manning
suits dynamic travel data models. Publications.

4 Authentication & JWT (JSON Web Tokens) provides Jang, J., & Choi, S.
Security (JWT) stateless, secure token-based (2016). International
authentication; suitable for cloud- Journal of Security
hosted services with multiple and Its Applications,
endpoints. 10(2).

5 Collaborative Collaboration requires Hassan, M. & Nasir,

B.E., Dept. of CSE, BNMIT 13 2024-2025

Travel & Budget Tracking System

Travel Planning synchronization, shared editing, N. (2018). IJACSA,

access roles, and cloud integration. 9(3), 219–225.
Realtime databases like Firebase or
WebSocket APIs are common.

6 REST APIs for RESTful APIs simplify client-server Fielding, R. (2000).

Web Services communication in travel apps. Architectural Styles
Express.js simplifies backend logic and the Design of
for CRUD operations. Network-based
Software
Architectures.

7 Frontend Usability React’s virtual DOM allows dynamic Norman, D. A.

(React + Tailwind) rendering. Tailwind CSS ensures (2013). The Design of
responsive and visually clean design Everyday Things.
—important for user retention. MIT Press.

8 Geolocation and Trip planners often include maps, Pereira, F. C., &
Mapping directions, and live location sharing Zegras, C. (2013).
Integration via APIs like Google Maps or Transportation
Leaflet.js. Research Record:
Journal, 2322(1).

9 Mobile Progressive Web Apps (PWAs) Osmani, A. (2018).

Compatibility & bridge web and mobile experiences— Progressive Web
PWA ideal for travel use cases with offline Apps. Google
access and push notifications. Developers.

10 Real-time Data Real-time features improve multi- Gackenheimer, C.

Sync user planning. Socket.IO or Firebase (2015). Introduction
(Sockets/Firebase) are often integrated for syncing to WebSockets.
itinerary updates live. O’Reilly Media.

B.E., Dept. of CSE, BNMIT 14 2024-2025

 CHAPTER – III
SYSTEM REQUIREMENT
SPECIFICATION
3. System Requirement Specification
CHAPTER-III
SYSTEM REQUIREMENT
SPECIFICATION
3.1. Software Requirements
The Travel Tracker application is developed as a full-stack web-based solution using the
MERN stack (MongoDB, Express.js, React.js, Node.js). The software environment adheres
to DevOps best practices by incorporating CI/CD pipelines, version control, automated
testing, and cloud-based deployment strategies..

The application makes use of modern frontend tools like Vite for efficient build processes
and Material Tailwind CSS for responsive design. On the backend, it uses Express.js to
expose secure RESTful APIs and MongoDB Atlas for scalable cloud-based data storage.

3.1.1. Key tools and their purposes are outlined below:

Tool / Platform Description

Lightweight and versatile code editor used for full-

Visual Studio Code
stack development.

Fast frontend build tool that offers instant hot-

Vite
reloading and optimized builds.

JavaScript library for building modular and dynamic

React.js
user interfaces.

Utility-first CSS framework used to design a

Material Tailwind
responsive and modern UI.

Backend server framework used to handle API

Node.js + Express.js
routing and business logic.

Cloud-hosted NoSQL database for storing user

MongoDB Atlas
information and travel logs.

Lightweight testing framework used to run unit tests

Vitest
during CI workflows.

B.E., Dept. of CSE, BNMIT 16 2024-2025

Travel & Budget Tracking System

Tool / Platform Description

Frontend deployment platform that automates builds

Vercel
and supports CI/CD.
Table 3.1: Tools used

3.2. Hardware Requirements

Though the application is web-based and accessible via browsers, a minimum local system
configuration is required for development and testing purposes.

3.2.1. Minimum Configuration

Component Specification

Processor Intel i3 or higher / AMD Ryzen equivalent

RAM Minimum 4 GB (8 GB recommended)

Storage 1 GB free space for project files and dependencies

Operating System Windows 10 / Linux / macOS

Browser Chrome, Firefox, or any modern browser

Required for accessing hosted database (MongoDB Atlas) and deployment

Internet
(Vercel)
Table 3.2: System Configuration

3.3. Dependencies
The system relies on several development and deployment dependencies that enable
seamless integration and scalable performance. Key dependencies include:
 Node.js (v16 or above): Enables running JavaScript code on the server side and
managing project dependencies.
 MongoDB Atlas: Used for persistent, remote storage of user data and location logs.
 Vercel: Provides a DevOps-ready deployment solution with built-in CI/CD pipelines
triggered by GitHub pushes.
 GitHub: Acts as the central code repository and triggers automated
testing/deployment workflows via GitHub Actions.
 Vitest: Enables fast and reliable unit testing, supporting a “test early, test often”
DevOps culture.

B.E., Dept. of CSE, BNMIT 17 2024-2025

Travel & Budget Tracking System

By leveraging these dependencies, the project embraces the "shift-left" testing approach and
fosters a continuous feedback loop, which are cornerstones of effective DevOps practices

3.4. System Features Supported

The Travel Tracker application supports the following key features:
 Secure User Authentication: Users can register and log in securely using JWT-
based token authentication, and passwords are protected using bcrypt hashing.

 Interactive Map Logging: Users can add travel logs by selecting points on a map
(internally stored with location metadata). Though map rendering is not based on
Leaflet, the system stores geolocation data for future visualization.

 Dynamic Travel Entries: Each entry includes custom fields such as location name,
date of visit, description, and optional image URL.

 Responsive and Clean UI: Designed using React and Material Tailwind CSS, the
interface adapts seamlessly across devices and screen sizes.

 Backend RESTful API: Built with Express.js, the backend supports all CRUD
operations, enabling seamless frontend-backend interaction.

 Testing with Vitest: Modules are tested for correctness during CI pipelines, ensuring
that regressions are caught before reaching production.

 CI/CD Integration: Every commit triggers GitHub Actions to run tests, build the
project, and deploy the frontend to Vercel. This automates the entire delivery
pipeline and reduces manual overhead.

B.E., Dept. of CSE, BNMIT 18 2024-2025

 CHAPTER – IV
METHODOLOGY AND
IMPLEMENTATION
4. Methodology and Implementation
CHAPTER-IV
METHODOLOGY AND
IMPLEMENTATION

The Travel Tracker project was implemented using a modular, full-stack approach built on
the MERN (MongoDB, Express.js, React.js, Node.js) stack. This architecture supports a
scalable, maintainable, and robust application suitable for both personal and professional
travel logging purposes. Central to the methodology was the integration of DevOps
practices, including version control, continuous integration/continuous deployment (CI/CD),
and automated testing.

4.1. Methodology
4.1.1. Development Approach
The project followed the Agile methodology with bi-weekly sprints, enabling iterative
feature development, regular feedback, and continuous improvement. Each sprint cycle
involved planning, coding, testing, and deployment stages.

Key practices followed:

 User stories were defined for features like authentication, travel log creation, and
map visualization.

 Sprints included the delivery of vertical slices of functionality from UI to database.

 DevOps pipelines were used to automate builds, tests, and deployments after each
commit.

To streamline the development process, Docker was adopted to containerize the application.
The frontend, backend, and database each ran in isolated containers during development and
testing, improving portability and reproducibility.

B.E., Dept. of CSE, BNMIT 20 2024-2025

Travel & Budget Tracking System

4.1.2. Module wise breakdown

Module Description

User Authentication Secure registration and login system using JWT and bcrypt.

Built using React with Material Tailwind for a responsive user

Frontend UI
interface.

RESTful API using Express.js for communication between

API Layer
frontend and database.

MongoDB with Mongoose ORM to store user credentials and

Database Layer
travel entries.

Jenkins pipeline used for automated testing and builds using

CI/CD Integration
Groovy script.

Docker used for creating isolated environments for backend,

Containerization
frontend, and DB.

Frontend hosted on Vercel; backend optionally hosted on services

Deployment
like Render.

Table 4.1: Modules of the project

4.1.3. Continuous Integration & Delivery Pipeline

Continuous Integration (CI) involves automated linting, unit testing, and image builds
triggered by code pushes. Continuous Deployment (CD) involves automatic deployment to
Vercel and Render upon successful pipeline completion. Branch protection, linting, and tests
prevent bad code from being released. Building images ensures consistent environments
across dev, test, and prod.

1. Local Development: Work is done on the local machines, creating and testing code
changes.

B.E., Dept. of CSE, BNMIT 21 2024-2025

Travel & Budget Tracking System

2. GitHub (Source Control):

◦ Code is pushed to GitHub, which acts as the central repository.

◦ Branch protection is enforced to maintain code quality: Branch Protection

ensures that only reviewed, linted, and tested code can be merged to main
branches.

◦ Linting is run to maintain code formatting and style consistency.

3. Jenkins (Build & Test):

◦ Jenkins picks up changes from GitHub.

◦ Creates a deployable Docker image.

◦ Runs automated tests to verify individual components work as expected.

4. Release (Deployment): On passing all checks and builds, the application is

deployed.

◦ Vercel (Frontend): Hosts the frontend app (typically for React, Next.js, etc.)

◦ Render (Backend): Hosts the backend API or server (Node.js, Express, etc.)

◦ MongoDB Atlas (Database): Cloud-hosted NoSQL database storing application

data.

Typical Workflow:

1. Dev writes code → pushes to GitHub.

2. Jenkins builds and tests it.

3. If successful:

1. Frontend deploys to Vercel.

2. Backend deploys to Render.

B.E., Dept. of CSE, BNMIT 22 2024-2025

Travel & Budget Tracking System

3. Both services connect to MongoDB Atlas.

4. Live product is updated automatically.

Figure 4.1: CI/CD Pipeline followed

4.2. System Design

The Travel and Expense Tracker is a full-stack web application designed to help users
manage their trips, track expenses, split costs with friends, and view analytics on their travel
activities. The system is composed of a React-based frontend, an Express.js backend API,
and a MongoDB Atlas database. The application follows a modern microservices-inspired
modular design and is built with a strong focus on automation, reliability, and continuous
integration and deployment (CI/CD).

4.2.1. Frontend Architecture

The frontend is developed using React and hosted on Vercel for automatic, scalable, and
high-performance deployment. It provides a dynamic single-page application (SPA)
interface where users can sign up, plan trips, add expenses, view expense splits, and check
trip analytics. The frontend communicates with the backend via RESTful APIs over HTTPS
and handles client-side routing, state management, and local caching where necessary.

4.2.2. Backend Architecture

The backend is built using Node.js and Express.js, providing a stateless REST API layer for
managing user authentication, trip data, expenses, analytics, and friend relationships. This
API is containerized using Docker and deployed on Render, a cloud platform well-suited for
hosting containerized web services with automated deployment triggers. The backend

B.E., Dept. of CSE, BNMIT 23 2024-2025

Travel & Budget Tracking System

connects securely to the MongoDB Atlas cloud database, performing CRUD operations and
complex aggregation queries for expense analysis and trip summaries.

4.2.3. Database Design

The application uses MongoDB Atlas for scalable, flexible, cloud-hosted NoSQL storage. It
maintains collections for Users, Trips, Expenses, and Friends. Documents within these
collections store nested JSON-like structures allowing for efficient storage and retrieval of
trip-related data, participant information, and financial records. The database design
leverages schema flexibility for adding new features like trip notes or photo galleries without
rigid migrations.

4.2.4. CI/CD Pipeline

The CI/CD workflow is orchestrated by Jenkins integrated with GitHub. Developers work
locally and push their code to a GitHub repository. The repository enforces branch
protection rules to prevent unverified code from entering production branches. On each
push, Jenkins triggers a pipeline that performs linting for code quality checks and unit testing
for backend and frontend components. If all checks pass, Docker images are built for the
backend, and frontend production builds are generated.

4.2.5. Automated Deployment

Post-build, the CI/CD pipeline proceeds to the release stage. The frontend build is deployed
to Vercel, which automatically provisions deployment URLs and production environments.
The backend image is deployed to Render, where it runs inside a Docker container,
automatically scaling based on incoming traffic. Render maintains health checks and service
logs to monitor deployment status and operational metrics.

4.2.6. Integration and Communication

The frontend interacts with the backend over secure HTTPS APIs, and the backend connects
to the MongoDB Atlas cluster via secure connection strings with role-based access control
(RBAC). Authentication is handled using JWT (JSON Web Tokens) stored securely in
HTTP-only cookies or local storage. The system also plans for integrating third-party
services like currency conversion APIs, location services, or payment gateways for extended
functionalities.

B.E., Dept. of CSE, BNMIT 24 2024-2025

Travel & Budget Tracking System

4.2.7. Scalability and Fault Tolerance

By hosting services separately on Vercel and Render, the architecture naturally supports
horizontal scaling. MongoDB Atlas provides built-in replication, automatic failover, and
backup capabilities. CI/CD ensures that any new updates are tested and deployed
automatically, minimizing downtime and human error. Additionally, frontend and backend
services can be scaled independently according to usage patterns.

4.3. Implementation Details

Frontend

 React.js used with functional components and hooks for UI and state management.
 Leaflet.js renders a dynamic map, allowing users to drop pins and input related data.

 Axios handles API calls to communicate with backend services.

 Responsive UI with CSS ensures compatibility across devices.

Backend

 Built with Node.js and Express.js.

 JWT Authentication ensures secure access to user data.

 CORS Middleware used to allow cross-origin requests.

 Input validation and structured error responses implemented.

Database

 MongoDB Atlas stores user credentials and travel entries.

Deployment

 Frontend deployed using Vercel

 Backend hosted locally or via platforms like Render (optionally)

 GitHub used for code versioning, team collaboration, and CI/CD pipelines.

B.E., Dept. of CSE, BNMIT 25 2024-2025

 CHAPTER – V
TESTING AND VALIDATION
5. Testing and Validation
CHAPTER-V
TESTING AND VALIDATION

Testing is a critical phase in the software development lifecycle, ensuring the application
meets both functional and non-functional requirements. In the Travel Tracker project, testing
was integrated into the DevOps workflow using tools such as Vitest, Docker, and Jenkins,
enabling fast feedback, early bug detection, and consistent deployment quality.

Testing was performed at multiple levels — unit testing, integration testing, and user
acceptance testing — to ensure the system is secure, user-friendly, and performs reliably
across devices and platforms.

5.1. Testing Methodology

The project follows a structured testing methodology, where each code commit undergoes
automated checks and validation. Testing covered both frontend and backend logic:

 Testing Framework: Vitest (a fast unit test framework compatible with Vite)

 Component Testing: Done using @testing-library/react

 API & Middleware Testing: Conducted using Vitest + mocking tools like vi.mock

 Mocking Libraries: vi.mock() was used to simulate modules such as axios,

jsonwebtoken, and mongoose models for isolated testing.

 CI Automation: Tests run automatically through a Jenkins pipeline upon every push
to the GitHub repository.

B.E., Dept. of CSE, BNMIT 27 2024-2025

Travel & Budget Tracking System

5.2. Frontend Testing

Test Case Tool Used Expected Result Status

Render HomePage Com- @testing-library/react Component loads and

ponent shows "Home Page" Passed
text

Conditional Navbar/ React Testing Library Navbar and Footer vis-

Footer display (non-dash- ible outside /dash- Passed
board paths) board routes

Navigation to NotFound React Router, Testing Shows "404 Not

Route Lib Found" for unknown Passed
paths
Table 5.1: Testing tools for frontend

5.3. Backend Testing

Middleware/API Description Test Performed Result

Ensures JWT Unauthorized access

requireAuth middleware Passed
authentication returns 401

Valid JWT proceeds to next() is called after user

requireAuth middleware Passed
next middleware lookup

Validates user credentials Mocked DB + JWT

User login API Passed
and returns token token issuance tested

Trip creation API Authenticated POST with Valid request creates a

Passed
(/trip/create) trip data new trip

Table 5.2: Testing tools for backend

B.E., Dept. of CSE, BNMIT 28 2024-2025

Travel & Budget Tracking System

5.4. API Service Layer Testing

Function Mocked Test Objective Status
Dependency

getProfile() Axios Should make GET Passed

request to
/user/profile

register() Axios Should make POST Passed

request with user
data to /user/register

setFavorite() Axios Should hit Passed

endpoint
/trip/favorite/<code>
with toggle

Table 5.3: API Testing

5.5. Development & Testing Environment Setup

The testing and development workflow is tightly coupled with containerization and CI/CD
automation. The setup includes:

 Dockerized Environment: A multi-container Docker setup is used during testing

and development. It includes:

o A Node.js container for running both frontend (Vite + React) and backend
(Express.js) code.

o A MongoDB container using the official image for isolated and persistent
data storage.

o All containers are orchestrated using a docker-compose.yml file for easy local

B.E., Dept. of CSE, BNMIT 29 2024-2025

Travel & Budget Tracking System

replication and test deployment.

 Vitest Configuration:

o Vite is configured with aliasing (@ → /src) for cleaner imports.

o vitest.setup.js includes global test dependencies like @testing-library/jest-

dom.

o Test coverage includes hooks, components, middleware, and API logic.

 Mocking Challenges Resolved:

o DOM-related errors (e.g., window/document) using mocks for third-party

libraries.

o Default export mocking issues with vi.mock().

o Router-based tests were executed using MemoryRouter to simulate

navigation.

 Jenkins Build Server:

o A dedicated Jenkins build server listens for GitHub push events.

o Upon push, Jenkins pulls the latest code and builds the Docker test
container.

o All Vitest tests are executed inside the test container.

o This CI pipeline ensures that no untested or broken code enters production.

5.6. Validation Results

The Travel Tracker system was successfully validated against all functional requirements.
Core modules like user authentication, marker submission, map integration, and data
retrieval were tested and confirmed to work as expected.

B.E., Dept. of CSE, BNMIT 30 2024-2025

Travel & Budget Tracking System

The testing confirmed:

 High modularity and reusability of components

 Secure and functional auth middleware

 Accurate API interaction using mocked axios calls

 Responsive frontend behavior under various routing conditions

This comprehensive testing approach ensures that the application performs reliably under
realistic scenarios and meets expected functional requirements. In summary, the application
passed all validation checks and was found to be stable, responsive, and user-friendly.

B.E., Dept. of CSE, BNMIT 31 2024-2025

 CHAPTER – VI
RESULTS AND DISCUSSIONS
6. Results and discussions
CHAPTER-VI
RESULTS AND DISCUSSIONS

The developed Travel Planning and Tracking Web Application successfully achieved the
intended goals of allowing users to register, log in, plan trips, and manage travel-related
data. The backend was built using Node.js and Express, while MongoDB served as the
database. The frontend, implemented with React and Tailwind CSS, was responsive and
worked effectively across devices. The system ensured secure authentication using JSON
Web Tokens (JWT) and protected sensitive routes via a middleware function that validated
tokens and user existence.

During testing, all primary functionalities performed as expected. Users could register and
log in, and the system correctly issued and verified authentication tokens. The trip creation
feature allowed users to add new trips with unique codes and optional favorite status.
Navigation across different pages (e.g., home, dashboard, authentication routes) worked
seamlessly, and invalid URLs redirected users to a custom 404 Not Found page.

Fig 6.1 User login page

Upon successful login, users are redirected to their personalized user profile dashboard,
which serves as the central interface for managing and recording trip-related expenses. This

B.E., Dept. of CSE, BNMIT 33 2024-2025

Travel & Budget Tracking System

intuitive interface is designed to simplify group expense tracking by allowing users to input,
view, and analyze financial contributions and outstanding balances in real time.

Once on the dashboard, users can begin by entering detailed expense records categorized
under typical spending areas such as food, transportation, fuel, and other miscellaneous
costs. For each entry, the user specifies the amount spent, the category of the expense, and
most importantly, who paid for the expense. This step ensures accurate attribution of
payments among group members.

The system automatically calculates and displays what each participant owes to others and
what they are owed based on shared expenses. For example, if one member pays for a meal
shared by the group, the application fairly divides the cost and updates the balance sheet
accordingly.

The interface provides a clear summary of the net balances, highlighting how much each
user has paid versus their share of the total expenses. It visually presents a breakdown of all
transactions and simplifies the process of settling debts within the group, minimizing
confusion and the need for manual calculations.

This functionality demonstrates the effectiveness of the deployed DevOps pipeline in

supporting a dynamic, user-friendly application that delivers real-time financial insights and
fosters transparency among users during group activities or trips.

B.E., Dept. of CSE, BNMIT 34 2024-2025

Travel & Budget Tracking System

Fig 6.2 My Trip dashboard of the user(details of each trip)

fig6.3 your trip expense dashboard

The Compare Trips section of the application offers users a comprehensive visual overview
of their travel history, enabling quick and effective comparisons across multiple trips. This
analytics dashboard presents key metrics in the form of interactive charts and graphs,
providing valuable insights into user spending and activity.

Users can view the total expenses per trip, making it easy to identify which trip incurred the
highest cost. The trip duration chart displays the length of each trip, assisting users in

B.E., Dept. of CSE, BNMIT 35 2024-2025

Travel & Budget Tracking System

correlating duration with expenditure. A pie chart breakdown of the expense split for a
selected trip offers a clear picture of how costs were distributed among participants.
Additionally, the dashboard includes a 'Trips Shared with Friends' visualization, which
highlights collaboration and participation levels among different group members.

Fig 6.4 Comparing all your trip expenses

The middleware was specifically tested to ensure it blocked unauthorized users and only
allowed access when a valid JWT was present in the request cookies. The API layer was
mocked using Vitest, and test cases were written to validate that correct requests were made
for login, registration, and trip-related functionalities. Tests also verified the presence of
critical UI elements such as the Navbar and Footer under appropriate route conditions.

Several challenges were encountered during testing, especially related to the test
environment. Modules like react-apexcharts triggered window is not defined errors, which
were resolved by mocking the component. Since Vitest was used instead of Jest, additional
care was taken to mock ES module imports correctly and set up a proper test environment
using vitest.setup.js. Moreover, routing tests required using MemoryRouter to simulate
different paths and verify conditional rendering logic.Overall, the application performed
reliably, and the testing process confirmed its stability and usability.

B.E., Dept. of CSE, BNMIT 36 2024-2025

CHAPTER – VII
CONCLUSION
7. Conclusion
CHAPTER-VII
CONCLUSION
This project successfully developed and validated a Travel Planning and Tracking Web
Application that enables users to register, authenticate, create and manage trips, and navigate
a user-friendly interface. The application leverages a modern MERN (MongoDB, Express,
React, Node.js) stack, ensuring scalability, performance, and maintainability. Key
functionalities such as secure user authentication, route protection, trip creation, and a
responsive UI were implemented and rigorously tested using Vitest and React Testing
Library.

Through modular design, effective API integration using Axios, and adherence to good
software practices, the project not only met its functional requirements but also established a
solid foundation for future scalability—such as adding features like real-time trip
collaboration, geolocation-based suggestions, or calendar integration.

The testing and validation process confirmed the application's reliability, and test-driven
development helped catch and fix issues early. Despite minor challenges in mocking third-
party libraries and configuring the test environment in GitHub Codespaces, the project
achieved a stable and functional state.

In summary, this project showcases a practical application of full-stack web development

principles and cloud-ready architecture to solve real-world travel organization challenges.

B.E., Dept. of CSE, BNMIT 38 2024-2025

 REFERENCES
[1] Bass, L., Weber, I., & Zhu, L. (2015). DevOps: A Software Architect's Perspective.
Addison-Wesley Professional.

[2] Fitz, B., & Sussna, J. (2015). Monitoring and Observability in DevOps. IEEE Cloud
Computing, 2(6), 24–29.

[3] HashiCorp. (2023). Terraform Documentation. Retrieved from

https://www.terraform.io/docs

[4] Docker Inc. (2023). Docker Documentation. Retrieved from https://docs.docker.com

[5] Hüttermann, M. (2012). DevOps for Developers. Apress.

[6] Amazon Web Services (AWS). (2023). AWS DevOps Services Overview. Retrieved
from https://aws.amazon.com/devops/

[7] Kim, G., Humble, J., Debois, P., & Willis, J. (2016). The DevOps Handbook: How to
Create World-Class Agility, Reliability, & Security in Technology Organizations. IT
Revolution Press.