API Playground

# API Playground PRD

## Overview
Build a browser-based API testing tool similar to Postman that supports multiple HTTP methods, request customization, response inspection, collections, and environment variables.

## Requirements
- HTTP method selector supporting GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS
- URL input field for the request endpoint
- Request headers editor with key-value pair rows and add/remove buttons
- Request body editor with syntax highlighting supporting JSON, form-data, and raw text
- Body format tabs to switch between JSON, form-encoded, and raw text modes
- Send request button that executes the configured HTTP request
- Response display showing status code, response headers, and response body with syntax highlighting
- Response time displayed in milliseconds
- Response size displayed in bytes or kilobytes
- Response headers section that is collapsible
- Request history saving the last 50 requests
- Save requests to named collections for reuse
- Collection folders for organizing saved requests
- Environment variables using double-brace syntax (e.g., {{baseUrl}})
- Variable substitution in URL, headers, and body before sending
- Copy response body to clipboard
- Pretty-print JSON responses with proper indentation
- Loading state animation while a request is in flight
- Persist collections and environment variables to localStorage

## Tech Stack
- HTML, CSS, JavaScript (vanilla or any framework)
- Fetch API for making HTTP requests — no HTTP client libraries

## Scoring Criteria
- **Functional (40%)**: HTTP requests execute correctly, response displayed accurately, collections save and load
- **Quality (20%)**: Clean code, handles errors gracefully (CORS, timeouts, invalid JSON), smooth UX
- **Fidelity (25%)**: All features implemented including environment variables, history, folders, pretty-print
- **Speed (15%)**: Time bonus