Travel Tracker

A solo final project for Module 2 at Turing School of Software and Design

Table of Contents

• Abstract
• Technologies
• Code Architecture
• Install + Setup
• Contributors
• Wins
• Challenges + Improvements
• Project Specs

Abstract

Travel Tracker allows the user to log into their account and view the trips they have upcoming, past and are currently on. They are able to book a new trip to one of the 50 destination options and the date and amount of travelers of their choosing.

Technologies

• JavaScript
• HTML
• CSS
• DayJs
• eslint
• WebPack
• RESTful APIs
• Mocha/Chai Testing

Code Architecture

• travel-tracker
  • README.md
  • dist
    • bundle.js
    • index.html
  • gh-pages-procedure.md
  • node_modules
  • package-lock.json
  • package.json
  • pull_request_template.md
  • src
    • Destination.js
    • Traveler.js
    • Trip.js
    • apiCalls.js
    • css
      • _variables.scss
      • base.scss
    • domUpdates.js
    • images
      • turing-logo.png
    • scripts.js
  • test
    • Destination-test.js
    • Traveler-test.js
    • Trip-test.js
  • webpack.config.js

Illustrations

Install + Setup

• clone down this repo

• run npm install

• run npm start

• clone down the local storage in a outside directory

• run npm install

• run npm start

At Page Log-in use: username: travler50 password: travel

to change users, replace the number 50 with any integer 01 - 50.

At main page, current, past, upcoming trips will be displayed. At the bottom of the page book a new trip by clicking the new trip button. Fill out the form, see the price, and decide to book or not.

At the main page, one can also see the amount they've spent throughout the year by clicking the show amount button.

Contributors

• Hayley Dixon

Wins

• Being able to book a new trip and it generate a new POST and having it render back on the page was a big success
• Understanding more how information flows through code and changes
• Aesthetically, this is my favorite app yet I've made
• Understanding how POST/FETCH work

Challenges + Improvements

• Timing my project out better and working through bugs at the end of each iteration and not waiting till the end to fix them
• I would like the new trips id's to not be generated by Date.now(), but it's what works.
• Make the site mobile friendly and improve the SCSS varibles
• Complete iteration 4

Project Specs

• The project spec & rubric can be found here