📮 Postmann

A lightweight, browser-native API client and Chrome extension for testing, debugging, and inspecting REST APIs.

---

⚡ Overview

Postmann is an in-browser REST API testing client built to eliminate context-switching between your code editor, browser, and external API testing applications. Designed as both a standalone web app and an unpacked Chrome Extension, Postmann allows you to quickly construct HTTP requests, inject environment variables, inspect syntax-highlighted responses, and persist request history locally.

---

✨ Features

🌐 Comprehensive HTTP Method Support

• Send GET, POST, PUT, PATCH, and DELETE requests directly from your browser.
• Customize URL parameters, query strings, and custom request bodies (JSON or Raw Text).
• Set authentication tokens and custom request headers with instant autocomplete.

🔍 Response Inspector

• Syntax-Highlighted JSON Viewer: Formatted and collapsible JSON display with 1-click clipboard copying.
• Raw & Prettified Views: Toggle between raw payload text and formatted JSON.
• Response Header Inspection: Inspect all headers returned by the server.
• Live Performance Metrics: Real-time HTTP status codes (color-coded badges), round-trip response time (ms), and payload size.

🧩 Most Requested Headers (MRH) & Variable System

• Quick Header Presets: Pre-populate standard headers (Authorization, Content-Type: application/json, Accept, Cache-Control, User-Agent) in a single click.
• Environment Variables: Define reusable dynamic key-value pairs (e.g., {{baseUrl}}, {{token}}) that automatically resolve in endpoints, headers, and request bodies.

🕒 History & Scratchpad Notes

• Local Request History: Automatically logs previous requests with method, URL, timestamp, and status. Re-execute any past request with one click.
• Integrated Notes: Keep quick notes, API endpoint references, and test scenarios directly inside the extension popup.

---

🏗️ Architecture

flowchart TD
    subgraph UI ["Postmann UI (React + TypeScript)"]
        Nav[Navigation & Tabs]
        ReqBuilder[Request Builder]
        VarsTab[Variables Manager]
        MRHTab[Header Presets / MRH]
        HistoryTab[History & Search]
        NotesTab[Scratchpad Notes]
    end

    subgraph Core ["Execution & Storage"]
        VarEngine[Template Resolver]
        HTTPClient[Fetch API Engine]
        Storage[(Browser localStorage)]
    end

    subgraph Viewer ["Response Viewer"]
        Highlighter[JSON Syntax Highlighter]
        HeaderViewer[Response Header Table]
        Metrics[Status & Timing Badges]
    end

    ReqBuilder -->|Resolve variables| VarEngine
    VarsTab --> Storage
    VarEngine --> HTTPClient
    HTTPClient -->|Response Payload| Viewer
    HTTPClient -->|Log Entry| Storage
    Storage --> HistoryTab

Loading

---

🚀 Installation & Setup

📦 Option 1: Load as Chrome / Edge / Brave Extension (Unpacked)

1. Clone the repository:

   git clone https://github.com/Fire162/Postman.git
   cd Postman

2. Install dependencies and build the extension:

   pnpm install
   pnpm run build

   [!NOTE] The production build output will be generated inside the dist/ directory.

3. Load unpacked in Chromium browser:

   • Open your browser and navigate to:
     • Chrome: chrome://extensions
     • Edge: edge://extensions
     • Brave: brave://extensions
   • Enable Developer mode (toggle switch in the top-right corner).
   • Click Load unpacked (top-left button).
   • Select the dist/ folder inside the cloned Postman repository.
   • Pin the Postmann icon to your browser toolbar for quick access.

---

💻 Option 2: Run Locally as a Web Application

You can also run Postmann as a local development server:

# Install dependencies
pnpm install

# Start local Vite development server
pnpm run dev

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

---

🧪 Built-in API Test Catalog

Postmann includes built-in test endpoints for quick verification:

API	Method	Sample Endpoint	Expected Status
ReqRes Users	GET	https://reqres.in/api/users?page=2	200 OK
ReqRes Create	POST	https://reqres.in/api/users	201 Created
Cat Facts	GET	https://catfact.ninja/fact	200 OK
CoinDesk Bitcoin Price	GET	https://api.coindesk.com/v1/bpi/currentprice.json	200 OK
Agify Age Predictor	GET	https://api.agify.io?name=alex	200 OK
IPinfo Geo	GET	https://ipinfo.io/json	200 OK
Official Joke API	GET	https://official-joke-api.appspot.com/random_joke	200 OK

---

📂 Project Structure

Postman/
├── dist/                     # Compiled extension output (load into Chrome)
├── public/                   # Static icons & manifest assets
│   ├── postman16.png
│   ├── postman48.png
│   ├── postman128.png
│   └── manifest.json         # Extension Manifest V3 configuration
├── src/
│   ├── components/
│   │   ├── historycomponent/ # History view, search, and reload logic
│   │   ├── mrhcomponent/     # Most Requested Headers preset manager
│   │   ├── notescomponent/   # Scratchpad notes editor
│   │   ├── postmanncomponent/# Core request builder, method selector & response view
│   │   ├── variablescomponent/# Variable replacement engine & key-value editor
│   │   └── LinkAlternator.tsx# Main tab navigation bar
│   ├── App.tsx               # Main application container
│   ├── main.tsx              # React DOM entry point
│   └── index.css             # Global styling
├── index.html                # Vite HTML template
├── package.json              # Project dependencies & scripts
├── tsconfig.json             # TypeScript compiler options
└── vite.config.ts            # Vite build configuration

---

🛠️ Development Scripts

# Start development server
pnpm run dev

# Typecheck and build production bundle
pnpm run build

# Run ESLint validation
pnpm run lint

# Preview production build locally
pnpm run preview

---

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page if you want to contribute.

---

📜 License

This project is licensed under the MIT License.