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