my-postman

Note: This is a personal project created for light API testing needs. It is not intended as a full Postman alternative—rather, it's a simplified tool for those who don't need Postman's extensive feature set.

A lightweight, 100% client-side API testing tool for personal use. Built with React 19, TypeScript, and Vite.

Features

• 100% Client-Side - All HTML, CSS, and JavaScript are delivered to the browser. No server calls after initial load.
• Persistent Storage - All requests are automatically saved to localStorage in real-time.
• Multiple Requests - Create, edit, and manage multiple API requests using tabs.
• HTTP Methods - Support for GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS.
• Headers Editor - Add custom headers with a key-value pair editor.
• Query Parameters - Build query params visually with URL preview.
• Authorization - Built-in Bearer token support (other auth types can be added via headers).
• Request Body - Support for JSON, Form-Data, and Raw Text.
• Response Display - View status code (color-coded), response body, headers, and request time.
• JSON Syntax Highlighting - Automatic JSON formatting and syntax highlighting.
• Dark Theme - Beautiful dark theme inspired by Postman.

Screenshot

Installation

# Clone the repository
git clone https://github.com/yourusername/my-postman.git
cd my-postman

# Install dependencies
npm install

# Start development server (requires Node.js 20.19+ or 22.12+)
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Usage

1. Create a Request - Click "+ New Request" to create a new request tab.
2. Configure Request - Set the HTTP method, URL, headers, query params, and body.
3. Send Request - Click "Send" or press Ctrl+Enter to execute the request.
4. View Response - See the status code, response time, headers, and body in the right panel.

Project Structure

src/
├── types/              # TypeScript type definitions
├── context/            # React Context for state management
├── utils/              # Utility functions (fetch, storage, JSON)
├── components/         # React components
│   ├── AppLayout.tsx           # Main layout
│   ├── RequestTabs.tsx         # Tab navigation
│   ├── KeyValueEditor.tsx      # Reusable key-value editor
│   ├── RequestEditor/          # Request configuration
│   └── ResponsePanel/          # Response display
├── App.tsx             # Root component
└── index.css           # Global styles with dark theme

State Management

This project uses React Context + useReducer for state management without any external libraries. All request configurations are automatically synchronized to localStorage on every change.

Storage Schema

Requests are stored in localStorage under the key my-postman-requests:

interface StoredRequest {
  id: string;                    // Unique identifier
  name: string;                  // Request display name
  url: string;                   // Request URL
  method: HTTPMethod;            // GET, POST, etc.
  headers: KeyValue[];           // Custom headers
  queryParams: KeyValue[];       // Query parameters
  authToken: string;             // Bearer token
  bodyType: 'json' | 'form-data' | 'raw-text';
  bodyContent: string;           // Request body
  lastResponse?: ResponseData;   // Last response (not persisted)
  createdAt: number;             // Creation timestamp
  updatedAt: number;             // Last update timestamp
}

CORS Considerations

Since this is a 100% client-side application, CORS restrictions apply. The API you're testing must have CORS enabled and allow requests from your origin. For testing your own APIs, ensure:

1. The server sends appropriate Access-Control-Allow-Origin headers
2. The allowed methods include the HTTP method you're using
3. The allowed headers include any custom headers you're sending

Keyboard Shortcuts

Shortcut	Action
Ctrl+Enter	Send request
Ctrl+N	New request (planned)
Ctrl+W	Close tab (planned)

Technologies

• React 19.2 - UI library
• TypeScript 5.9 - Type safety
• Vite 7.2 - Build tool and dev server
• Fetch API - HTTP requests (no axios needed)

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)

Development

# Run linter
npm run lint

# Type check
npx tsc -b

# Build
npm run build

Roadmap

• Collections/Folders for organizing requests
• Import/Export requests (JSON file)
• Request history
• Environment variables
• Code generation (curl, JavaScript, Python)
• Light/Dark theme toggle
• Proxy mode for CORS troubleshooting

License

MIT License - feel free to use this project for personal or commercial purposes.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Acknowledgments

• Inspired by Postman
• Built with Vite
• Dark theme colors inspired by VS Code