Pantry Pal was built with the intention of exploring native and low-level options that can be forgotten about while working with modern libraries and tools like React, Vue, Angular, NextJS and more.
In all the project utilizes and explores:
- HTML
- JavaScript with TypeScript
- CSS
- Webpack for bundling
- IndexDB
- Native APIs like the History API, Web Crypto API, and more
- Workbox Service Workers
- Create your shopping list easily, in one page
- Enjoy offline access to your shopping list
- Check items as 'in cart'
- Hide checked items without deleting them
- View estimated trip price total
To create some cheap and easy data persistence, and play in to the theme of using native, low-level APIs, Version 1.0 implements indexDB and Dexie. To provide offline access we use a Workbox Service Worker.
At this stage the project is essentially three index files - index.js, index.css, and index.html with a few accompanying files generated by Workbox, and the minified version of Dexie.
- Allows users to add more data about list items - like quantity and store section
- Offers several ways to view the list - filtering by the store section, sorting checked items to the bottom of the list, and more
- Improved quantity tracking, adding quantity units to track common food measurement
- Bundled code for improved performance
By this point in the project there was a problem - each of the index files were becoming monoliths. Searching through 600 lines of javascript and css is a less than ideal experience, so the decision to use native JS modules was made.
The functionality was broken out into more maintainable blocks of code in the modules directory, the same was done with styles in the styles directory.
This move made it easier for the developer to read and understand the project’s code, but required many stylesheet and script tags in index.html. This dramatically increased the HTTP requests being made, added complexity to debugging related to the tag order, and blocked rendering until all of these files were parsed - things we handled by introducing Webpack and configuring the javascript and css to bundle.
To handle bundling in the Github Pages deploy another branch was set up, gh-pages, and a workflow was introduced to the project that’s responsible for compiling the project code and outputting to the gh-pages branch on deploy.
- Implements Typescript
- Download current shopping list
- Upload a shopping list file
- Resetting app (service worker and db contents) elegantly when deployed
Now that we're bundling, and the code base continues to grow, it was time to add TypeScript. This probably should have been done sooner, but moving the codebase over to TS wasn't too painful, and having it in place will help us avoid developer-introduced bugs.
- Introduces Lists
- Adds enhanced caching of lists
- Enhanced user settings and settings persistance
- Improved routing and page loads
- Mass list and item actions
- Improved upload/download
Designs in this app have been kept simple - using CSS only for most things (even icons), and all designs are mobile-first.