This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Deployed on codesandbox

https://codesandbox.io/s/unsplash-api-app-uw8o5

Github

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.