Shopping tool

Play with the tool here https://shopping-help.vercel.app/

The Stack

Front end

React

Tailwinds

Next Js

Back End

Database

Turso

Drizzle

Key skills learned

State in React
Local storage in React
Linking to a hosted DB

The problem

I have a problem when I do the weekly shop. My wife writes down the shopping list in recipe order, so similar items are often all over the list. This leads to items being missed on the first pass, and me going round in circles in the supermarket. So 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
Items must be sorted in aisle order
If not in the DB, aisles should be able to be added.

Development

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 piece of paper. Once that was created I started building the website using Next.js. 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 remained 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 hoster, 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 lot of debugging, and took about a day for me to solve 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 aisle numbers to the database and started testing the code. Link worked well, but there were some problems. The largest one was capitalisation of items inputted in the form. If a user inputted “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 capitalised to make them case blind. I also tested to make sure that the aisles were ordered correctly. 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 becoming muscle memory. I gained confidence with using state in React. I understood how to deploy a database with a web host, and link it to a website.

Future ideas for this website

Right/long click to add the aisle
Option to change the aisle
Setting up so you can choose aisles from different supermarkets
Mobile native version.

Side Projects