Are back and services are now in a pretty good spot.
We're going to start to move back over to the front end portion of our application.
So specifically the next J.S. app in this video, I want to give you a quick reminder on what we have
done inside the client app so far.
Give you a quick reminder about a couple of important topics around next G.S..
I think it started working on our next couple of pages for this thing.
So let's get to it.
Inside my client directory, I'm going to find the index dot G.S. file.
So this index dodgiest file currently serves as the landing page or our client application.
The only thing we are really showing on this landing page right now is some information about whether
or not the user is currently signed in on this landing page.
We also have some pages for handling.
Sign in, sign out and sign up.
That is it.
That's all we have inside of you right now.
So with that in mind, let's go take a look at a couple of mockups and just start to picture exactly
what we need to build.
OK.
So we've got our sign up done.
We've got sign in.
So now going to start to move on to some of these other screens along the list.
The next big screen that we're going to work on is going to be a list of tickets for sale.
We're going to make this into the landing page of our app.
So in other words, we're going to go to the index dot G.S. file inside of our pages directory.
And we're going to very quickly start to replace a lot of the code inside of here, rather than just
telling the user whether or not they are signed in.
We're going to instead fetch a list of tickets and show them to the user.
Whenever a user clicks on one of these tickets, we're then going to take them to a page that will give
them more info about that specific ticket.
I use Churchville to click this purchase button right here.
And when a user clicks on that purchase button, remember what that is going to do on our back end server.
That is going to create a new order which expresses the intent for a user to purchase a ticket, kind
of temporally reserves the ticket.
After user clicks on that purchase button, we're going to take them to another screen where we will
display some details about the order.
That was just created.
So we'll probably say, hey, you're trying to purchase this ticket.
We'll show a little countdown timer right here to show how much longer the user has to actually enter
their payment information.
Maybe also the price, even though I didn't really reflected on this mockup.
If a user clicks on the pay button, we're then going to open up a little window.
Tied to striped G.S..
So this little dialogue right here.
We do not have to build that.
We're going to instead use a third party library that is going to create this window for us and handled
the entire strike payment process automatically.
That is kind of the primary flow that a user is going to go through.
They're going to see the list of tickets.
They're going to look at a specific ticket click purchase.
That's going to create the order book pay and then enter their payment information.
And after that, in theory, the ticket at that point belongs to this user.
Naturally, before we implement any of those screens, we probably also need the ability to create a
ticket.
So we'll make a very simple form like the one you see right here.
That user can use to make a brand new ticket.
OK.
That's on the different components are going to have to create very quickly.
Now, one of the big things that we're going to start to realize as we go back into the world of next
J.S., is that handling routing for some these different screens is going to be just a little bit challenging.
So I'm gonna show you just one more quick diagram that's going to help kind of summarize some of the
different pages that we're gonna create in the next couple of videos.
And exactly, it's in the different routes they're gonna write out for each them.
OK.
So in this diagram right here, we've got the different routes that a user is going to feel to visit
inside ramp.
We've got the corresponding file inside of our pages directory that we need to create to remember to
create a new route or essentially new page inside of our next G.S. application.
We're going to create different files inside that pages directory right here.
And the structure of this directory and the names of the files inside there is going to dictate or determine
the different routes that a user can access.
And then finally, on the right hand side is the goal of each of these different routes.
Now, we've already handled these first three right here.
Those are pretty much done.
We don't really have to worry about them too much.
So we're going to first begin probably back on our list of tickets or alternatively, maybe we will
do the ticket creation form one or the other.
So we are going to make sure that inside that index, not just file, we show the list of all tickets.
We're also going to make sure that at a root of tickets slash new, which means that we need a tickets
folder inside the pages directory.
And inside there, we need a new DOT G.S. file, that is we're going to create our forum to make a brand
new ticket.
Now, the other thing I want to point out here is that we have two different pages where we are showing
details about a very particular ticket in a very particular order that would be really this age right
here.
This is some details about a particular ticket and this is some details about a very particular order.
Usually it whenever we are looking at a very particular record, we're going to reflect that records
I.D. inside of the wall.
So inside of this, you're all we might have a path is something like orders slash and then the idea
of the order that we looking for.
Same thing for tickets.
We might have something like tickets slash and then the idea of the ticket.
We want to look at.
So handling ideas in next to us is just a little bit complicated because of how we have to name the
file inside our pages directory, as we've seen, the names of these different files dictate the routes
that are available.
But in this case, we want to have kind of a parameter, a query parameter, some wild card that is
a part of the URL.
To create some wild card in the URL, when we make the corresponding page file, we're going to wrap
that portion of the URL with square brackets.
The square brackets means this is a wild card of sorts.
Then inside the square brackets, we're going to put in the name of that query parameter and then we'll
be able to receive that query parameter inside of our component and understand exactly inside the component
which ticket we need to display details about.
So if we take a look at this route syntax right here, which probably makes sense if you're coming from
the world of Express J.S. to reflect that with a file inside of our pages directory, we would write
out a file with the name of tickets, slash square brackets, ticket I.D. Then we could get access to
that ticket I.D. inside of our page component.
OK.
That's a lot of details.
Let's take a quick pause right here and continue in just a moment.