Now for that,
I'm back in the events project
as we left it,
attached you find my snapshot,
and, there we can spin up
that development server again,
with NPM run dev.
If we then visit local host free thousand,
we see our events page,
and we can explore the individual events,
and do all those things we,
already practiced in the last project section.
Now up to this point of course,
all the data is in the end,
how it's coded into our pages.
Actually not in the page components themselves,
but we have this dummy data Java script file,
which, well, holds all that data,
and then exposes various helper functions
for retrieving that data,
and working with that data.
And that ultimately is,
not really how we now wanna work with that.
It would be more realistic that,
this data, our events,
are stored in some database,
or in some file,
or coming from another API.
And here, I wanna put those events, into Firebase,
this dummy backend we already used
in the last core section,
so that we can fetch the data from there.
Just so that we have an easy to use backend,
which exposes an API,
which we can query.
Now, I have my sales data in there,
from the last core section,
I'm using the same Firebase project,
you could of course also create a new one.
Just make sure that you do use the real time database.
I will continue with this one though.
And I will add my events here,
into that same database.
So for that, we can click on the plus here,
next to that database name,
and give this, a name of events, this node,
and then add a new nested document in there,
which now has basically the event ID
as a name, e1 let's say,
and then we nest more data in there,
and we transfer the title into Firebase.
So I'll give this key, a name of title,
and the value then,
is the title I had here, like this.
And now I'm going
to add all the other data as well,
like the description.
So grab that description string here,
give this a name of, description,
paste in that value,
and repeat that for the location and so on.
Now I don't wanna bore you,
so I will fast forward here.
You of course can migrate this on your own.
Just pause the video
and migrated it, util you're done.
You also don't have
to migrate all the data of course,
if you don't want to,
I will migrate all the data though,
but you can of course also speed this process up a bit
and just migrate some data.
Important for the images,
we wanna keep the paths which we used before,
because I will keep the images local,
in the public folder.
That's not super realistic,
and we will re-explore image storage later again,
but for the moment,
let's stick to this setup.
So I will just keep the path,
which points to the locally stored images,
in the public folder here.
So therefore here,
I now add isFeatured, set this to false.
And now again, I will just complete this off screen,
and I'm back once I migrated all the events.
Okay, so I'm done.
I copied over all the data here,
into Firebase, those free events,
and therefore this is now prepared,
such that we can query it.
That's therefore we're gonna go to dive in, next.
Now for this course section,
I strongly recommend that you don't continue
with me immediately,
but that instead you pause,
and you're try implementing data fetching
on your own first.
Go through those different pages, and think about,
the different data fetching approaches you learned,
in the last lectures, in the last section.
Then add the different approaches,
which make the most sense to you,
to the different pages.
So look at the pages,
evaluate which data fetching approach,
might make the most sense for the given page.
And then add it.
Now once you try this on your own,
definitely go through this module,
to gather with me, with these modules lectures,
to see how I solved this,
and what my reasoning was,
for fetching data in different ways,
in those different page components.