Photo by William Felker on Unsplash


Every problem...

You arrive at the supermarket, you find yourself in the flour department, and you forgot to check if you have any flour left over to make your favorite cake for dinner...

via GIPHY

...has a solution!

Let's create a database of my food stock. So that, at any time when I'm shopping, I could type in the name of the food I need and see if I still have some in my kitchen or not... to avoid ending up with three packs of flour in my 20m2.

via GIPHY

But how to do it?

First of all, you have to create your Database with all the aliment you have at the moment in your kitchen. You will seperate them into two different categories :

To this end, you can create a form that looks like this:


Using a Skeleton-styled form with this code:


Okay...and then? How it works?

Once you've entered all the food you have in your kitchen at the moment, you have to link it with a database. Let's use Firebase realtime Database which is a cloud-hosted database. Data is stored as JSON and synchronized in realtime. All the datas your enter (your food stock) will be stock in this. So you now have to integrate Firebase. For that you can click on "Projects settings" and then copy and paste the given scripts at the bottom of your body tag before using the Firebase that should look like this:


And how to access the database then?

To access the database, you just need this line: "var database = firebase.database();" and use references that represents a specific location in your Database and can be used for reading or writing data to that Database location.

Okay, nice! And finally?

At the end, once you'll be at the supermarket, you will juste have to read the data from your database using the "on() method". If you already have what you're searching for, you will find it on your database and if not, you'll not find it, obvioulsy! And once you've bought something you and you want to add it in your food stock database, you juste have to use the "set( ) method". You'll find all you need to read and write data here.

via GIPHY