View DriverKick's Live Site ↗️

• It's easy to create a free account or use these demo logins.

• Email: sample@test.com

• Password: 123456

• Please note that this is hosted on a free Heroku account, so loading the website for the first time might take a few seconds.

User Story

As a vehicle owner, I want a multi-purpose vehicle maintenance tracker so that I can ensure I am up to date on my vehicle’s upkeep.

Table of Contents

1. Technology Used
2. Installations
3. Future Development
4. Awesome Feature Code
5. Team Contact Information

Technology Used:

• HTML
• CSS/BEM
• JSX
• React
• MongoDB
• Express
• Passport
• Github
• NHTSA Vehicle API
• Project Management Tools:
  • Trello (Team Collaboration / Task Management)
  • Figma (Design Layout)
  • G Suite (Component Organization / Slides Presentation)
• Deployed Application:
  • Heroku (App Link)
  • MongoDB Atlas (Database link)

Installations:

$ npm axios
$ npm nodemon
$ npm bcryptjs
$ npm react-bootstrap
$ npm express
$ npm express-session
$ npm mongoose
$ npm passport
$ npm react-contenteditable
$ npm react-moment
$ npm react-ga

Future Development:

• Scheduling maintenance alerts for oil change
• Push notification for Mileage tracking
• PWA the site for mobile and offline use
• Local maintenance shop tracker with ratings
• Create a light mode for the dashboard
• Recall card with working API – Code Splitting for Performance Enhancements

Awesome Feature Code:

• The user inputs their vehicles VIN number, which is then sent to the NHSTA government API for decoding. The information comes back and the user verifies the information matches their vehicle, and the vehicle is created. This allows for easy one input entry to create vehicles and get accurate information. This prevents the user from being confronted with a large form that could be filled with accidentally erroneous information.

• The user's information and vehicle data is pulled from the MongoDB database using RESTful api commands. Each vehicle is then mapped through, creating a uniformed card for each one, with a unique image background. The user can update their car's nickname and the owner name directly on the card. They can also delete any card they want. Lastly, each card takes the user to that vehicle's tracking dashboard, where they can track its mileage, oil changes and warranties.

• The oil change card receives all the information it needs from the backend in one simple call. First, the backend calculates the oils to next change by adding the oil interval to the miles at last oil change, then subtracting the vehicles current mileage. Then, it calculates the percentage to the next oil change and subtracts 100. This number is used in the progress bar. We subtract the percentage from 100 to have the bar empty rather than fill, to simulate a gas tank or oil tank slowly running out.
• The oil change card also allows the user to add an oil change. This is a double feature, as not only does it allow the user to input their new interval, it also automatically updates their current mileage, and even creates a history entry for the mileage tracker card!

Team Contact Information:

Lathisha Nair | Project Manager / QA Specialist

Email:	lathisha.n@gmail.com
LinkedIn:	https://www.linkedin.com/in/lathishanair/

Gedalya Krycer | Front-end / Design Specialist

Email:	gedalya@krycer.com
LinkedIn:	https://www.linkedin.com/in/gedalyakrycer/

Nina Rocket | Front-end / Javascript Boss

Email:	ninamrocket@gmail.com
LinkedIn:	https://www.linkedin.com/in/ninarocket/

Jacob Cravey | Back-end / Routes Specialist

Email:	j.t.cravey1991@gmail.com
LinkedIn:	https://www.linkedin.com/in/jacob-cravey-2367561a8/

Linnea Gear | Back-end / MonGOD

Email:	linneagear@gmail.com
LinkedIn:	https://www.linkedin.com/in/linnea-gear/