Search millions of photographs through a fast, responsive, and accessible interface powered by the Unsplash API.
Luma is a front-end image discovery application built with plain HTML, CSS, and JavaScript. It focuses on a polished search experience without requiring a framework or build step.
The project began as a simple classroom image-search exercise and has been rebuilt with production-minded interface patterns, stronger accessibility, safer configuration, and correct Unsplash attribution.
- Live Unsplash photo search
- Responsive editorial gallery
- Landscape, portrait, and square filters
- Relevant and latest sorting
- Progressive “load more” pagination
- Loading skeletons
- Empty, error, and rate-limit states
- Dark and light themes with saved preference
- Search suggestions
- Photographer attribution and Unsplash referral links
- Download-event tracking for API compliance
- Responsive images, lazy loading, and preserved aspect ratios
- Keyboard-friendly controls and reduced-motion support
- Browser-local Access Key configuration
Open the live GitHub Pages demo. The search interface asks for an Unsplash Access Key the first time it needs live results; the key stays in the browser.
git clone https://github.com/deleted04user/LUMA.git
cd LUMAWith Python:
python -m http.server 8000Then open http://localhost:8000.
Create a free application at Unsplash Developers, copy its Access Key, and add it through the application’s API setup dialog.
The key is saved only in your browser’s local storage. Never enter or commit an Unsplash Secret Key.
For local development, you can alternatively copy the configuration template:
cp config.example.js config.jsThen add your Access Key to config.js. This file is ignored by Git.
LUMA/
├── assets/favicon.svg # Project favicon
├── index.html # Semantic application structure
├── style.css # Responsive visual system and states
├── script.js # Search, filters, rendering, and settings
├── config.example.js # Optional local configuration template
├── tests/smoke.mjs # Dependency-free structural smoke checks
├── LICENSE
├── .gitignore
└── README.md
flowchart LR
A[Search query] --> B[Validate input]
B --> C[Unsplash API]
C --> D{Response}
D -->|Success| E[Accessible photo cards]
D -->|Empty| F[Search guidance]
D -->|Error| G[Recovery state]
E --> H[Filter or load more]
- Semantic headings, forms, navigation, and result regions
- Visible keyboard focus indicators
- Accessible names for icon-only actions
- Meaningful image alternative text from Unsplash metadata
- Screen-reader announcements for changing results
- Touch-friendly controls
- Responsive layouts at mobile, tablet, and desktop widths
- Motion reduction through
prefers-reduced-motion
The implementation uses image URLs returned by Unsplash, links photographers and images back to Unsplash with referral parameters, and calls the download-location endpoint when a download is initiated.
Review the latest Unsplash API Guidelines before deploying a production version.
- No framework or package installation is required.
- API requests use the
Authorization: Client-IDheader. - Search requests use strict content filtering.
- A new search aborts any previous unfinished request.
- User-provided text is rendered through DOM APIs rather than HTML interpolation.
- External links use
noopener noreferrer.
node --check script.js
node tests/smoke.mjs- Add color filtering
- Add collections and curated topics
- Add a fullscreen photo detail dialog
- Add shareable search URLs
- Add favorites stored locally
- Add automated structural and secret-safety smoke checks
- Deploy a public demonstration with GitHub Pages
- Add full automated accessibility and browser tests
Photography and search data are provided by Unsplash.
This is an educational front-end project and is not affiliated with or endorsed by Unsplash.
Released under the MIT License.