✦ Preact REST API Workspace

A sleek, browser-based HTTP client and API testing workspace, inspired by Postman and Insomnia.

---

✨ Highlights

• Live HTTP Execution: Executes real fetch requests directly from the browser, measuring network latency, response size, and capturing HTTP status codes in real-time.
• Custom Syntax Highlighter: Features a lightweight, regex-based JSON syntax highlighter built from scratch—no heavy external dependencies (like Prism.js) required.
• Deep State Management: Efficiently manages complex, nested workspace states, including request collections, dynamic header grids, query parameters, and tab configurations.
• Premium IDE Aesthetics: Designed with a deep dark mode (Zinc palette), resizable split-pane layout emulation, custom scrollbars, and state-driven typography.

🧱 Project Structure

src/
|-- main.tsx          # Application entry point
`-- app.tsx           # Monolithic codebase containing the HTTP engine, Custom Highlighter, and Grid UI

🚀 Local Development

npm install
npm run dev

Open http://localhost:5173.

⚠️ Desktop Required: This application features a complex, multi-pane IDE layout designed specifically for desktop viewports. It is not currently optimized for mobile devices or touch screens.

The workspace is pre-loaded with mock requests targeting public APIs (jsonplaceholder.typicode.com) to demonstrate safe, out-of-the-box network capabilities.

🔌 Extension Notes & Nuances

• Desktop-Exclusive UI: The layout utilizes a fixed split-pane architecture and dense data grids typical of professional developer tools (like Postman). Mobile responsiveness (stacking panes, off-canvas sidebars) has been omitted to focus on core HTTP client logic.
• CORS Limitations: Because this client runs directly in the browser, it is strictly bound by Cross-Origin Resource Sharing (CORS) security policies. You cannot fetch data from arbitrary domains unless the target server explicitly sends Access-Control-Allow-Origin headers. For full unrestricted network access, this architecture must be wrapped in an Electron app or proxied through a Node.js backend.
• State Persistence: Currently, workspace history and configurations live in React state (RAM). Refreshing the page clears the workspace. To make this production-ready, connect the state hooks to localStorage or IndexedDB.
• Monolithic Architecture: For demonstration of deep state flow, all components (KeyValueGrid, SyntaxHighlighter, SplitPanes) are housed in a single file. For further scaling, extract these into atomic components.

🧪 Build & Checks

npm run build
npm run preview

🌐 Vercel Deployment

The repository includes a highly optimized vercel.json for Vite static SPA deployment, ensuring perfect client-side routing.

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "vite",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

📄 License

MIT License. See LICENSE.