Side Projects

The problem

I have a problem when I do the weekly shop, my wife writes down the shopping list, she does it in recipe order, so similar items are often all over the list. This leads to items being missed on the first pass, and me having to go round in circles in the supermarket I decided to create a website to fix my problem.

Planning

To build on top of the skills I had learned when building this website I decided to use Next.js as the front end framework for this device. I knew I wanted to develop my skills with databases so the next step was to choose a DB provider. I decided I wanted to use a sql DB as I was familiar with this from my CS degree. I wanted a DB provider that I could use for other projects in the future. For this reason I chose Turso DB.

Once I had chosen the tools I had to decide the minimum requirements. These were:

• Items must be able to be put in the shopping list
• Items must stay on the page on reloading
• If know if know items must be sorted in isle order
• Once know by the useser isles should be able to be added.

Development

Building the skeleton.

I started by creating a design for the website. As it was a simple one page website this did not take long, and was done on a bit of paper. Once that was spun up the file structure with next.js and started building the website. This involved me learning how to use state, to store the information on the cards, and also local storage to make sure that when reloaded the cards remind in place. Once I had coded this up I had a website that allowed cards to be added and removed by a user.

The next step was to link the built website with the DB hoaster, Turso. To do this I first set up the database via the Turso command line interface. I then connected them together following the instructions on the Turso website. This involved quite a bit of debugging, and took about a day for me to solve what the problem. This was a missing next.jx configuration file that had not been mentioned on turso website. To solve this problem I used various forums and the Claud LLM.

Once the DB was linked to my website I created the interface for adding in isle numbers to the database and started testing the code. Link worked well, but there were some problems. The largest one was capitalisation of items imputed in the form. If a user imputed “tomato” and Tomato” they would be counted as separate items in the DB. This is a problem. To solve this all items sent to the database were caplised to make them case blind. I also tested to make sure that the isles were ordered corecley. This happened as expected. With this done I was happy with the state of development.

What I learned from this project.

I continued to get familiar with next.js and typescript, with a lot of features within it become mussel memory. I gained confidence with using state in react. I understood how to deploy a database with a web hoast, and link it to a website.

Future ideas for this website

• Right/long click to add the isle
• Option to change the isle
• setting up so you can choose isles from different supermarkets
• Mobile native version.