Tripping

Abstract:

This is an interactive web-based application that was developed to make the user's experience viewing their previous trips as well as pending trips in the future simple. The user is presented with a dashboard of their previous tirps as well as "Fan Favorited trips" upon logging in, once logged in they are able to book future trips and view their all time totals spent on traveling.

Feature Spotlight

I successfully implemented Modal.js as well as Day.js. This was one of my big goals was getting familiar with a third part library given that my previous project we tried to use it but it wasnt used corretly, so for this project i have 3 different types of modals i utilized and created, an information modal, a login modal, and a trip booking modal.

Installation Instructions:

NOTE - This app makes network requests to local server data. You will need to clone down two repositories, install dependencies for both, and run both in separate tabs within your terminal each time you run the app. Follow the below instructions.

1. Open your terminal and navigate to where you would like to store the repositories. They will need to share a root folder.
2. Open the local server data repo: https://github.com/turingschool-examples/travel-tracker-api
3. Using the SSH key, paste git clone [email protected]:turingschool-examples/travel-tracker-api.git into your terminal.
4. cd into the server's repository on your local machine and run npm install or npm i to install project dependencies.
5. Run npm start to launch the API's server.
6. Open the app's Github repo: https://github.com/JacobMacFarlane/jacob-mod2-project
7. In a new tab within your terminal, paste git clone [email protected]:JacobMacFarlane/jacob-mod2-project.git to clone using the SSH key.
8. cd into the app's repository on your local machine and run npm install or npm i to install project dependencies.
9. Run npm start to launch this API's server.
10. Open the link to your local server (listed in your terminal) in your web browser to view the live page.
11. Control + C is the command to stop running the local server. Run Control + C in both terminal tabs to fully disconnect.

Preview of App:

Context:

This project was completed in the 11th week of the Turing front-end software engineering program. We were required to synthesize technical information learned thus in the program, in addition to project management skills to create a fully functioning site. This project required additional research to implement new technologies.

Contributors:

• Jacob

Learning Goals:

• Use object and array prototype methods to perform data manipulation
• Implement ES6 classes with a complex data model
• Implement a robust testing suite using TDD
• Make network requests using the fetch API to retrieve and post data to a local server
• Create a user interface that is easy to use, clearly displays information, and follows best practices for accessibility

Technologies Used:

• Fetch API
• Day.js 3rd party library
• Micromodal.js 3rd party library
• Webpack module bundler
• Git/GitHub/ProjectBoard
• JavaScript
• CSS
• HTML
• Mocha JavaScript testing framework
• Chai assertion library
• Test driven development

Wins

Wins

• Jacob: Using Modal and really figuring out how to access the information from the modals to either POST/Get was really cool to me and i can see my self using it a lot in future web designs, another big win had to be figuring out how to do the login logic!

GitHub Pages is a great way to deploy your project to the web. Don't worry about this until your project is free of bugs and well tested!

If you are done, you can follow this procedure to get your project live on GitHub Pages.