⚡ RequestLab

A sleek, lightweight, and modern in-browser REST API testing client built with React.

---

📌 Overview

RequestLab is an intuitive, zero-bloat web application designed for developers to craft, send, and inspect HTTP requests directly within their browser. Inspired by modern developer tools like Postman and Linear, RequestLab delivers high-speed API exploration with a developer-first dark theme and comprehensive request telemetry.

---

✨ Key Features

🌐 Comprehensive HTTP Methods

Full support for GET, POST, PUT, PATCH, and DELETE.

🛠️ Dynamic Request Builder

• URL Sanitization: Automatically prepends protocols if omitted.
• Query Parameters & Headers: Dynamic key-value row manager with instant sync to the URL.
• JSON Body Editor: Raw text/JSON payload formatting and validation.

🎨 Custom JSON Syntax Highlighter

High-contrast, theme-aware JSON syntax highlighting (keys, strings, numbers, booleans, and nulls) without heavy external library dependencies.

📊 Real-time Response Telemetry

• Dynamic status badge: 2xx Success, 3xx Redirect, 4xx/5xx Error.
• Latency benchmarking: Round-trip time in milliseconds (ms).
• Payload size: Accurate calculation in Bytes / KB.

📑 Multi-View Response Inspector

• Pretty: Beautifully colorized and formatted JSON.
• Raw: Unformatted, raw server response text.
• Headers: Clean table view of all HTTP response headers.

💾 Persistent History Management

• Automatically saves the last 30 requests to browser localStorage.
• Instant one-click restoration of past requests (Method, URL, Headers, and Body).

📋 Multi-Language Code Snippet Generator

• Generate ready-to-use snippets in cURL, JavaScript (Fetch), and Python (requests).
• One-click copy to clipboard.

---

🛠️ Tech Stack

• Framework: React (Functional Components & Custom Hooks)
• Styling: Modern CSS3 with Design Tokens (Linear/GitHub Primer Dark Palette)
• State Management: React Hooks & localStorage API
• Icons: React Icons

---

🚀 Getting Started

Prerequisites

Ensure you have Node.js (v16.0 or higher) and npm installed.

Installation

1. Clone the repository:

git clone https://github.com/reyhanevaghar/RequestLab.git
cd RequestLab

2.Install dependencies:

   npm install

3.Start the development server:

   npm run dev

📁 Project Structure

RequestLab/
├── src/
│   ├── components/
│   │   ├── CodeSnippetModal.jsx   # Multi-language code snippet generator
│   │   ├── HistorySidebar.jsx     # Request history sidebar & localStorage sync
│   │   ├── Navbar.jsx             # Top navigation bar
│   │   ├── RequestBar.jsx         # Method selector & URL input area
│   │   ├── RequestEditor.jsx       # Main editor for Params, Headers & Body
│   │   ├── KeyValueEditor.jsx      # Dynamic key-value pair manager (Params/Headers)
│   │   └── ResponseViewer.jsx     # JSON syntax highlighter, telemetry & headers tab
│   ├── styles/
│   │   ├── App.css                # Global layout & CSS design tokens
│   │   └── ResponseViewer.css     # Syntax highlighting & response styles
│   ├── App.jsx                    # Main application controller (Root Component)
│   └── main.jsx                   # React entry point
├── package.json
└── README.md

---

🤝 Contributing

Contributions are welcome!

• Fork the Project
• Create your Feature Branch (git checkout -b feature/AmazingFeature)
• Commit your Changes (git commit -m 'Add some AmazingFeature')
• Push to the Branch (git push origin feature/AmazingFeature)
• Open a Pull Request

---

Developed by Reyhane Vaghar