1
00:00:01,000 --> 00:00:03,000
Now for that,

2
00:00:03,000 --> 00:00:05,000
I'm back in the events project

3
00:00:05,000 --> 00:00:07,000
as we left it,

4
00:00:07,000 --> 00:00:09,000
attached you find my snapshot,

5
00:00:09,000 --> 00:00:11,000
and, there we can spin up

6
00:00:11,000 --> 00:00:13,000
that development server again,

7
00:00:13,000 --> 00:00:15,000
with NPM run dev.

8
00:00:15,000 --> 00:00:18,000
If we then visit local host free thousand,

9
00:00:18,000 --> 00:00:20,000
we see our events page,

10
00:00:20,000 --> 00:00:23,000
and we can explore the individual events,

11
00:00:23,000 --> 00:00:25,000
and do all those things we,

12
00:00:25,000 --> 00:00:28,000
already practiced in the last project section.

13
00:00:29,000 --> 00:00:31,000
Now up to this point of course,

14
00:00:31,000 --> 00:00:33,000
all the data is in the end,

15
00:00:33,000 --> 00:00:36,000
how it's coded into our pages.

16
00:00:36,000 --> 00:00:39,000
Actually not in the page components themselves,

17
00:00:39,000 --> 00:00:42,000
but we have this dummy data Java script file,

18
00:00:42,000 --> 00:00:45,000
which, well, holds all that data,

19
00:00:45,000 --> 00:00:48,000
and then exposes various helper functions

20
00:00:48,000 --> 00:00:50,000
for retrieving that data,

21
00:00:50,000 --> 00:00:52,000
and working with that data.

22
00:00:52,000 --> 00:00:54,000
And that ultimately is,

23
00:00:54,000 --> 00:00:59,000
not really how we now wanna work with that.

24
00:00:59,000 --> 00:01:01,000
It would be more realistic that,

25
00:01:01,000 --> 00:01:04,000
this data, our events,

26
00:01:04,000 --> 00:01:06,000
are stored in some database,

27
00:01:06,000 --> 00:01:08,000
or in some file,

28
00:01:08,000 --> 00:01:11,000
or coming from another API.

29
00:01:11,000 --> 00:01:16,000
And here, I wanna put those events, into Firebase,

30
00:01:16,000 --> 00:01:19,000
this dummy backend we already used

31
00:01:19,000 --> 00:01:21,000
in the last core section,

32
00:01:21,000 --> 00:01:23,000
so that we can fetch the data from there.

33
00:01:23,000 --> 00:01:26,000
Just so that we have an easy to use backend,

34
00:01:26,000 --> 00:01:28,000
which exposes an API,

35
00:01:28,000 --> 00:01:29,000
which we can query.

36
00:01:30,000 --> 00:01:32,000
Now, I have my sales data in there,

37
00:01:32,000 --> 00:01:33,000
from the last core section,

38
00:01:33,000 --> 00:01:36,000
I'm using the same Firebase project,

39
00:01:36,000 --> 00:01:38,000
you could of course also create a new one.

40
00:01:38,000 --> 00:01:42,000
Just make sure that you do use the real time database.

41
00:01:42,000 --> 00:01:44,000
I will continue with this one though.

42
00:01:44,000 --> 00:01:47,000
And I will add my events here,

43
00:01:47,000 --> 00:01:49,000
into that same database.

44
00:01:49,000 --> 00:01:52,000
So for that, we can click on the plus here,

45
00:01:52,000 --> 00:01:54,000
next to that database name,

46
00:01:54,000 --> 00:01:58,000
and give this, a name of events, this node,

47
00:01:58,000 --> 00:02:02,000
and then add a new nested document in there,

48
00:02:02,000 --> 00:02:05,000
which now has basically the event ID

49
00:02:05,000 --> 00:02:07,000
as a name, e1 let's say,

50
00:02:07,000 --> 00:02:10,000
and then we nest more data in there,

51
00:02:10,000 --> 00:02:14,000
and we transfer the title into Firebase.

52
00:02:14,000 --> 00:02:17,000
So I'll give this key, a name of title,

53
00:02:17,000 --> 00:02:19,000
and the value then,

54
00:02:19,000 --> 00:02:23,000
is the title I had here, like this.

55
00:02:25,000 --> 00:02:25,000
And now I'm going

56
00:02:25,000 --> 00:02:28,000
to add all the other data as well,

57
00:02:28,000 --> 00:02:30,000
like the description.

58
00:02:30,000 --> 00:02:33,000
So grab that description string here,

59
00:02:33,000 --> 00:02:35,000
give this a name of, description,

60
00:02:35,000 --> 00:02:37,000
paste in that value,

61
00:02:37,000 --> 00:02:41,000
and repeat that for the location and so on.

62
00:02:41,000 --> 00:02:43,000
Now I don't wanna bore you,

63
00:02:43,000 --> 00:02:45,000
so I will fast forward here.

64
00:02:45,000 --> 00:02:48,000
You of course can migrate this on your own.

65
00:02:48,000 --> 00:02:50,000
Just pause the video

66
00:02:50,000 --> 00:02:52,000
and migrated it, util you're done.

67
00:02:52,000 --> 00:02:53,000
You also don't have

68
00:02:53,000 --> 00:02:55,000
to migrate all the data of course,

69
00:02:55,000 --> 00:02:57,000
if you don't want to,

70
00:02:57,000 --> 00:03:00,000
I will migrate all the data though,

71
00:03:00,000 --> 00:03:03,000
but you can of course also speed this process up a bit

72
00:03:03,000 --> 00:03:05,000
and just migrate some data.

73
00:03:05,000 --> 00:03:07,000
Important for the images,

74
00:03:07,000 --> 00:03:10,000
we wanna keep the paths which we used before,

75
00:03:10,000 --> 00:03:13,000
because I will keep the images local,

76
00:03:13,000 --> 00:03:15,000
in the public folder.

77
00:03:15,000 --> 00:03:18,000
That's not super realistic,

78
00:03:18,000 --> 00:03:22,000
and we will re-explore image storage later again,

79
00:03:22,000 --> 00:03:23,000
but for the moment,

80
00:03:23,000 --> 00:03:25,000
let's stick to this setup.

81
00:03:25,000 --> 00:03:27,000
So I will just keep the path,

82
00:03:27,000 --> 00:03:30,000
which points to the locally stored images,

83
00:03:30,000 --> 00:03:32,000
in the public folder here.

84
00:03:32,000 --> 00:03:33,000
So therefore here,

85
00:03:33,000 --> 00:03:37,000
I now add isFeatured, set this to false.

86
00:03:37,000 --> 00:03:41,000
And now again, I will just complete this off screen,

87
00:03:41,000 --> 00:03:45,000
and I'm back once I migrated all the events.

88
00:03:53,000 --> 00:03:54,000
Okay, so I'm done.

89
00:03:54,000 --> 00:03:57,000
I copied over all the data here,

90
00:03:57,000 --> 00:03:59,000
into Firebase, those free events,

91
00:03:59,000 --> 00:04:01,000
and therefore this is now prepared,

92
00:04:01,000 --> 00:04:03,000
such that we can query it.

93
00:04:03,000 --> 00:04:06,000
That's therefore we're gonna go to dive in, next.

94
00:04:06,000 --> 00:04:08,000
Now for this course section,

95
00:04:08,000 --> 00:04:11,000
I strongly recommend that you don't continue

96
00:04:11,000 --> 00:04:13,000
with me immediately,

97
00:04:13,000 --> 00:04:15,000
but that instead you pause,

98
00:04:15,000 --> 00:04:18,000
and you're try implementing data fetching

99
00:04:18,000 --> 00:04:19,000
on your own first.

100
00:04:19,000 --> 00:04:23,000
Go through those different pages, and think about,

101
00:04:23,000 --> 00:04:26,000
the different data fetching approaches you learned,

102
00:04:26,000 --> 00:04:28,000
in the last lectures, in the last section.

103
00:04:28,000 --> 00:04:31,000
Then add the different approaches,

104
00:04:31,000 --> 00:04:33,000
which make the most sense to you,

105
00:04:33,000 --> 00:04:35,000
to the different pages.

106
00:04:35,000 --> 00:04:36,000
So look at the pages,

107
00:04:36,000 --> 00:04:38,000
evaluate which data fetching approach,

108
00:04:38,000 --> 00:04:41,000
might make the most sense for the given page.

109
00:04:41,000 --> 00:04:43,000
And then add it.

110
00:04:43,000 --> 00:04:45,000
Now once you try this on your own,

111
00:04:45,000 --> 00:04:47,000
definitely go through this module,

112
00:04:47,000 --> 00:04:50,000
to gather with me, with these modules lectures,

113
00:04:50,000 --> 00:04:52,000
to see how I solved this,

114
00:04:52,000 --> 00:04:54,000
and what my reasoning was,

115
00:04:54,000 --> 00:04:57,000
for fetching data in different ways,

116
00:04:57,000 --> 00:04:59,000
in those different page components.