Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ClaytonSeager/InifinityScroll/llms.txt

Use this file to discover all available pages before exploring further.

All configuration for Infinity Scroll is contained in the first three lines of Infinity.js. There is no separate config file, no .env, and no build-time substitution — the values are plain JavaScript constants that you edit directly before opening the gallery. 
const count = 10;
const KEY = 'YOUR_UNSPLASH_ACCESS_KEY';
let query = '';
count sets how many images are fetched per API call, KEY authenticates every request to the Unsplash API, and query holds the active search term (managed at runtime by the search bar — you do not set this manually).

​
Configuration reference

​
KEY
string
required
Your Unsplash API Access Key. Every request to the Unsplash API is authenticated via the client_id query parameter, which is populated from this constant. Without a valid key all fetch calls will return a 401 Unauthorized error and no images will load.Obtain your key at https://unsplash.com/developers — see Getting an Unsplash API key below. Replace the placeholder value in Infinity.js with your own Access Key before running or sharing the project.
​
count
number
default:"10"
The number of images fetched in each API call. This value is passed directly as the count query parameter in both the random and search Unsplash endpoints.The Unsplash free tier supports a maximum of 30 images per request. Values above 30 will be silently clamped by the API. Keeping count between 5 and 20 balances load time against the number of API calls consumed per browsing session.

​
Getting an Unsplash API key

1

Create a free Unsplash Developer account

Visit https://unsplash.com/developers and click Register as a developer. If you already have an Unsplash account you can log in directly.
2

Create a new application

From your developer dashboard, click Your apps → New Application. Read and accept the API guidelines — Unsplash requires that you credit photographers when displaying images — then provide an application name and description and click Create application.
3

Copy your Access Key

On the application detail page, scroll down to the Keys section. Copy the value labelled Access Key (not the Secret Key).
4

Paste the key into Infinity.js

Open Infinity.js and replace the existing KEY value with your Access Key:
const KEY = 'YOUR_ACCESS_KEY_HERE';
Save the file and reload the gallery.

​
API rate limits

The Unsplash free developer tier allows 50 requests per hour. With the default count of 10, each full scroll batch consumes one request and surfaces 10 images, meaning you can load up to 500 images per hour before hitting the limit.
count valueImages per requestMax images/hour (50 req)
55250
10 (default)10500
20201,000
30 (API max)301,500
If the rate limit is exceeded, the Unsplash API returns a 429 Too Many Requests response. getPhotos() will catch this as a JSON parse error and log it to the browser console — the gallery will stop loading new images until the rate limit window resets. Recommendation: Keep count between 5 and 20 for a comfortable balance between images per scroll and hourly capacity.
The KEY constant is embedded directly in client-side JavaScript, which means it is visible to anyone who opens DevTools or views the page source. This is perfectly acceptable for a local learning project or a personal demo, but you should never use a production or paid-tier API key in this way. For any public-facing deployment, proxy the Unsplash requests through a backend service that keeps the key server-side and out of the browser bundle.

​
Search vs. random mode

The query variable determines which Unsplash endpoint getApiUrl() uses to build the fetch URL. Random mode — When query is an empty string (''), the gallery fetches random photos using the /photos/random/ endpoint: 
// query === '' → random mode
`https://api.unsplash.com/photos/random/?client_id=${KEY}&count=${count}`
Search mode — When query contains a search term (set by the search bar), the gallery switches to the /search/photos/ endpoint and appends the keyword: 
// query === 'mountains' → search mode
`https://api.unsplash.com/search/photos/?query=${query}&client_id=${KEY}&count=${count}`
Because the search endpoint returns results nested under a results key, getPhotos() handles both shapes: 
photosArray = query ? data.results : data;
Clearing the search input and submitting an empty query resets query back to '', returning the gallery to random mode on the next fetch. The query variable is managed entirely at runtime — you do not need to edit it in the source file.

Build docs developers (and LLMs) love

Get started for freeTalk to us