1
00:00:01,000 --> 00:00:05,000
So let's get started with that project.

2
00:00:05,000 --> 00:00:06,000
And for this again,

3
00:00:06,000 --> 00:00:08,000
attached you'll find a starting project,

4
00:00:08,000 --> 00:00:11,000
which I did create through the command line

5
00:00:11,000 --> 00:00:14,000
as shown in the first course section,

6
00:00:14,000 --> 00:00:17,000
but again it's a slightly cleaned up starting project

7
00:00:17,000 --> 00:00:21,000
which simply ensures that we all start

8
00:00:21,000 --> 00:00:23,000
with the same foundation,

9
00:00:23,000 --> 00:00:25,000
with exactly the same starting point.

10
00:00:25,000 --> 00:00:28,000
So download that attached project snapshot,

11
00:00:28,000 --> 00:00:31,000
and then open up the terminal,

12
00:00:31,000 --> 00:00:33,000
navigate into this project folder,

13
00:00:33,000 --> 00:00:36,000
you are already navigated there

14
00:00:36,000 --> 00:00:40,000
if you use the built in terminal in Visual Studio Code,

15
00:00:40,000 --> 00:00:42,000
and then run NPM install,

16
00:00:42,000 --> 00:00:46,000
to install all those third-party packages which we need,

17
00:00:46,000 --> 00:00:49,000
like Next.js for example.

18
00:00:49,000 --> 00:00:51,000
And with that, we're ready to go.

19
00:00:51,000 --> 00:00:53,000
But before we write any code,

20
00:00:53,000 --> 00:00:56,000
let's plan our project and let's plan

21
00:00:56,000 --> 00:00:59,000
which pages we need, for example.

22
00:00:59,000 --> 00:01:03,000
Now, this project will only have four routes,

23
00:01:03,000 --> 00:01:06,000
but with those four routes,

24
00:01:06,000 --> 00:01:09,000
we are going to practice all the things we learned

25
00:01:09,000 --> 00:01:11,000
in the last course section.

26
00:01:11,000 --> 00:01:14,000
We will need a Starting page of course,

27
00:01:14,000 --> 00:01:16,000
so for our domain/nothing,

28
00:01:16,000 --> 00:01:18,000
I wanna reach the Starting page

29
00:01:18,000 --> 00:01:21,000
and on that Starting page,

30
00:01:21,000 --> 00:01:25,000
a list of featured events should be shown.

31
00:01:25,000 --> 00:01:26,000
And keep in mind,

32
00:01:26,000 --> 00:01:29,000
that we are building an application

33
00:01:29,000 --> 00:01:30,000
where we show events,

34
00:01:30,000 --> 00:01:32,000
where users can browse events

35
00:01:32,000 --> 00:01:35,000
and where they potentially in the future,

36
00:01:35,000 --> 00:01:38,000
might also be able to book events.

37
00:01:38,000 --> 00:01:41,000
That's not the focus of this first demo though,

38
00:01:41,000 --> 00:01:42,000
but therefore, of course,

39
00:01:42,000 --> 00:01:44,000
we wanna show a list of events

40
00:01:44,000 --> 00:01:47,000
which users can take a closer look at.

41
00:01:47,000 --> 00:01:50,000
And therefore, we wanna present such events

42
00:01:50,000 --> 00:01:51,000
on the Starting page,

43
00:01:51,000 --> 00:01:53,000
and in the data which we'll use,

44
00:01:53,000 --> 00:01:55,000
we'll basically set a flag

45
00:01:55,000 --> 00:01:58,000
determining whether an event is featured or not,

46
00:01:58,000 --> 00:01:59,000
and if it's featured,

47
00:01:59,000 --> 00:02:02,000
it should show up on the Starting page.

48
00:02:02,000 --> 00:02:07,000
But therefore we'll also add a /events route,

49
00:02:07,000 --> 00:02:10,000
so our domain /events,

50
00:02:10,000 --> 00:02:12,000
which should load a different page,

51
00:02:12,000 --> 00:02:15,000
a page with all events.

52
00:02:15,000 --> 00:02:17,000
So here we then list all the events

53
00:02:17,000 --> 00:02:20,000
we currently offer in our application.

54
00:02:20,000 --> 00:02:22,000
Now of course, users hopefully,

55
00:02:22,000 --> 00:02:24,000
then also click on some event

56
00:02:24,000 --> 00:02:27,000
to get more details about that event

57
00:02:27,000 --> 00:02:31,000
and to potentially sign up for it and book it.

58
00:02:31,000 --> 00:02:35,000
And therefore we will also add an Events Detail page

59
00:02:35,000 --> 00:02:40,000
for /events/ and then some dynamic ID.

60
00:02:40,000 --> 00:02:43,000
So that will not be hard coded,

61
00:02:43,000 --> 00:02:45,000
instead that ID should be dynamic

62
00:02:45,000 --> 00:02:49,000
so that we can load the same page,

63
00:02:49,000 --> 00:02:52,000
the same detail page, for different events

64
00:02:52,000 --> 00:02:56,000
and show data about that selected event.

65
00:02:56,000 --> 00:02:58,000
And last but not least,

66
00:02:58,000 --> 00:03:03,000
I also want to add a feature where users can filter events

67
00:03:03,000 --> 00:03:08,000
by year and month, so that I can not just see all events

68
00:03:08,000 --> 00:03:10,000
or just the featured events,

69
00:03:10,000 --> 00:03:14,000
but that I can also search for all the events

70
00:03:14,000 --> 00:03:18,000
that take place in May, 2021,

71
00:03:18,000 --> 00:03:19,000
let's say.

72
00:03:19,000 --> 00:03:21,000
And therefore, will add another route,

73
00:03:21,000 --> 00:03:26,000
another page with such a dynamic slug segment,

74
00:03:26,000 --> 00:03:29,000
which will load the Filtered Events page,

75
00:03:29,000 --> 00:03:33,000
where we then show all the events matching our filter here.

76
00:03:33,000 --> 00:03:37,000
And we're going to build all these things together

77
00:03:37,000 --> 00:03:41,000
in that project but as I mentioned of course,

78
00:03:41,000 --> 00:03:46,000
also feel free to not jump into the next video immediately,

79
00:03:46,000 --> 00:03:49,000
where we will get started with all of that together,

80
00:03:49,000 --> 00:03:53,000
but instead try setting up those pages,

81
00:03:53,000 --> 00:03:55,000
those routes on your own,

82
00:03:55,000 --> 00:03:58,000
even if you don't add all the other logic yet,

83
00:03:58,000 --> 00:03:59,000
but try creating those,

84
00:03:59,000 --> 00:04:01,000
a route file on your own,

85
00:04:01,000 --> 00:04:03,000
and add some dummy data,

86
00:04:03,000 --> 00:04:07,000
some dummy output to those page components,

87
00:04:07,000 --> 00:04:08,000
and then once you did that,

88
00:04:08,000 --> 00:04:10,000
move on to the next lecture

89
00:04:10,000 --> 00:04:12,000
where we will build this together.