Not bad, not bad.
We've got our set up in a place, so now let's take a look at the external API we're going to use.
And I would want you to go to your search engine and we're going to type O DB API.
So that's the API we're looking for.
Just click on the link and this is going to be the case again, where you do need to sign up for the
API.
So before we take a look at the usage and all that, I would want you to navigate to the API key link
online.
And here you can either choose Patrón, which of course is going to give you a bigger daily limit,
but you also have a free one for one thousand.
So just click here on free.
I'm going to type here my email.
We're in code tutorial, then one of my emails and I believe it was Gmail.
So we're going to go with Gmail dot com.
The name will be Peter Smith.
And as far as years, well, I'm just going to say testing.
I'll submit.
Now, of course, we'll have to wait for that email and I'm going to navigate back right now to my email
and I'm just waiting for Turkey and I want to get the e-mail.
You'll have to click here to activate the key.
So definitely do that, activate the key.
And of course, this is the API key that you're looking for.
So just grab the key.
And before we test out the paper, how it works and how we would set up our API endpoints, I would
want you to navigate back to the project and remember how we were setting up the N.V. variables.
So navigate back to the project.
You're talking about the folder.
I'm not in the setup folder.
Create a new file with the name of Dot N.V. again, I already added to the get ignored.
So it's going to be ignored with so much control.
So when you're pushing this up to the get them because this key will be ignored and in here come up
with a name.
Now remember, the name had to start with react on the score app and then on the score.
So I'll go all caps react and then on the score up on the score and I'll call this movie.
Underscore API and underscore key, and then, of course, I don't want to copy and paste and I didn't
copy the actual key, so my bad I mean, I have to get back and I'm going to copy and paste the key
so that when you push this project up, get up, of course, no one will be able to see yours.
Now, remember, though, we need to, of course, use it and I'll right away set it up in the context
jazz.
So if you navigate the context, yes, you'll notice this API endpoint.
So what is this all about?
Well, if we're navigate back to the docs, I'm going to go back to the Minox.
And if we take a look at the usage, you'll notice that this is the root endpoint where we go with the
URL, then a question mark, API key.
So we provide our key and of course, we have you URL parameters in our project.
We're going to use to we're going to use one for Idy, which essentially is just going to give us a
specific memory.
And then the second one will be the search.
So this is where all pass the query that is coming from the input.
So our input will type something and then will pass the Senate as the URL parameter and then, of course,
as a result will search for the movies.
So I would want to construct right now our basic request.
So I would want you to navigate here.
Grabbed this particular part of the URL, so pretty much everything up to the API key and I'm going
to open up the new tab.
I'll copy and paste, then look for your key and you can either grab it from the email or you can grab
it from your project.
That is definitely an option.
I'm going to remember we needed to go with.
And, um, as far as search, we need to go with s online.
And by the way, in this case, I'm going to go Lorqess unequals and then whatever we will want to search
for.
So, for example, if I would want to see Batman movies, I'm just going to type here Batman.
And then once I type notice, I get back to movies.
So if you get this type of response, so if you type something and you get back the result, then you're
in good shape.
Now, also right away, show you some of the errors that we might get.
For example, if you go with B.A., you might get this response force, too many results.
So this is something that we'll handle as far as our application.
So we will display the errors, but I'm just guessing that there's going to be cases where response
is true, meaning we'll get some kind of mileage, but there's also going to be the cases where we fail.
So this is one of the cases where we fail.
But as long as you get something, when you type a meaningful movie name again, in my case, I'm going
to keep on typing Batman because honestly, I'm not the biggest movie buff ever, so I'm just going
to stick to the ones that I know.
Notice here.
I have response.
True.
So what it means is that I have a successful request because I got some movies back again.
If we never get back, we have the you are important.
We need to pass in the key and then there's more parameters.
So, of course, if you want to set up for your application different parameters, please do so.
But in my case, we'll just worry about the idea.
So essentially would pass in I.
And then the ad and the morning, of course, will get there in our application, and the second one
is the search.
So this is where we'll search for tomorrow.
And by the way, if you want to see the example, just navigate here online.
For example, again, type Superman.
And of course, there should be some kind of response, and there is so that's the response that comes
back.
If we type the title of Superman, hopefully this is clear.
And once we never get back to our project, more specifically context, just you'll notice that I set
up the variable by the name of API, underscore, underline and point.
And you'll also notice that I'm right away exporting now.
Why exporting?
Because we will use it later when we search for a single movie.
So essentially what I would want is to have some kind of end point that is ready to go.
And I also have right away the API.
So then we just need to add whether we're searching or we're looking for specific movie using the.
So in this case, what I'm going to do is set up my API key.
And in order to do that, I already have template strings related here.
And then remember that we're looking for that.
A variable.
Correct.
And in order to access it, we need to go with process process and then that money and we online, the
name was React.
Underscore online, Saurabh, underscore movie and underscore key, and the reason why I'm doing that
right now is because remember, we needed to restart the server online.
I also do want to try to work on some unlogged just so I can see that I have some kind of result, because
that way I'm not going to have surprises later.
So in here, I'm just going to say that I would want to log API endpoint.
So API underscore and point and see what kind of result I'm getting and point over here.
And then remember we needed to restart the server, so stop the server controversy and npm start and
if a console I see that everything works.
Meaning that I have some kind of Yooralla that makes sense, but of course we are in good shape if we
see at the end undefined.
Well, that means that either your variable is a match or you did not create the N.V. in the correct
spot because remember, the N.V. needs to be in the.
So my guess, I'm going to have to get back to my project.
First of all, I guess the bigger browser window should be good than we inspect and in the console notice
here I have right now undefined.
So this is one of those cases where we just need to double check.
Hey, what's happening?
So I go back to context API and then I'll check first where I'm going with process and not envy.
So that is correct.
And I'm going to check whether my name is correct.
And again, I'm just showing you those things.
So you know that if you get some kind of error, it's not the end of the world.
We just need to troubleshoot a little bit.
And I think I messed it up with my name.
So I go with process.
And then, of course, if I copy and paste notice my name was a bit different.
I also have the API.
So again, we need to save and now we need to restart the server.
So again we start a server and we go with an RPM start.
And yes, I purposely leave these errors in the videos, so I'm not cutting them out just so I can see
that if there's some kind of issue, you don't need to start stressing about it.
It's OK.
You just need to troubleshoot back and see where the error is.
So I'm going to navigate here and that will refresh.
And of course, I do have the euro.
Now, if I want to test it, I can just say copy a link or, you know, we can just open it up in a
new time.
And I notice in here I have the error.
Now I have the error because I'm not searching for anything or I'm not looking for ID.
So I'm going to say and and then again, we'll look for my bathmat or you know what?
I should know this movie as well.
So we're going to go for Avenger's and yes, Verity's, so if this works, if now you can just take
the you are off from the console, the opinion point, you're in good shape because of course for the
rest of the application we will use this value.
And the reason why I'm supporting this, because notice here we have a single movie.
I will also use this variable, so I'll also construct my request using this API endpoint, and if you're
in good shape, if you have the API key, if you have an V file, if everything works as far as the
endpoint, we're in good shape.
And I think we can start setting up the react router.
Dom.