Skip to content

MRowan121/travel-tracker

Repository files navigation

Travel Tracker


Overview

Travel Tracker is an interactive webpage that allows a user to track their past, current, and pending trips and renders it on a dashboard. My goal is to present a useful application for a user to keep track of their vacations.

This app is built using JavaScript, HTML, CSS, and utilizes Test Driven Development with Mocha and Chai. This application also involves the use of a API server.

  • First the user logs in with their username and password
    • Because the API holds 50 users, the username is traveler 1-50; i.e. 'traveler38'
    • The password for all users is 'travel'
  • After logging in, the user can see all of their upcoming, past, and pending trips
  • The user can also view the total amount spent on trips in the current year, which is calculated based on flights, lodging, and a 10% agent fee
  • The user is able to make a request for a new trip, which will display in the 'Pending Trips' box
  • When requesting a new trip, the user will fill out a form that consists of choosing a location, dates, number of travelers, and the duration of the trip
  • The user will then be prompted to confirm the new trip after reviewing a cost summary of the trip

GIFs

loginGif addTripGif scrollingPageGif


Installation Instructions

  • Fork and Clone this repository

  • CD into the directory

  • Run npm install

  • Run npm start

  • Fork and Clone this API repository

  • CD into the directory

  • Run npm install

  • Run npm start

  • In your browser, go to this link


Future Features

  • Agent Interaction: ability for a travel again to login and review any pending trips so that their status can be updated from "pending" to "approved"
  • Implementation of chartjs to display various cost breakdowns in a clean/concise way

Contributors

Matt Rowan | GitHub | LinkedIn


Links


Architecture & Technologies Used

This application was built using JavaScript, CSS, and HTML and utilizes Test Driven Development with Mocha and Chai.

This application uses a local API server to fetch and post data.

This application consists of a series of class files and their corresponding test files, as well as the scripts, css, and HTML files. Lastly, there is the apiCalls file which holds the fetch calls for retrieving the data & delete calls to remove a booked trip based on the trip id.


Wins & Challenges

Wins

  • Implementation of a login page which displays the correct data based on username input
  • Successfully implement APIs and Fetch/Post Calls
  • Freedom of creativity in terms of how the page looks

Challenges

  • Webpack poses an added layer of abstraction in web development that, while extremely useful, decentralizes the structure of the user data and requires a higher level view to understand

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published