kendallha / travel-tracker

Travel Tracker

Overview

This is the final project for MOD 2 of Turing School of Software & Design. For this project, I built a travel agency site, focusing on the following skills:

• Test-driven development
• Designing an effective class structure
• Using network requests to GET and POST data to an API
• Handling fetch errors
• Utilizing Webpack
• Writing DRY Javascript that utilizes the single responsibility principle
• Separating DOM-related JS from 'business-logic'
• Using SCSS to write clean and modular CSS
• Creating a fully responsive layout across mobile and desktop devices
• Using ARIA and semantic HTML to improve site accessibility

Github Repo

My Github

Setup Instructions

1. Clone into the repo
2. Run npm install
3. Run npm start to connect to localhost:8080
4. Follow the directions in this repo to connect to the local server
5. Navigate to http://localhost:8080/ to view the site
6. Log in using the username traveler<integer between 1 and 50> and password travel2020. The integer in the username specifies which user's data to fetch.

App Features

• See total user has spent on trips this year
• See all past, current, upcoming, and pending (awaiting agent approval) trips
• Request a new trip:
  • Select a destination, date range, and number of travelers
  • Get a quote for the trip price (including a 10% fee for the travel agent)
  • Submit the trip for agent approval (the trip now will appear in the 'Pending Trips' list)

Demonstration:

Login Page

Booking a New Trip

User Overview Page Responsive Layout

Technologies Used

• Chai and Mocha for testing
• Webpack
• NPM
• Vanilla Javascript
• HTML
• SCSS
• Node servers

Future Additions

• Agent view with ability to search for users and approve booking requests