Travel Tracker 🌍

This site allows a traveler to login to their account to view past and pending trips, summary of spending over the year, and plan a new trip! The site was developed using TDD and designed for ease of use with or without a pointing device.

Preview:

Technologies Used

Setup Instructions:

• clone the local server to your machine

  git clone git@github.com:turingschool-examples/travel-tracker-api.git
  

• run cd travel-tracker-api

• run npm install

• run npm start to run the local server

• navigate to this link

• login using the following credentials

  username: traveler<id> (id is a numeral between 1-50)
  password: travel
  

Testing Instructions

• clone the repository to your machine

  git clone git@github.com:tednaphil/TravelTracker.git
  

• run cd TravelTracker/test and open code editor to view test files
• run npm test to run tests

Context:

• ~ 4 hours to build static comp & 20 hours to create test suite and add functionality
• Solo project completed in the 11th week of studying front-end development with Javascript, CSS, and HTML

Goals

• Use object and array protoype methods to perform data manipulation
• Create clear & accessible user interface
• Make network requests to send and retrieve data
• Implement a robust testing suite using TDD
• Produce DRY, reusable code that follows SRP (Single Responsibility Principle)

Wins

• 100 accessibility score and usability without pointing device
• Error prevention with input validation and visible user feedback using <dialog> elements for reactive error handling
• Use of Figma to create a comp for each view of the application. See comp here

Challenges

• dynamic date validation - solved with using Javascript to determine the current date and set the date input min attribute
• Resolving bug producing 'Response': body stream already read error when fetching new data to display on DOM - solved using an individual fetch request for the updated data only
• creating test data that accurately represents the data model on a smaller scale