<> Preact API Contract Workbench

A production-minded OpenAPI workspace for YAML import, endpoint exploration, schema inspection, mock requests, editing, and breaking-change review.

---

✨ Highlights

• Structured Import: Parses local YAML or JSON OpenAPI documents.
• Endpoint Explorer: Groups operations by tag and searches path, method, summary, or operation ID.
• Request Inspection: Presents request bodies and response contracts as structured data.
• Mock Console: Produces deterministic local responses without contacting an API.
• Version Comparison: Detects removed endpoints, added endpoints, removed schemas, and newly required fields.
• Source Editor: Parses and persists edited contract YAML.
• Change Report: Separates breaking and informational contract changes.
• Sample Pair: Opens with immediately useful previous and current API versions.

🧱 Project Structure

public/favicon.svg
public/sample-commerce-api-v1.yaml
public/sample-commerce-api.yaml
src/app.tsx
src/components/change-report.tsx
src/components/contract-inspector.tsx
src/components/endpoint-nav.tsx
src/domain/openapi.ts
src/index.css
src/main.tsx
src/services/contract-store.ts

🛠️ Tech Stack

• Preact 10 with Vite 8
• TypeScript 6
• Tailwind CSS 4
• Prettier 3
• YAML for structured OpenAPI parsing
• Zod for validated contract boundaries
• IndexedDB and Lucide icons

📦 Included Demo Data

public/sample-commerce-api.yaml and public/sample-commerce-api-v1.yaml provide related synthetic OpenAPI 3.1 contracts with added endpoints, a removed legacy route, and newly required fields.

All organizations, identities, amounts, events, and operational records are synthetic and remain in the browser.

🚀 Local Development

npm install
npm run dev

Open http://localhost:5173.

🔌 Extension Notes & Nuances

• Parsing uses a structured YAML parser rather than ad hoc text matching.
• The breaking-change engine demonstrates high-value checks and is not a complete OpenAPI compatibility specification.
• Mock requests never contact the displayed server URL and require no credentials.
• Validate references, security schemes, parameter locations, media types, and composition semantics before production publication.
• Replace src/services/contract-store.ts with repository or registry storage while preserving source boundaries.
• The endpoint rail becomes horizontal on mobile; dense schema content scrolls inside its own region.

🧪 Build & Checks

npm run format:check
npm run build
npm run preview
npm audit --omit=dev

🌐 Vercel Deployment

{
  "$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.