Pexels Dev Playground

An interactive learning tool for understanding API-based applications, built with Next.js, TypeScript, and Tailwind CSS.

Features

Basic Mode

• Search photos from Pexels API
• Masonry grid gallery with lazy loading
• Lightbox view for photo details
• Dark/light theme toggle
• Responsive design (2-4 columns)

Developer Mode (Learning Features)

Toggle dev mode with the code icon (</>) in the header.

• Request Indicator - Shows real-time request status (Idle → Fetching → Success/Error)
• Dev Mode Panel - Displays:
  • API endpoint used
  • Query parameters
  • Response JSON (collapsible)
  • Request duration (ms)
  • Error simulation controls (401, 429, 500)
• Query Builder - Build custom queries with:
  • Search query
  • Orientation filter (landscape/portrait/square)
  • Per-page count
  • Live API URL preview
• Performance Panel - Shows:
  • Total requests made
  • Last response time
  • Duplicate request warnings
  • Cache size
• In-Memory Caching - Toggle cache to store responses
• Pagination Toggle - Switch between infinite scroll and page buttons
• Export Utilities:
  • Copy Fetch example
  • Copy Axios example
  • Download JSON response
• Tooltips - Learning-focused explanations for concepts

Setup

1. Get Pexels API Key

   • Sign up at https://www.pexels.com/api/
   • Copy your API key

2. Configure Environment

   # Edit .env.local
   NEXT_PUBLIC_PEXELS_API_KEY=your_api_key_here

3. Install & Run

   npm install
   npm run dev

4. Open http://localhost:3000

Docker

# Build and run
docker-compose up --build

# Or with environment variable
NEXT_PUBLIC_PEXELS_API_KEY=your_key docker-compose up --build

Project Structure

src/
├── app/
│   ├── api/photos/route.ts    # Backend proxy with error simulation
│   ├── page.tsx               # Main gallery page
│   └── layout.tsx             # Root layout
├── components/
│   ├── Header.tsx             # Search, theme toggle, dev mode toggle
│   ├── PhotoGrid.tsx          # Masonry grid with pagination/infinite scroll
│   ├── PhotoCard.tsx          # Individual photo card
│   ├── Lightbox.tsx           # Full-screen photo viewer
│   ├── DevModePanel.tsx       # Dev mode controls & info
│   ├── QueryBuilder.tsx      # Custom query interface
│   ├── PerformancePanel.tsx   # Request metrics
│   ├── RequestIndicator.tsx   # Status indicator
│   ├── ExportUtils.tsx        # Copy/download utilities
│   └── Tooltip.tsx           # Learning tooltips
├── hooks/
│   ├── usePhotos.ts          # Photo fetching hook
│   └── useStores.ts          # Zustand store selectors
├── stores/
│   └── requestStore.ts       # Zustand stores (request + dev mode)
├── lib/
│   ├── cache.ts              # In-memory cache utility
│   └── pexels.ts             # (optional) Direct Pexels API calls
└── types/
    └── photo.ts              # TypeScript interfaces

Tech Stack

• Next.js 16 - App Router, API routes
• TypeScript - Type safety
• Tailwind CSS - Styling
• Zustand - Lightweight state management
• Pexels API - Photo data source