Image Gallery
Interview task image gallery that consumes a remote albums API and presents a responsive, searchable grid with loaders, error handling, and accessibility baked in.
The Challenge
Implement an albums-based image gallery that fetches from a public API, supports responsive layout, search, and robust loading/error states suitable for production frontends.
The Solution
Built a responsive grid UI powered by React Query for fetching and caching albums, debounced search for performance, skeleton loaders for perceived speed, and deterministic created-on dates generated from album IDs.
Key Features
- •Fetches albums from jsonplaceholder API
- •Responsive Tailwind grid layout for album cards
- •Real-time search with 350ms debounce
- •Skeleton loading states matching card layout
- •Error and empty-result messaging
- •Stable generated created-on dates based on album ID
- •Accessibility-focused structure and keyboard-friendly controls
- •Local dev and Azure Static Web Apps-ready build
Technologies
ReactTypeScriptTailwindCSSReact QueryVite
