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.