Keep track of what you have on hand so you always know - even on the go!
Backstock is a home inventory app for tracking the items you have, their location, ideal quantities, and expiration dates!
Tech used: Node.js, Express.js, EJS, Passport, Bootstrap & JavaScript
Backstock is a full stack web application following MVC architecture. It runs on Node.js and Express for the backend and EJS to render the views. Users can sign up using passport authentication and begin adding new backstock items to their inventory. The inventory list can be sorted by several columns and filtered through typing in the Search bar. Individual items can be edited if quantities or other information needs to be updated. Conditional rendering helps users know when items need to be restocked or when they are expired.
Version 1 - MVP - Add items to a Backstock list which can be sorted, filtered, updated, and deleted.
Version 2 - Added shopping list functionality for users to add unique items to their shopping list or to import them directly from the Backstock list. When importing, the quantity may be reflective of the ideal quantity and the quantity already on hand. Users can delete items from the shopping list without affecting their Backstock list.
Future iterations might include notifying users when expiration dates are approaching, filtering items based on multiple categories, marking shopping list items as complete, and the ability to add (manually or automatically) all out-of-stock items to the shopping list.
I learned a lot about working with Bootstrap classes and when this was advantageous, and when it was better to use my own styling. Sorting tables, specifically dates, proved to be more difficult than first anticipated. Date rendering also presented challenges, and I ended up using Day.js which is a suggested replacement for the ever-popular Moment.js, which is considered legacy.
When changing some client-side JavaScript functions to forms with method override, I learned about methods submit the same form using different methods using button attributes such as formaction and formmethod.
Portfolio
|
Theory Revolution
|
Ben Folds Songs
|