Triptailor: Custom Itinerary Management System
Student Name: Chinmay Vaishnav
Enrollment ID: 202101157
B.Tech Project (BTP) Report
BTP Mode: Off-Campus
Dhirubhai Ambani Institute of ICT (DAIICT)
Gandhinagar, India
202101157 [at] daiict.ac.in
Mentor’s Name: Pradip Prajapati
Company’s Name: OneClick IT Consultancy Pvt. Ltd.
Company’s Address: 407-412, President Plaza, Opp. Titanium
Square, Thaltej, Ahmedabad, Gujarat - 380054
On-Campus Mentor: Prof. Supandha Pandit
Abstract - During my internship at OneClick IT Consultancy
Pvt. Ltd., I worked in the development of a website that provides
users several features to create a travel itinerary, select a pre-built
one, while also applying filters such as budget, number and age of
passengers, duration of trip, trip type, etc. During my initial training
period, I worked on several frontend and backend technologies such
as React.js, Next.js, Nest.js, etc., after which I was a part of the
frontend team. Before beginning the project, I had to set up the
initial codebase and understand the existing code structure.
Index Terms – HTML, CSS, JavaScript, React.js, Next.js, Nest.js,
Authentication, Visual Studio Code
I.
Introduction
OneClick IT Consultancy is an award-winning offshore software
development services company. Its tagline is: “We build brands
from ideas” This company is known for its quality of service,
innovation, and AI-driven technology solutions. With over 12 years
of experience, several services are provided, such as web and app
development, AI/ML solutions, software testing, digital marketing
and many more. This company primarily works in the travel domain.
There are several ongoing projects which are travel-oriented, like
‘Tags and Titles’, ‘Travel Terminus’, ‘Hotel Extranet System’, etc.
II.
Project Overview
3)
Next.js
Next.js is a react framework for building full-stack web
applications. You use react to make user interfaces and
next for additional features and optimizations. Under the
hood, next.js abstracts and automatically configures tooling
needed for react, like bundling, compiling and more.
4)
Nest.js
Nest is a framework for building efficient, scalable Node.js
server-side applications. It uses progressive JavaScript, is built
with and fully supports typescript and combines elements of
OOP (Object-Oriented Programming), FP (Functional
Programming) and FRP (Functional Reactive Programming).
Under the hood, Nest makes use of robust HTTP server
frameworks like Express (the default) and can be optionally
configured to use Fastify as well.
III. Project Implementation
I worked on the frontend of the website. Initially, I created
demo pages using HTML and CSS and presented them to
my supervisor for approval. Once these mockups were
approved, I began coding the frontend of the website. I
employed the best practices to ensure that the code is well
organized, easy to maintain and responsive to various screen
sizes and devices.
For this project, we used HTML, CSS, JavaScript, and Next.js for the
frontend and Nest.js for the backend. The project aims to provide a
user-friendly interface to create travel packages and sometimes select
the pre-built ones for ease.
1) HTML, CSS, JavaScript:
These are the basic building blocks to create the base layout of the
website. HTML is the standard markup language to create a wireframe
(layout) of the webpage, CSS provides the required styling to create a
visually appealing and responsive design, while JavaScript provides the
required functionality of UI elements, make the pages dynamic, and
accept user input (forms) and communicate with the database.
2) React.js
React is a JavaScript library known for front-end development. It is
popular due to its component-based architecture, Single Page
Applications (SPAs) and Virtual DOM for building web applications that
are fast, efficient and scalable.
IV.
1)
Contributions
Dashboard
The home page of the website that displays several
pre-built itineraries for a user to select. It provides several
features such as enter dates of departure and arrival,
select destination, add filters for enhanced results (like duration
of tour, budget, trip type, and travel taste). The pre-built
packages display the approximate budget per person and tour
duration.
2) Packages Page
Displays a comprehensive list of pre-built packages with
essential details such as name of passenger, budget of
tour, etc.
•
Problem Solving and Critical Thinking:
Sometimes, I encountered various conceptual and
technical challenges, which required me to think
efficiently and take the best possible decision. I
learned how to approach complex problems
systematically, analyze and evaluate potential
solutions and implement them effectively.
Dashboard
VI. Acknowledgement
•
•
I would like to express my sincere gratitude
to OneClick IT Consultancy Pvt. Ltd. for
providing me with this amazing opportunity
to undertake this internship and work on a
live project. Their support, guidance and
mentorship have been invaluable throughout
this experience.
Overall, this project provided me with a
valuable learning experience and allowed me
to develop new skills and knowledge that will
be beneficial in my future academic and
professional endeavours.
Filter Specifications
REFERENCES
3) Bookings Page
Displays trip name, booking status, duration, number of passengers,
booking date, payment date, and places of departure and destination.
• Several other pages are also built, such as leads page (to capture
valuable information about visitors, typically their contact details),
collection page (where user can group 2 or more pre-built packages
together), and plan with AI (where user can enter a prompt request to
generate a ready-made itinerary schedule).
V.
Learning Outcomes
Throughout the course of this project, I have gained valuable knowledge
and expertise in several areas, including:
• Tools and Technologies: I gained knowledge about HTML, CSS,
JavaScript, React.js and Next.js and some knowledge of backend
frameworks like Nest.js.
• SDLC: I learnt about the software development life cycle, how
project management takes place, how should I prioritize my tasks and
manage my time effectively. I tracked my progress and communicated
effectively with my team members.
•
•
•
•
•
•
https://docs.nestjs.com
https://nextjs.org/docs
https://www.geeksforgeeks.org/react/
https://www.oneclickitsolution.com/
https://www.w3schools.com/html
https://www.w3schools.com/css