Grocery shopping is a time-consuming process. Making a shopping list and checking items off should be simple, but none of the existing options really met my needs--so I decided to build my own.
Nearly all of my grocery shopping is done at 3 stores, and I buy the same things at regular intervals: bread, milk, cheese, butter, eggs, etc. I wanted an app that:
- Was simple and intuitive: type the name of an item to add it to your list, tap an item in your list after you put it in your cart
- Was sharable & updated in real time: one person can add things to the list while you're shopping--or two people can work off the same list to make shopping faster
- Supported multiple stores: only seeing the things you want makes shopping much faster
- Had a pleasant design:
I decided to build this
✅ Built with TypeScript & React
✅ Data and Authentication from Firebase
🔳 Firebase: the Realtime Database's binary tree structure required careful data architecture--as well as data transformation on both import and export.
🔳 Authentication: required learning both the authentication APIs but also how to provide Authentication context to the app.
🔳 Organized components: I everything in the app, from the buttons to the modals are reusable components. Once those were built, the rest of the app came together quickly.
🔳 Domain regristration & hosting: since I didn't use an all-in-one provider, I needed to configure the registrar to work with the hosting company
🔳 Sharing: Allowing users to easily share lists required a lot of edge-case testing--especially when deleting shared lists
🎯 Auto populate lists It will be easy to learn how often each user buys an item--and use that to suggest items they might need
🎯 Behavior-based sorting For shoppers who take the same route through the store each time--items can be placed in the order they're checked off the list
🎯 Anonymous app usage Allow users to try the app without creating an account