All language subtitles for 002 Moving _Meals_ Data To The Backend_en

So were you successful?

If you didn't try it on your own,

definitely consider trying it on your own,

practicing what you learned

is an important aspect of learning React.

Either way, we're now going

to implement these features together

and I will actually start with fetching the meals data,

even though that's the bottom most point here,

but it will start with that because I think it makes sense

that we are able to load that data

from a server, from a backend.

For this in the Firebase Realtime Database console,

I'll add a new node manually and I will name it, meals,

and then click this plus again here,

to add some nested data.

And then I just want to add my meals data to Firebase here.

Now for this, I'll start by giving every meal an ID here.

So I'll just use m1 as a key.

And then the value for that will be

the nested data for that meal.

With that, I'm kind of replicating

that Firebase data structure we saw in the Http section

for the dummy data I got here.

So for the meal with the ID m1,

I want to have a name field,

and the value of Sushi,

a description field with this value,

and a price field with this value.

So let's start with the name field here,

and enter sushi as a value, and click add.

And now this entry was added.

Now we can add more nested data to this m1 meal

by clicking this plus,

and adding the description field,

where I then enter a description like this,

and click add,

and add a price field

which is this value, which has this value.

So let's enter that.

Okay, so with that we get the first meal.

Now let's click on the plus here, next to meals,

and let's add a new meal with a different ID, m2,

and then add, click on this plus here

to add the nested data, like the name,

and that will then be schnitzel here in my case,

click add,

and then add the description here,

which has this text here like this,

and let's add the price field

with a value of 16.5.

So now we got the second meal added.

And I'll continue doing that.

You can of course, fast forward here if I'm boring you.

I will now add the third meal

with a name of barbecue burger, like that,

click add,

and then also add the description here,

American raw and meaty,

and also add a price for that third meal here.

So let's add a price field like this.

And now there's only one more meal to go, the green bowl.

For that, I'll add a new meal with an ID of m4,

click the plus,

and for the name field it's now green bowl,

for the description field I will now add

this description here like this,

and then last but not least,

for the price field, it's 18.99.

And with that, all the data is on this Firebase server.

And of course, if we were the owner

of this food delivery service,

we could be administrating the data here.

Now let's work on this front end,

and let's fetch that data from that server.

So here available meals,

I now no longer want to use the dummy meals array.