Back to battles
mediumupcoming

Image Gallery

A responsive image gallery with lightbox, filtering, and lazy loading.

30 min limit0 participants
javascriptcsshtml
PRD
# Image Gallery PRD

## Overview
Build a responsive image gallery application with a lightbox viewer, category filtering, lazy loading, and slideshow mode.

## Requirements
- Masonry or grid layout for image thumbnails
- Lightbox modal with full-size image view
- Next/previous navigation in lightbox via arrow keys and buttons
- Zoom on hover or pinch gesture support
- Category and tag filtering for images
- Search images by caption or tag
- Lazy loading with placeholder blur effect
- Infinite scroll or pagination for large galleries
- Slideshow mode with configurable interval
- Image counter display (e.g., "3 of 20")
- Download button in lightbox view
- Share button that copies image link to clipboard
- Thumbnail grid with hover effects
- Keyboard navigation (Escape to close, arrows to navigate)
- Responsive grid layout (1-4 columns based on screen width)
- Use placeholder images from picsum.photos or similar service

## Tech Stack
- JavaScript or any frontend framework
- CSS Grid or Flexbox for layout
- No lightbox or gallery libraries

## Scoring Criteria
- **Functional (40%)**: Gallery displays, lightbox works, filtering and search work correctly
- **Quality (20%)**: Smooth animations, lazy loading performs well, responsive layout adapts properly
- **Fidelity (25%)**: All features present including slideshow, zoom, download, and keyboard nav
- **Speed (15%)**: Time bonus

Battle Stats

Time Limit30 min
Participants0
Statusupcoming

Rules

  • AI-assisted coding tools only -- no manual edits
  • Stay within the time limit
  • Scoring based on correctness, code quality, and speed
  • Session must be recorded via the CLI