Unsplash API Integration: Getting Started Guide

[yasin172]

Introduction

This guide will walk you through how to integrate the Unsplash API into your web project step-by-step. The Unsplash API provides access to free, high-quality photos that you can use in your projects.

Step 1: Register on Unsplash

First, register on the Unsplash platform. Once your registration is complete, you will be able to get an API key.

### **Step 2:** Obtain Unsplash API Key

• Go to the Unsplash Developer page.
• Click on the "New Application" button.
• Fill out the necessary information, and at the bottom, you will see Access Key and Secret Key.
• Save only the Access Key; you will use this code for API requests.

Step 3: Add Access Key to .env Files

• Open the .env files located in the root directory and in the apiserver/ folder of your project.

	Access Key
.env	UNSPLASH_ACCESS_KEY="Enter Access Key Here"

Replace "Enter Access Key Here" with the Access Key you will get in the next step.

UNSPLASH_ACCESS_KEY="Enter Access Key Here"

Step 4: Add the Key to Your Code

• Open the plane/web/pages/api/unsplash.ts file in your project.
• Add the following code to line 18 of the file:

Replace ${unsplashKey} with the Access Key you obtained in step 3.

"Authorization": Client-ID ${unsplashKey},

Conclusion

With these simple steps, you will have successfully integrated the Unsplash API into your project. You can now programmatically access high-quality photos.