Why did I build it?

How much do you enjoy the process of buying groceries: making a shopping list and then dragging yourself round a soulless supermarket, weaving around people who seem to be there for a day out?

Let's be honest here: it's a pain in the arse!

I'm a software engineer so I'm always looking for ways to ease life's pain points. That mindset led me to build this.

A potential secondary, longer-term use for the data that we are gathering by using this app: a shopping list that creates itself by analysing the frequency that you tend to buy things. Maybe?

What does it do?

The app seeks to tackle three main pain points:

PAIN #1 When you decide on the meals for the next few days you then have to look up the ingredients before you can add them to the list - and that happens every time you want to cook that meal because you can never remember all of the ingredients.

• SOLUTION In the app you add meal ingredients once. In future, you select the meal and all of its ingredients get added to your list.

PAIN #2 You make your list in 'cupboard order' but, at the shop, you need your list in 'shop order'.

• SOLUTION The app knows where you store things at home and where they live in the supermarket so you can build your list in cupboard order and re-order it in when you get to the shop.
• And when the supermarket is reorganised to make room for christmas tat you can drag & drop the shop departments into the new order.

PAIN #3 The Catch 22 whereby the fact that you have run out of tacos means that you forget to add tacos because tacos aren't in the cupboard to remind you that you need tacos. I'm sure you get what I mean. (By the way - this doesn't only apply to tacos!).

• SOLUTION The app knows what should be in each cupboard and reminds you to check - even when you have run out. And it works in cupboard order so you don't have to backtrack.

I built it primarily as a mobile phone app because I don't want to take my laptop to Tesco. The image you see here is a composite of 3 iPhone screenshots. The eagle-eyed will notice that I can't spell 'large'.

Geeky details

Back end

• Express.js server connected to a PostgeSQL database

Front end

I wanted to avoid using a frontend JavaScript framework or library for this. So I looked into alternative ways that you can connect a front end to an Express server. I came across a templating tool called Pug which works quite well with Express. So that's what I used.

• Pug, which compiles into valid HTML
• Vanilla JavaScript
• Bootstrap for what I laughingly refer to as styling