Skip to content

kiewi16/travel-tracker

 
 

Repository files navigation

TravelTracker

Travel Tracker is an application designed to create an easy travel planning experience for users and travel agents.

Overview

  • A user-friendly dashboard that displays upcoming, pending, and past trips for a user as well as the total a user has spent year-to-date on travel.
  • An interactive trip booking form that allows users to select a destination and provide the desired number of travelers, trip duration, and departure date.
  • Users can calculate their esitmated trip cost prior to submitting the trip for travel agent approval.
  • After submitting a trip, the user will see the trip with relevant details in the pending trips section.

Goals and Objectives

  • Use object and array prototype methods to perform data manipulation
  • Create a clear and accessible user interface
  • Make network requests to retrieve and post data
  • Implement a robust testing suite using test-driven development (TDD)
  • Write DRY, resuable code that follows Single Responsibility Principle (SRP)

Installation

Front End

  1. Fork the repository
  2. Clone the repository to your local machine
  3. cd into the directory
  4. Run npm install to install the library dependencies
  5. Using the terminal, run npm start to start the server
  6. Navigate to http://localhost:8080/
  7. Enter control + c in your terminal to stop the server at any time

Back End

  1. Fork the repository https://github.com/turingschool-examples/travel-tracker-api.git
  2. Clone the repository to your local machine
  3. cd into the directory
  4. Run npm install
  5. OPEN A SEPARATE TERMINAL WINDOW FOR STEPS 6 & 7
  6. Using the terminal, run npm start to start the server
  7. Enter control + c in your terminal to stop the server at any time

Technologies Used

JavaScript, Mocha, Chai, Webpack, HTML, and CSS

Screenshot of Application

Screenshot 2024-06-11 at 7 16 22 PM Application Login Page Screenshot 2024-06-11 at 7 17 39 PM Application dashboard

Challenges

  • DOM manipulation of pending trips section
  • Creating an aesthetically pleasing design. My energies were spent on the application functionality.

Wins

  • Allocated time at project kickoff to develop a solid understanding of the available data and create a plan to manipulate that data to extra the data points needed for project completion.
  • Increased confindence that I have the ability to navigate through challenges that arise during a project
  • GET and POST requests to a back-end API
  • Thoughtful error handling that guides a user to complete all input fields needed to calculate trip cost and book a trip

Future Features

  • Add additional trip details to the upcoming trips section.
  • Add a countdown until the user's next trip
  • Add a logout button that takes the user back to the log in page
  • Make make responsive to different screen sizes

Final Reflections

During the development of my Travel Tracker application, I experienced significant personal growth. I have increased confidence in my ability to problem solve. I will continue to hone my CSS skills to craft more aesthetically pleasing and visually exciting applications.

About

Project starter kit utilizing webpack

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 92.5%
  • CSS 7.5%