Postman Clone

🌐 https://postman-clone-simple.vercel.app

Cliente HTTP de escritorio/web inspirado en Postman. Permite probar, diseñar y explorar APIs REST con colecciones, historial, variables de entorno, autenticación y mucho más.

---

Stack

Capa	Tecnología
UI	React 18.3
Lenguaje	TypeScript 6 (strict)
Build	Vite 6
Estilos	Tailwind CSS 3.4 + modo oscuro
Editor	CodeMirror 6 (JSON + XML)
HTTP	axios 1.x
Persistencia	IndexedDB (idb)
Gestor	pnpm 11
Linting	ESLint 9 flat config + typescript-eslint
PWA	vite-plugin-pwa (installable, offline)
DnD	@dnd-kit/sortable

---

Instalación

# Prerequisitos: Node.js >=20, pnpm >=11
git clone https://github.com/cmurestudillos/postman.git
cd postman-clone
pnpm install

Scripts disponibles

Comando	Descripción
pnpm dev	Servidor de desarrollo con HMR en http://localhost:5173
pnpm build	Build de producción → dist/
pnpm preview	Preview del build en local
pnpm lint	ESLint sobre todo el proyecto
pnpm lint:fix	Auto-fix de errores ESLint
pnpm typecheck	Comprobación de tipos TypeScript
pnpm deploy	Build + publicar en GitHub Pages

---

Funcionalidades

Petición HTTP

• Métodos GET · POST · PUT · PATCH · DELETE
• Body: raw JSON · form-data · x-www-form-urlencoded
• Autenticación: Bearer Token · Basic Auth · API Key (header o query param)
• Headers y query params con editor de pares clave/valor
• Timeout configurable por petición (0 = sin límite)
• Preview de URL resuelta con variables de entorno
• Indicador ⚠ de variables {{var}} no definidas en el entorno activo
• Ctrl+Enter para enviar

Respuesta

• Badge de status HTTP con color (2xx verde · 3xx azul · 4xx ámbar · 5xx rojo)
• Tiempo de respuesta (naranja si > 1s) y tamaño
• Editor JSON con resaltado de sintaxis
• Pretty-print XML automático con resaltado
• Preview HTML en iframe sandbox cuando la respuesta es HTML
• Copiar body al portapapeles con feedback visual

Colecciones

• Crear, renombrar, eliminar colecciones
• Guardar peticiones con nombre, colección y descripción
• Marcar peticiones como ⭐ favoritas (sección fijada al top del sidebar)
• Renombrar peticiones (doble clic o botón)
• Duplicar petición en la misma colección
• Mover petición entre colecciones
• Reordenar peticiones con drag & drop
• Buscar peticiones por nombre, URL o método
• Exportar colección como Postman v2.1 (compatible con Postman, Insomnia, Bruno)
• Importar colecciones: Postman v2.x · Insomnia v4 · Bruno v1 (auto-detección)

Historial

• Se guarda automáticamente tras cada petición
• Muestra método, status HTTP, duración y URL
• Tiempo relativo ("hace 5m", "hace 2h")
• Cargar petición del historial en la pestaña activa
• Exportar historial como colección Postman v2.1
• Limpiar historial (máx 50 entradas, LIFO)

Variables de entorno

• Múltiples entornos (Development, Staging, Production…)
• Sintaxis {{variable}} en URL, headers, params y body
• Preview en tiempo real de la URL resuelta
• Selector de entorno activo en la navbar
• Editor completo: crear, renombrar, eliminar entornos y variables
• Las variables se resuelven también en auth (bearer token, API key…)

Interfaz

• Múltiples pestañas de petición independientes — cada una con su propio estado
• Modo oscuro completo con preferencia persistida
• PWA: instalable como app de escritorio desde el navegador, funciona offline
• Sidebar con colecciones, historial, búsqueda y favoritos
• Modales custom (sin diálogos nativos del navegador)
• Tema claro por defecto, toggle 🌙/☀️ en la navbar

Persistencia

• Almacenamiento en IndexedDB (sin límite práctico)
• Migración automática desde localStorage en la primera carga
• Colecciones, historial, entornos y configuración persisten entre sesiones

---

Estructura de carpetas

src/
├── App.tsx                    # Root — gestión de tabs, colecciones, historial, entornos
├── main.tsx                   # Entry point + interceptores axios
├── hooks/
│   └── useTheme.ts            # Dark/light mode con persistencia
├── types/
│   ├── collection.ts          # SavedRequest, Collection
│   ├── history.ts             # HistoryEntry
│   ├── environment.ts         # Environment, EnvVariable
│   ├── auth.ts                # AuthConfig, AuthType
│   └── body.ts                # BodyType
├── utils/
│   ├── db.ts                  # IndexedDB (idb) — load/save con migración
│   ├── helpers.ts             # convertKeyValueToObject, KeyValuePair
│   ├── interpolate.ts         # {{variable}} → valor, unresolvedVars
│   ├── authHelpers.ts         # buildAuthHeaders, buildAuthQuery
│   ├── postmanFormat.ts       # Import/export Postman, Insomnia, Bruno
│   ├── xmlFormat.ts           # isXml, formatXml
│   └── historyStorage.ts      # addHistoryEntry (max 50, LIFO)
├── components/
│   ├── Layout/                # Navbar + Layout con slots sidebar/tabBar
│   ├── Tabs/                  # TabBar
│   ├── Collections/           # CollectionSidebar, SortableRequestItem, modales
│   ├── Environment/           # EnvironmentSelector, EnvironmentModal
│   ├── History/               # (integrado en CollectionSidebar)
│   ├── Panes/
│   │   ├── Json/              # JsonEditorPane (CodeMirror, JSON + XML)
│   │   ├── KeyValue/          # KeyValuePane, KeyValueEditor
│   │   ├── RequestUrl/        # UrlEditor
│   │   ├── ResponseHeader/    # ResponseHeaderPane
│   │   ├── Auth/              # AuthPane
│   │   ├── Body/              # BodyPane
│   │   └── HtmlPreview/       # HtmlPreviewPane (iframe sandbox)
│   ├── Tab-Groups/            # RequestTabGroup, ResponseTabGroup
│   ├── UI/                    # ConfirmModal, PromptModal, ThemeToggle
│   └── Workspace/
│       ├── Request/           # RequestPanel
│       └── Response/          # ResponsePanel
└── assets/css/App.css         # Tailwind directives + CodeMirror dark theme

---

PWA — Instalar como app

1. Ejecuta pnpm build && pnpm preview
2. En Chrome: icono de instalación (⊕) en la barra de direcciones → "Instalar"
3. En móvil: "Añadir a pantalla de inicio"

El Service Worker solo activa en producción (pnpm preview) y en HTTPS. En pnpm dev no se activa para no interferir con el desarrollo.