This is going to be a bit different because we'll have to get the access key, so before we start setting
up anything as far as our folders, I would want to start by getting the key.
And we can do that if we go to our search engine online or type on splash.
So that is the name of the site.
And of course, I would want to navigate there.
And once we are here, we'll have to sign up.
So in my case, I already have one dummy account, so I'll log out and then I'm going to create together
with you another one.
So I'm going to go with login.
And of course, that is my first dummy account, but I'm going to create a new one from scratch.
And you'll also have to do that if you want to get the API.
So I'm going to go with Jaune.
I'm going to go with Peter and of course, Smith.
Now, would you need to come up with some kind of email address?
In my case, I'm going to go with learn code tutorial at Gmail dot com.
And as far as the user, I'm going to go react.
Hyphen Project Hyphen 19 and then recording again.
It is up to you whatever username you would want to do.
Of course, keep in mind that some of them might be taken.
But as far as the password, I'm going to go with my super secret password and I'm going to go with
a joint option.
And of course, once we join and by the way, for some reason says, OK, so no hyphens here can go
with course instead.
OK, so so hopefully that works.
And I'm going to join.
And once we do, that should be able to access our account.
In this case, I'm not going to save this particular password.
And then once you join, which you're looking for is the API developers link.
So you click over here and you would want to start by creating the app.
So we have your documentation and we have your apps and you would want to create a new application.
So in here you would want to check all of them like so.
And then of course you have to agree to the terms.
And here I'm just going to say, yep, I would want to accept the terms again.
I will ask you for a name.
And in my case, I'm going to go with the REACT Project.
Project then 19 online recording like so online, if you want to add some description, of course you
can do it, but in my case, I'm trying to copy and paste.
My name will create the application.
Beautiful.
And then you keep on scrolling, keep on scrolling.
And that's the key of what you're looking for.
So for the time being, just say it somewhere.
So in my case, I'm going to copy this to the clipboard.
And then, of course, I would want to go and see documentation, so where we have the OP's next link
is the condition and I open this in the new browser tab and then let's scroll through documentation.
We have getting started on all that info that we already completed.
And what we're looking for is of this URL.
So this is going to be the endpoint, the root endpoint where all our requests will start with this
one.
So that's something we need to keep in mind.
And then, of course, we keep on scrolling, keep on scrolling, and we can see that in order to get
anything, we have to provide our API key.
So in order to get the photos, we're just going to go with API and splash dot com and then forward
slash photos.
Another way, of course, we'll take a look at the other options that they provide as well.
But essentially we'll use this one and the search option.
But in order to get anything, we'll have to provide the client.
So here they go with Questionmark.
So you are a parameter and then client is equal to our access.
You remember the one that we got once we created the app.
So now what I would want is to take this URL because I would want to double check whether I'm getting
something back, because if you're not getting the data, then of course it's useless, whatever we're
going to do after that, because you won't be able to follow along.
I'm going to copy and paste right now my API key, and if you're getting some data back, beautiful,
then you're ready to move on to the next step.
Assuming that that is the case, I'm going to go back and like I said, they have multiple endpoints,
but they all start with this API.
And if you want, you can get the users.
So you would go with that route endpoint and force users.
And for example, you can go with username, you can get the photos.
So this is going to be the one that we will use.
We go with for photos and check it out.
They have multiple options.
You can get different pages, which of course we'll use later.
When we set up the infinite scroll, we can have per page.
So how many per page?
And I'll default is ten and we're going to stick with default.
That one is fine.
Then you can also order them by some kind of parameter, whether that's latest, oldest popular or whatever.
And that's also something that we're going to skip.
And then there's the option for the search, so we go with search and then again, the URL is going
to be following where we go with search and photos and the search is going to be in the query.
Now, of course, we'll set up those URLs later.
But this is just shock as the general idea.
You can also get the collections if you want.
Again, you're always going to be a bit different where you go with the root end point and forward slash
collections.
So with this out of the way now, of course, I can navigate back to my project and I'm looking for
Project 19 of the stock photos and of course, the.
So in this case, what I would want is to go here and clear everything that I currently have and then
back to the route and we're going to go npm install, I'm not and P and start.
We spin it up and make sure that you have the source in the source.
You'll have app J.S. Laakso and of course in the Objets we have your imports here.
We have, for example, icon.
And of course in this case nothing happened because I would need to check with missing NPM install and
NPM start and then for some reason I wasn't able to do.
And of course it is because I didn't navigate to the folder so like so and I'm just making a big fat
mess over here now.
I copy and paste my API key.
So let me grab right now my folder.
So the set of folder for Project 19.
Not once I'm in a folder, then I'm going to run, npm install and NPM start.
And while I'm spinning up my dev server here, you can see that in The Objets, you'll find two heroes.
So I already copied and pasted those you URLs because I thought that just going to be faster.
Now, can we have API on dot com and photos, show the truth and point plus before us that we're going
to be looking for.
So this is just going to give us a list and then for to search the URL is going to be a tiny bit different
where we're going to go with API on splash dot com and then search online for us.
And then like I said, once we get to that point, of course, I'll show you how we would construct
the URL.
And you'll also notice of this coming here.
And this is something that we're going to do first, where we will set up our environment variables
and I'll talk about them in the next video.
So for the time being, let's just leave it the way it is.
And as far as it's done, we have stock photos are that's the text we should see on the screen.
And of course, there's also one component that is the photo component.
So since we have a list again, I just created one component that represents that photo for each photo
will be represented by the photo component.
And of course, we also have the index.
Yes.
So this is this is already prepared.
So I think we are in good shape and we could start working on our application.