HTTP Lab 🧪

A production-quality, modern API testing tool inspired by Postman, Insomnia, and Hoppscotch. Build, test, debug, and organize HTTP requests through a clean, VS Code-inspired interface.

✨ Features

Core

• Request Builder — Full HTTP method support (GET, POST, PUT, PATCH, DELETE, OPTIONS, HEAD)
• Body Types — JSON, Text, XML, Form Data, URL Encoded
• Authentication — No Auth, Bearer Token, Basic Auth, API Key (Header/Query)
• Environment Variables — {{base_url}}, {{token}} with auto-substitution
• Request Tabs — Multiple requests open simultaneously with dirty state tracking

Organization

• Collections — Create, rename, duplicate, delete, nested folders
• Request History — Auto-saved with status, duration, replay support
• Favorites — Star requests for quick access
• Global Search — Search across collections, requests, and history

Response

• Pretty JSON — Syntax-highlighted, collapsible JSON viewer (Monaco Editor)
• Raw Response — Plain text view
• Headers & Cookies — Full response metadata
• Stats — Status code, response time, size

Import/Export

• Import cURL — Parse any cURL command into a request
• Export cURL — Copy any request as cURL

Built-in Tools

• JSON Formatter & Validator
• Base64 Encode/Decode
• URL Encode/Decode
• JWT Decoder
• UUID Generator
• Timestamp Converter
• HTTP Status Explorer

DX

• Keyboard shortcuts (Ctrl+Enter, Ctrl+S, Ctrl+K, Ctrl+T)
• Resizable panels
• Auto-save to history
• Toast notifications
• Loading skeletons
• Empty states

🛠 Tech Stack

Layer	Stack
Frontend	React 19, TypeScript, Vite, Tailwind CSS v4
State	Zustand with persistence
Editor	Monaco Editor
HTTP	Axios
Backend	Node.js, Express.js, TypeScript
Database	SQLite via Prisma ORM

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm

Installation

# Clone the repo
git clone https://github.com/yourusername/http-lab.git
cd http-lab

# Install & setup backend
cd backend
npm install
npx prisma generate
npx prisma db push
npm run dev

# In another terminal — setup frontend
cd ../frontend
npm install
npm run dev

Open http://localhost:5173 in your browser.

📁 Folder Structure

http-lab/
├── backend/
│   ├── prisma/
│   │   └── schema.prisma
│   ├── src/
│   │   ├── index.ts          ← Express app
│   │   ├── lib/
│   │   │   └── prisma.ts     ← Prisma client
│   │   └── routes/
│   │       ├── collections.ts
│   │       ├── requests.ts
│   │       ├── history.ts
│   │       ├── environments.ts
│   │       ├── settings.ts
│   │       └── proxy.ts      ← HTTP proxy (avoids CORS)
│   └── package.json
│
└── frontend/
    └── src/
        ├── components/       ← Shared UI components
        ├── features/
        │   ├── request/      ← Request editor, cURL import
        │   ├── response/     ← Response panel
        │   ├── collections/  ← Collections sidebar
        │   ├── history/      ← History panel
        │   ├── favorites/    ← Favorites panel
        │   ├── environments/ ← Environments panel
        │   ├── utilities/    ← Built-in tools
        │   ├── search/       ← Global search
        │   └── settings/     ← Settings panel
        ├── hooks/            ← Custom React hooks
        ├── lib/              ← API client, utilities
        ├── store/            ← Zustand stores
        └── types/            ← TypeScript types

⌨️ Keyboard Shortcuts

Shortcut	Action
Ctrl+Enter	Send Request
Ctrl+S	Save Request
Ctrl+K	Global Search
Ctrl+T	New Tab
Ctrl+/	Focus URL Bar
Escape	Close Overlays

🗺 Roadmap

• WebSocket support
• GraphQL support
• Request chaining & test scripts
• Team collaboration
• Import Postman collections
• OpenAPI spec import
• Response diff viewer
• Mock server

📄 License

MIT — free to use, fork, and build upon.

---

Built with ❤️ using React 19, Node.js, Prisma, and Monaco Editor.