All language subtitles for 002 Planning The Project_Downloadly.ir_en

So let's get started with that project.

And for this again,

attached you'll find a starting project,

which I did create through the command line

as shown in the first course section,

but again it's a slightly cleaned up starting project

which simply ensures that we all start

with the same foundation,

with exactly the same starting point.

So download that attached project snapshot,

and then open up the terminal,

navigate into this project folder,

you are already navigated there

if you use the built in terminal in Visual Studio Code,

and then run NPM install,

to install all those third-party packages which we need,

like Next.js for example.

And with that, we're ready to go.

But before we write any code,

let's plan our project and let's plan

which pages we need, for example.

Now, this project will only have four routes,

but with those four routes,

we are going to practice all the things we learned

in the last course section.

We will need a Starting page of course,

so for our domain/nothing,

I wanna reach the Starting page

and on that Starting page,

a list of featured events should be shown.

And keep in mind,

that we are building an application

where we show events,

where users can browse events

and where they potentially in the future,

might also be able to book events.

That's not the focus of this first demo though,

but therefore, of course,

we wanna show a list of events

which users can take a closer look at.

And therefore, we wanna present such events

on the Starting page,

and in the data which we'll use,

we'll basically set a flag

determining whether an event is featured or not,

and if it's featured,

it should show up on the Starting page.

But therefore we'll also add a /events route,

so our domain /events,

which should load a different page,

a page with all events.

So here we then list all the events

we currently offer in our application.

Now of course, users hopefully,

then also click on some event

to get more details about that event

and to potentially sign up for it and book it.

And therefore we will also add an Events Detail page

for /events/ and then some dynamic ID.

So that will not be hard coded,

instead that ID should be dynamic

so that we can load the same page,

the same detail page, for different events

and show data about that selected event.

And last but not least,

I also want to add a feature where users can filter events

by year and month, so that I can not just see all events

or just the featured events,

but that I can also search for all the events

that take place in May, 2021,

let's say.

And therefore, will add another route,

another page with such a dynamic slug segment,

which will load the Filtered Events page,

where we then show all the events matching our filter here.

And we're going to build all these things together

in that project but as I mentioned of course,

also feel free to not jump into the next video immediately,

where we will get started with all of that together,

but instead try setting up those pages,

those routes on your own,

even if you don't add all the other logic yet,

but try creating those,

a route file on your own,

and add some dummy data,

some dummy output to those page components,

and then once you did that,

move on to the next lecture

where we will build this together.