The primary goal of this project was to create an application for a traveler to manage and track their trips via a travel agency. A user can log in to see a dashboard with their past, present, future, and pending trips and destination info, along with some stats about their travels. They can also fill out a form to send a new trip request to their travel agent. The specifications can be found here.
- Use OOP to drive the design of the application and the code
- Work with an API to send and receive data
- Solidify the code review process
- Create a robust test suite that thoroughly tests all functionality of a client-side application
On load, the user sees a login form. Credentials are username: traveler50 (or any number at the end between 1-50) and password: travel2020
Under the Hood
A single user's info is accessed by using `fetch` and interpolating their id into the endpoint. Error handling ensures that the form is filled out correctly by validating the username and password according to certain conditions.Once logged in, a user can see all their trips displayed (past, present, future, approved, and pending) and sorted by date, as well as some stats on how much they've spent on trips for the current year (helpful for budgeting), how many days they've traveled, and how many trips they've taken.
Under the Hood
The user id is matched with their trips from the trips API, and then trips are matched with destination info from the destination API. All of this info is displayed on trip cards and a stats sidebar for the user to easily see.While most trips have been approved by the "agent," others are still pending. The user can filter between Approved Trips, Pending Trips, and All Trips.
Under the Hood
Upon creation of the trip cards, classes are added to each category of trip according to their status. Trip cards are either shown or hidden in the DOM depending on which button is clicked.Users can fill out the form in the sidebar to quote a new trip before requesting. Once requested, a new trip card is added to the dashboard with a status of 'pending'.
Under the Hood
Error handling ensures that the form is filled out correctly. That way, the POST request will have the correct format.This app was built with all users in mind. I used Lighthouse and WAVE to work towards including as broad of an audience as I could. Of course, as I am committed to including all users, I am happy to make future edits to address any areas that I may have missed.
- Add a travel agency with their own login and dashboard of new trip requests ("pending" trips). Allow them to see their total income generated this year and travelers on trips for today's date. Allow them to approve/deny trip requests, search users by name, view a single user's info, add suggested activities, and delete an upcoming trip for the user. Allow them to create new destinations.
- Add a countdown to their next trip on the user dashboard.
- Implement more robust trip filtering on the current site (this feature would be especially necessary as the application scales and users add more trips)
JavaScript, Fetch/Async, JSON, Mocha, Chai, HTML5, SASS, Normalize, Webpack
This app requires a local server to be running independent of GH. Clone down this repo and follow the instructions in the README. Once the server is running on your local machine, the site can be seen in all of it's glory here:
| Tashia Davis GH |
 |