All language subtitles for 002 Starting Setup & A Challenge For You__Downloadly.ir_en

Now for this course section,

I updated our project code a little bit.

You find this updated snapshot attached.

What did I do?

I added a new input folder in the components folder.

So in the components folder, there is this new input folder

which contains a bunch of components

which we're going to need in this module.

These are all regular react components, no page components

which we are going to use for fetching user input

and for then talking to the API routes.

Now I have not added any API routes.

The only other changes I made

besides adding these components

is that I'm using these components.

In the events folder, in the pages folder,

in this event ID component

I added the comments components here

at the bottom of this js X code

and in the index.js file.

So in the homepage component

there I added the newsletter registration.

So if you install all dependencies

and you run this updated snapshot,

then on the starting page, you will see that email

this newsletter sign up part here.

And if you explore a single event,

there if you scroll to the bottom,

you'll see the show comments button

which you can click to view the comments forum

and some dummy comments

which we're going to replace with actual comments

throughout this section.

Now that is the starting state.

And now I gotta challenge for you.

I want you to add a couple of API routes

that handle the newsletter signup,

so that in the end handle an incoming email address.

And then for the moment, maybe just log it to the console,

so you don't need to add any code that writes to a file

or talks to a database,

though you can also do that as an extra exercise.

But for this task here,

just make sure that you accept some requests

from which you retrieve to email

and make sure that such a request

is then sent from the front end.

From this newsletter registration component

here in the registration handler.

Make sure you send the request

to that API route, which you should add.

You can also add validation for the user input

to check whether the entered email was valid,

but that is up to you and not something you have to add.

Now, that is the first challenge, the first task,

it's not the only one though.

We also got to this comments section

and there I want you to do a similar thing.

Add another API route that allows users to submit comments

and make sure that this API route is kind of dynamic.

That the ID of the event

to which the submitted common belongs

is part of the URL

of the API route.

So you'll need to create a dynamic API route here.

Then again, handle incoming requests

and make sure you extract that submit a data

and also handle the case data request

is sent to fetch the data.

So you will need to handle two different HTTP methods.

For the newsletter API route, it was only one method,

you should handle post requests there.

But for the comments API route

you should handle two different HTTP methods.

Incoming post requests which add a new comment

and incoming GET requests, which fetch comments.

Again for the moment it is enough if you just log the data,

if you just log something in your API route.

You don't need to write any other logic,

just return some dummy data in the GET request case

and make sure you do send data and fetch data.

We have this add common handler in comments.js

where you should send that comments data to your API route.

And then also find a way of fetching comments

when the list of comments here is shown.

So when that comment list is shown

make sure you then fetch comments from the API route.

And again, for the moment it's okay

if you just return some dummy data there,

just make sure you implement the base logic

and you add those API routes.

Now definitely try it on your own first.

In the next course lectures,

we're going to add those features together step-by-step

and therefore of course also have a look at those lectures

once you've tried it on your own to see how I solved it

and to compare your solution to mine

and maybe improve or fix your solution

if you got stuck somewhere.

And with that, let's dive in.