I Hate Shopping Lists: Part I

Since coding up my new blog site, I've been a little bit excited for building more stuff in languages I don't understand. I have a few project ideas, but chief among them is a solution for something I absolutely despise. Every single week, my wife dutifully fills out a shopping list. There are numerous, growing reasons for my wife doing this instead of me - mostly limited to me being totally unreliable in that realm. I just HATE the process. So here we are, the first of a few posts that give away my deep joy for over-engineering solutions.

What's the plan?

A meal planning app - actually. We'll call it ScranPlan. The hope here is to build something that'll allow us to add ingredients (and purchasing units, like grams, millilitres, etc), recipes, and meals to a weekly schedule. The app will, in turn, build us out a shopping list.

Features

I'd like the app to:

• Allow me to add, edit and delete ingredients (shopping list items).
• Allow me to add, edit and delete meals, with the ingredients included.
• Allow me to plan the meals into slots for each of our meals in a given day.
• Have a "leftovers" or "eating out" option to ensure we don't over-buy.
• Allow for drinks and household items, such as orange juice or toothpaste - these are obviously never going to be part of a recipe.
• Generate a shopping list based on the meal plan.
• Be extensible so that I can continue to add meals or items without fear of running out of "space".
• Be most easily usable as a mobile application.

Getting started

Tech Stack

I absolutely love a wee tech stack - especially a new one. As is now customary (whether I like it or not), I asked my old friend AI what I should use.

I had specified a WebApp that prioritised mobile-friendly rendering, and it suggested a React front end with Tailwind CSS. Then as a back end, surprise surprise: Node, but with a SQLLite database - which I've used sparingly over time.

Node and React aren't TOTALLY new to me - although the development timeline has always been historically higher because I simply dont know as much about it as I do about data-centric technologies. That said, with the help of AI, I was fairly sure I'd be able to muddle through more quickly.

I was not wrong.

"Build this for me, please?"

It wasn't quite so simple, but I got started explaining the end goal and quickly got the dependencies set up based on the tech stack. This has always, historically, been the fast bit anyway - because setting up the development environment and dev experience is not a time-consuming task. AI kindly set me up with some (heinous) boilerplate - so I started life with some Windows 98 drop downs and a frozen wasteland of black and white, unstyled artifacts.

Quickly, though, the changes started being made - with marginal improvement prompts and AI writing the code, I made light work of the initial MVP. Any misgivings I had about "enjoying the misery" of programming gave way under the weight of making something look and feel awesome in a way that I simply couldn't have achieved without months of effort before AI.

...and then he deployed

This is always the trickiest bit - and I struggled hard to debug inconsistencies in how the code compiled and interacted in the deployed version.

One of my primary difficulties was to do with the relationship between the ports on the front and back end. After a period of time, I decided to follow AI's guidance and pre-bundle the code into a more classic "node server.js" style starting command.

This did the trick nicely and I now have a really slick, really dynamic meal planning app.

Next Steps

From here, it's a case of ensuring the branding and functionality is right. I want to make the process incredibly easy.

I also need to better understand how to migrate my SQLLite database during redeployments or when I'm adjusting the data schema (although that may not be possible!)