-
It's easy to create a free account or use these demo logins.
-
Email: [email protected]
-
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.
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 Vehicle API
- Project Management Tools:
- 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
- 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
- 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!
| 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/ |
