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.
- HTML
- CSS/BEM
- JSX
- React
- MongoDB
- Express
- Passport
- Github
- NHTSA Vehical 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)
$ 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
- Scheduling maintenance alerts for oil change
- Push notification for Mileage tracking
- Oil change meter has dynamic animation when user is close to an oil change
- PWA the site for mobile and offline use
- Local maintenance shop tracker with ratings
- Create a light mode for the dashboard
1st feature: Vin Number and how it works
- 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.
2nd feature: How info is put into User Dashboard card
- 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.
3nd feature: Oil change card, math behind it. How the icon progresses.
- 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!
Email: | [email protected] |
---|---|
LinkedIn: | https://www.linkedin.com/in/lathishanair/ |
Email: | [email protected] |
---|---|
LinkedIn: | https://www.linkedin.com/in/gedalyakrycer/ |
Email: | [email protected] |
---|---|
LinkedIn: | https://www.linkedin.com/in/ninarocket/ |
Email: | [email protected] |
---|---|
LinkedIn: | https://www.linkedin.com/in/jacob-cravey-2367561a8/ |
Email: | [email protected] |
---|---|
LinkedIn: | https://www.linkedin.com/in/linnea-gear/ |