Intermediate 20 minutes
Build a Random Photo Explorer
Explore stunning high-quality photos from Unsplash. Search by topic or get random photos with photographer credits.
What You'll Build
A photo explorer that searches for images by keyword and displays them with proper photographer attribution.
Prerequisites
- ✓ Basic JavaScript knowledge
- ✓ Understanding of OAuth/API keys
1
Register your application
Create a developer account at unsplash.com/developers and register a new application. You will get an Access Key (Client ID) for authentication.
2
Fetch a random photo
Get a random high-quality photo with photographer information.
javascript
const response = await fetch('https://api.unsplash.com/photos/random', {
headers: { 'Authorization': 'Client-ID YOUR_API_KEY' }
});
const photo = await response.json();
console.log(`Description: ${photo.description || photo.alt_description}`);
console.log(`Photo URL: ${photo.urls.regular}`);
console.log(`Photographer: ${photo.user.name}`);
console.log(`Profile: ${photo.user.links.html}`);
console.log(`Likes: ${photo.likes}`); 3
Search photos by keyword
Search for photos by topic and display multiple results.
javascript
const query = 'mountain sunset';
const response = await fetch(
`https://api.unsplash.com/search/photos?query=${encodeURIComponent(query)}&per_page=5`,
{ headers: { 'Authorization': 'Client-ID YOUR_API_KEY' } }
);
const data = await response.json();
console.log(`Found ${data.total} photos for "${query}". Showing first 5:\n`);
data.results.forEach((photo, i) => {
console.log(`${i + 1}. ${photo.alt_description || 'No description'}`);
console.log(` By: ${photo.user.name}`);
console.log(` URL: ${photo.urls.small}`);
console.log('');
}); 4
Track downloads properly
Unsplash requires you to trigger the download endpoint when a user downloads a photo. This is important for photographer attribution.
javascript
async function getAndTrackPhoto(query) {
// 1. Search for a photo
const searchRes = await fetch(
`https://api.unsplash.com/search/photos?query=${query}&per_page=1`,
{ headers: { 'Authorization': 'Client-ID YOUR_API_KEY' } }
);
const { results } = await searchRes.json();
const photo = results[0];
// 2. Trigger download tracking (required by Unsplash guidelines)
await fetch(photo.links.download_location, {
headers: { 'Authorization': 'Client-ID YOUR_API_KEY' }
});
// 3. Return photo info with proper attribution
return {
url: photo.urls.regular,
description: photo.alt_description,
photographer: photo.user.name,
attribution: `Photo by ${photo.user.name} on Unsplash`
};
}
const photo = await getAndTrackPhoto('ocean waves');
console.log(photo.attribution);
console.log(photo.url); Next Steps
- → Build a masonry grid photo gallery
- → Add a color-based search feature
- → Create a wallpaper app that sets daily backgrounds