The shopping list

Overview

Have you ever experienced forgetting what to buy which you had just remembered until a second ago? Well, I have, many times. So does my partner.. In order to keep them in memo, I created a app which can remember what to buy for us.

Goal

The goal is to implement create/read/delete interactive communication with database without complicated operation.
'Simple' is kind of important keyword in this app as it is used by not only me but also my partner who is not familier with programming.

You might wonder why 'update' feature(U from CRUD) is not included. That's because my app doesn't need to modify
item(s) in the list. I focused on three create/read/delete features to keep it simple.

Features

A user oparates via communication tool, LINE(I would say the app ,LINE, is one of the most popular communication tool in my coutry.), it has nice API feature which can do webhook to call a function deployed somewhere else, this time I deployed a my codes to supabase. Sending a message to LINE API account (each LINE user can create their own API account) triggers to call it. Once triggered, LINE API sends a request to supabase edge functions where I deployed and get response from it depend on what message a user sends.

The events depends on the input keyword.

Create

If a user input doesn't include either 'Display', 'Clear', 'Delete', which means add a new item to the list, all you have to do is to type a item you want to memo and tap send button.
Below is example how it works, only you need to do is to send a word to line account.

Read

It is main feature of the app, if you want to get a list from database, just type "Display", and it responds with all item in the iist. I set capital D as first letter of keyword because we both are iphone users, which has keyboard feature that first letter of a sentence is automatically in capital as default.

Delete

There are two ways to delete item from the list.

"Delete ***"

one is using keyword "Delete", this is used when you want to delete specific item.

"Clear"

The other way is using "Clear". When you input this keyword, it clears all item in the list.

Utilize Line Feature

Actually(you might imagine), keywords "Diplay" and "Clear" are the frequently used in this app.
so I added ready-for-tapped buttons called "Rich Menu", this is one feature of Line that you can assign arbitrary command easily.
with only one tap, and you can see the list or delete them all.

TechStack

Frontend --- Line message API,
Backend --- supabase edge function in Typescript
Database --- supabase

Summary

This app is useful. we have been using it for a few weeks and works well so far. It is also good practice to understand how to deploy, connect to database.

Thank you for reading.