Background

After trying to decipher the writing scribbled on our communal grocery list, I decided to make an app to solve some of these issues. From the start I knew I wanted a few things: 1) offline use 2) live real-time updates and 3) an easy to use sort function.

Implementation

For the tech stack I decided to go with MERN as I know all of the technologies pretty well. I started writing up the skeleton in React and waited till I had full functionality to start styling. I decided to use Tailwind for styling as I just recently hopped on the bandwagon. I also used React-Query for the first time on the project - I’m never going back. On the database side I used MongoDB and the Mongoose ODM.

As for the features I wanted listed in the section above; I started with offline use - specifically making the app a PWA. This was really interesting and I learned a lot about PWAs. I was using Vite for tooling so it felt natural to use the Vite PWA Plugin.

Once I had the PWA functionality I decided to go for the sorting function next. It was pretty simple - just the ability to sort by department and person as well as ascending and descending sorts.

Lastly I used WebSockets and Socket.io to get real-time updates on the data. This was one of the coolest features as well as being a lot easier than I thought to setup.

Conclusion

All in all the project turned out quite well. I learned more about MERN and solved a problem with a better solution. No more excuses for forgetting items at the grocery store!

Check out the source on GitHub.

Grocery List App is licensed under the GPLv3.

Screenshots