This is a Next.js project bootstrapped with create-next-app
.
First, run the development server:
npm run dev
# or
yarn dev
https://codesandbox.io/s/unsplash-api-app-uw8o5
https://github.com/benhalverson/unsplash-api-app
In this repo I built a simple search app using the unsplash API. In it we are using
https://api.unsplash.com/search/photos
as the endpoint. To use the API you need an API key which you can get from the unsplash website.
Once you have a key, add it to the .env
file to use it in the app and add an Authorization header to the request.
#.env
UNSPLASH_ACCESS_KEY=<your-api-key>
Before building anything I like to use Postman to test the API. Here's a screenshot of how it looks:
To do the search it expects a parameter called query. If you look in the network tab you can see the request looks like this: https://api.unsplash.com/search/photos?query=dogs
Also in the network tab you can see that the request is a get
request and has an authorization header.
Without the authorization header the request will not work.
The response can be seen under preview or response. The payload is your query param.
In React you will need to use setState to set the query value. The first value is the initial value, the second is the function that will be called when the value changes.
const [search, setSearch] = useState("");
The search button will call the function handleSubmit
which will call getPhotos
with the value of the search input an
If the response is successful, it will set the state of the photos to the response.
const getPhotos = async () => {
try {
const response = await axios.get("https://api.unsplash.com/search/photos", {
headers: {
Authorization: `Client-ID ${process.env.UNSPLASH_ACCESS_KEY}`
},
params: {
query: `${search}`
}
});
const photos = response.data.results;
if (photos) {
setImages(photos);
}
return photos;
} catch (error) {
console.error("Failed to load images", error.message);
}
};
images
is now an object with a property that has an array of objects called results. We will pass this data into the ImageList
component. where we will map over the array and return a ImageCard
component for each object.
<ImageList images={images} />
I also created a UserInfo
component that takes in metadata about the photographer and displays it.
<UserInfo
name={image.user.username}
bio={image.user.bio}
portfolioURL={image.user.portfolioURL}
twitterUsername={image.user.twitterUsername}
/>
The styling of this app was done with tailwindcss. I followed the tailwindcss docs to setup the tailwind.config.js file.
Under the API folder I created a mock API because the unsplash API has a rate limit of 50 requests per hour and was quickly getting annoying. I took the response from the API and created a mock response and duplicated the getPhotos fuction to return the mock response by calling the /api/unsplash endpoint form Nextjs.