Skip to content

03-UNSPLASH-API.md

Latest commit

 

History

History
103 lines (65 loc) · 2.34 KB

03-UNSPLASH-API.md

File metadata and controls

103 lines (65 loc) · 2.34 KB
Raw

03-UNSPLASH-API.md

Unsplash API Setup (Stock Photos)

Step 1: Create Unsplash Account

  1. Go to unsplash.com
  2. Sign up or log in

Troubleshooting: If you get connection errors, try using Tor Browser: torproject.org/download

See: Fig.3.0, Fig.3.1, Fig.3.2.

Fig.3.0

Fig.3.0: Before the integration with Unplash and Uploadthing APIs

Fig.3.1

Fig.3.1: Connection Error

Fig.3.2

Fig.3.2: Unsplash via Tor

Step 2: Access Developer API

  1. Click on "Product" in the menu
  2. Select "Developers/API"

See: Fig.3.3.

Fig.3.3

Fig.3.3: Select Developers API

Step 3: Create Application

  1. Click "Your apps"
  2. Click "New Application"
  3. Accept the terms and conditions
  4. Name your application (e.g., "Canva Clone")
  5. Submit

See: Fig.3.4, Fig.3.5, Fig.3.6, Fig.3.7.

Fig.3.4

Fig.3.4: Select ‘Your apps’

Fig.3.5

Fig.3.5: Create an app

Fig.3.6

Fig.3.6: Accept terms

Fig.3.7

Fig.3.7: Name your app with a few words

Step 4: Get Access Key

  1. In your app dashboard, find "Access Key"
  2. Copy the key

See: Fig.3.8.

Fig.3.8

Fig.3.8: Grab your Access Key

Step 5: Add to Environment File

Open .env and add:

NEXT_PUBLIC_UNSPLASH_ACCESS_KEY=your_access_key_here

Step 6: Restart Dev Server

# Stop the server (Ctrl+C)
# Start again
bun dev

Step 7: Test Unsplash Integration

  1. Open http://localhost:3000
  2. Click on a project or create new one
  3. Click "Image" in the left sidebar
  4. You should see Unsplash photos!

See: Fig.3.9.

Fig.3.9

Fig.3.9: Unsplash is set

✅ Unsplash API setup complete!

Previous: 02-DATABASE-SETUP.md
Next: 04-UPLOADTHING-API.md