#6: Back-End with Firebase Database

The back-end part of the application was worked on halfway through Sprint 4.

In the recipes section of the website, users will be able to search for recipes based on the recipe name (in SQL, it'll be a LIKE operator). Below the search bar will be all the recipes pulled from the database. These recipes will contain the recipe image, recipe name, tags, as well as descriptions of up to 3 lines (anything more than that will end with an ellipsis (...)).

recipes page

I decided to make a simple JavaScript array to store all the data that I need. Basically hard-coded data. I started coding from the CSS, before moving on to pulling data from Firebase.

To retrieve data from Firebase, I first got a reference to the 'Recipes' location of the database. From this reference, I read the contents of the data from the data snapshot, and looped through this snapshot to get the value of all the recipe contents. I stored these data in an object and then added it into the recipes array (containing multiple objects).

retrieve data

The following image is a screenshot of how the database is structured:

how data is stored in firebase

After retrieving these data and storing it in the recipes array, I proceeded to dynamically display these recipes by adding them straight to the HTML code (and did some styling of course).

dynamically displaying recipe details

When a visitor clicks on each of these recipe divs, they will be redirected to the individual recipe pages. I made use of query strings here. Each of the recipes (objects) are linked to an index, the index of each recipe that was clicked was passed into the URL as the parameter.

prototype of individual recipes

I retrieved the parameter for the current index that was passed into the URL, and then dynamically added the recipe title, image, description and etc., on to the page.

Following which, I also managed to do up the authentication portion of the web to allow users to sign in, sign out, and create a new account. When logged in, they are able to add recipes to their favourites list. This will be talked on later in the next post on Firebase Authentication.

Personal Notes

I completely forgot about query strings this time round, so I tried different methods of displaying the details dynamically before realising that query strings exist. 🙂

I also didn't manage to do up the search feature because of a lack of time, but will try to find time in the next few days to code that part in if I can. It'll just show the recipes for now. I'll also try to do up the recipe filtering if there's enough time. T_T

Wan Ning