Simple Car Cost App


Web Development

Updated Apr 5th, 2022

The point of the car cost app was to build a web application with data persistence beyond local storage via a database, with CRUD functionality, and put that functionality behind an authorization wall that required user registration.

Need to rename and allude to some sort of: simple straightline depreciation. No residual value, no time cap. Car comparison calculator. Rank cars based on how much “per remaining month” using the most basic straight line deprecation concept, (0 tax/fee/interest/residual). Assumes all else is equal. Including html widgets that people can embed on their own website and has a link back to the site.

Two broad strategies to have defaults for useful and monthly miles but can be changed for each car, the problem is changing includes editing each car yourself. the other option is to have defaults and customize in user settings that effects all of your cars.

If you update your settings for useful miles to below a car in your list you get a warning that “there is at least one vehicle in your list with mileage above this amount which will result in negative values”

Saw this true depravation calculator online and has some cool features.

Need a simple calculator on the homepage to create and save to local storage. Sign up to save your cars link.

Where the idea came from?

Feature Request: Change password minimum from 12 characters to 6 or similar.

Feature Request: Based on settings change update existing items.

Feature Request: In Validation Cannot miles over useful life because it results in negatives?!

Feature Request: Prompt for ‘are you sure you want to delete”, because edit and delete buttons are really close.

Feature Request: Forgot Username/Password, Reset Password via email link.

Feature Request: Set max items to avoid automated script from blowing up my db/server.

Feature Request: Add notes field to item?

Feature Request: After registering you get a question saying here are the defaults, Roll with it or change?

Feature Request: The page looks very boring with bootstrap 4 so I’ve got to tweak some CSS maybe bring in some SVG images and icons with micro animations and potentially some parallax.

Feature request: Live validation for create-car fields. The link is a field that really scares me, the potential for malicious or inappropriate links, strings with or without the HTTP prefix, etc. (Limit field length for description, show error for min and max values for cost and miles, show error if link not left blank and no http or https. )

Feature Request: Settings Modal or page template where you can customize useful life in months and miles driven per year. Can this be right in UI? How does this affect existing items. Can’t say “from here on out use these numbers”. Also wouldn’t want “for these three do this and for these four do this.” Site has defaults, there’s a note about the defaults the site uses. There’s an ability to customize the defaults.

Feature Request: explainer page or FAQ, maybe a list of articles related to the app and the cost of vehicles.

Feature request: How can you let a user delete all items. Very similar to having multiple lists.

Feature Request: Let users delete their account.

Feature Request: Let users share an individual item or their entire list

Feature Request: Let users add, edit, and delete multiple lists, (sedans, trucks, my list, my wife’s list).

Feature request: Note: This is too advanced for this app. Allow users to paste in a url from results of one of their searches and have our script, scrape data and run a report with analytics.

Example car gurus link:

https://www.cargurus.com/Cars/inventorylisting/viewDetailsFilterViewInventoryListing.action?sourceContext=carGurusHomePageBody&bodyTypeGroup=bg7&zip=34685#listing=277216729

Does car gurus have an API? No. But test scrape using node and puppeteer.

Completed 4/26/20

Add 1000’s Separator

Brought in font-awesome car logo and quick styling

Tweak label description text on input fields

Run test and validate for zero for cost or miles or absurdly high numbers

If link left blank or no http or http then don’t show link icon at all

If zero list items show different text add a link.

Locked down profile screen so you must be logged in and the author.

Completed: Need Sortable functionality, (maybe even filterable? What happens if a user’s list grows to dozens or hundreds or thousands. Only show the sort icon if there is more than one item.

Note on Custom Settings Page:

To Ensure The Visitor Matches Owner We are using req.params.username of brandon And req.session.user.username of: brandon

For now this is fine but probably want to use an id type or value in url and logic? If the username was able to be changed as a customizable setting both values would change.

We do have access to req.visitorId something like: 60880228b51700411ac3 but this is based on session data on login. Unlike an item, a settings page doesn’t have an id since instead it’s username is in the url. There is only one page per user whereas a post or item there could be hundreds or thousands.

No Request Data in Model Files

I was surprised to notice that there is no req.params or req.session data available in the model files. You pass the data in from the controller function which always have (req, res) as parameters.

Sorting Items

I think one of the reasons I was having a tough time is I’m trying to write front-end JavaScript on the server. If you look at the front end interaction for things like buttons they’re all sending axios requests to the server. This difference between front end code and back end code It has me starting to see the benefits of react, You would just store the items in state and react would handle the sorting manipulations without re-rendering the entire page. Without getting too far over my skis let’s still focus on the task at hand How can we sort these items. I think the easiest way would be to just have the form submit an axios request was an update button next to the input.

Another idea would be to take a close look at the live validation chapters or one of the other front end applications like the search or chat.

If using a button you can submit a axios request without having to submit a POST request to a new url right? I can’t imagine you’d want to have a separate URL depending on the sort selection.

Update: Should be able to send a an axios post request in a front-end js file titled itemSort.js that routes to post/profile:username. If Logged in, If Owner, Send The Select Option Value to the server to have the items array remapped.

This article, or at least the first paragraphs, explain that you don’t want to keep sending requests to the server and you can do your sorting in the DOM.

Sorting Seemed So Simple on the server but a trip to the server should not be necessary to sort.

Should we send created date to the browser either hidden or in card?

Drop down only shown when two items automagically?

Settings Update Effects Previous Items

Having a tough time with updateMany() mongomethod and I’m starting to think the database schema may be wrong or math should be done on the server and not stored in the database. I think it’s the later.

I have updated the database no problem but am having trouble updating the rem months and cost per rem month for each document in collection with that username.

Maybe if I have all the ingredients in the db and make the soup in the model file or kitchen and then send to the controller and the view.

This article was super helpful and, of course, need a night of rest to let my brain stew on it. Use .find().forEach() and updateOne()

The Settings/Update thing took about a day to resolve. I’m not convinced it is best to even store rem months and cost per rem months in db but instead generated in model file.

Random: And you can probably scrape carrot coolers or make an undocumented API request which you would want to try and do before scraping. In the dev tools you can check out the network tab and then hit filter XHR to see Ajax requests and then maybe use the decode URI component and just try to ping some API end points.

Settings Change Requires Log-In

We still need users to log out and log back in for future changes to take effect so they automatically get routed out Is there a way to fix this? How’s it ran into issues trying to send a flash message before redirecting and logging the user. Clearly need some like async code there that I couldn’t get on a first pass The error message kept reading cannot set headers after sent to the client. Any newly created items don’t use new settings because it’s stored on the session data and this doesn’t get updated so I’m not sure how you can manually update the session data if that would do it. I mean you kind of do a manual save for flash messages.