diff --git a/.impeccable/hook.cache.json b/.impeccable/hook.cache.json new file mode 100644 index 0000000..4232029 --- /dev/null +++ b/.impeccable/hook.cache.json @@ -0,0 +1 @@ +{"version":1,"sessions":{"c957bc52-5e60-4e60-b458-6a06a353d089":{"updatedAt":1782373395162,"files":{"/Users/waldek/.copilot/copilot-worktrees/dev-proxy-tools.github.io/wmastyka-microsoft-congenial-sniffle/src/pages/index.astro":{"editCount":20,"findings":["gradient-text:20","gradient-text:411","ai-color-palette:320","ai-color-palette:20","ai-color-palette:411","gradient-text:410","ai-color-palette:319","ai-color-palette:410","gradient-text:409","ai-color-palette:318","ai-color-palette:409","gradient-text:408","ai-color-palette:317","ai-color-palette:408","gradient-text:407","ai-color-palette:316","ai-color-palette:407"]},"/Users/waldek/.copilot/copilot-worktrees/dev-proxy-tools.github.io/wmastyka-microsoft-congenial-sniffle/src/styles/global.css":{"editCount":3,"findings":["side-tab:89","side-tab:90","side-tab:81"]},"/Users/waldek/.copilot/copilot-worktrees/dev-proxy-tools.github.io/wmastyka-microsoft-congenial-sniffle/src/layouts/Layout.astro":{"editCount":1,"findings":["single-font:27"]}}}}} \ No newline at end of file diff --git a/PRODUCT.md b/PRODUCT.md new file mode 100644 index 0000000..1c6cde9 --- /dev/null +++ b/PRODUCT.md @@ -0,0 +1,41 @@ +# Product + +## Register + +brand + +## Users + +Developers building apps that consume APIs — frontend devs, full-stack devs, platform engineers. They land here from search, social, or word-of-mouth. They're evaluating whether Dev Proxy solves a pain they already have (flaky API integrations, untested error paths, expensive AI token burn during development). Context: at their desk, mid-project, looking for a tool that fits into their existing workflow without friction. + +## Product Purpose + +Marketing site for Dev Proxy — an open-source, cross-platform API simulator. The site's job is to make developers understand the value proposition in seconds and get them to try the tool. Success: a developer arrives, recognizes their own pain, and clicks through to install/get started. + +## Brand Personality + +Technical, confident, developer-native. + +Speaks like a senior engineer who's built this for other engineers. No marketing fluff, no corporate speak. Shows rather than tells. Assumes competence. The confidence comes from knowing the tool actually works — not from shouting. + +## Anti-references + +- AI-generated slop — the dime-a-dozen landing page with identical structure, gradient text, glassmorphism cards, eyebrow labels on every section, and "Built for the modern developer" copy +- Generic SaaS templates — hero + 3 feature cards + pricing + footer +- Enterprise/corporate heaviness — compliance language, stock photography, dense feature matrices +- "Developer advocacy" cringe — forced enthusiasm, emoji-heavy, "🚀 Ship faster!" + +## Design Principles + +1. **Show the terminal, not the brochure.** Every claim is backed by a concrete code/config/output example. The product sells itself through demonstration. +2. **Respect the reader's time.** Developers skim. Front-load value. Every section earns its place or gets cut. +3. **Sell the problem you solve, not the features you have.** Lead with pain, resolve with outcome. The tool is the means, not the message. +4. **One voice, not six.** The page should feel like one coherent argument building toward a single conclusion, not a feature catalogue. +5. **Earned confidence.** Trust comes from specificity, proof, and craft — not from bold claims or social pressure. + +## Accessibility & Inclusion + +- WCAG 2.1 AA minimum +- Dark and light mode with system preference detection +- Reduced motion support for all animations +- No information conveyed by color alone diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 4eff21b..79b8ca8 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -22,6 +22,9 @@ const ogImage = image ? new URL(image, Astro.site ?? 'https://devproxy.net').hre {title} - Dev Proxy + + + diff --git a/src/pages/index.astro b/src/pages/index.astro index 50da7f2..4bd0c55 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -4,32 +4,29 @@ import Layout from '../layouts/Layout.astro'; - +
-
- +
-

+

You test the happy path.
- Your users get the rest. + Dev Proxy tests everything else.

- APIs fail. They throttle. They respond slowly. They return unexpected data. And when they do, your app needs to handle it gracefully. But simulating these failures is hard — until now. + Errors, throttling, timeouts, unexpected payloads. All the things that break apps in production but are hard to reproduce in development. Dev Proxy simulates them against your running app, locally, without changing your code.

- -
-
- - -
-
-

API Mocking

-

Mock APIs that don't exist yet.

-

- Stand up a fully-functional CRUD API without writing a single line of server code. Design, prototype, and build your frontend in parallel with your backend. -

-
- Learn more → + +
+ +
+
- + +
+
-
-

Resilience Testing

-

See how your app handles API errors.

+
+

Verify your retries, fallbacks, and error states actually work.

- Simulate random errors, timeouts, and failures for any API — without touching your code. Build more robust apps and never lose your customers' data. + Inject random errors, timeouts, and 5xx responses into any API your app calls. Test your loading states, retry logic, and error messages before real users depend on them. Zero code changes.

Learn more →
-
+

// errors-contoso-api.json

"url": "https://api.contoso.com/*"

"responses":

@@ -129,130 +137,73 @@ import Layout from '../layouts/Layout.astro';

// Random errors at configured failure rate.

+
+
- -
-
-

AI / LLM Testing

-

Build & test AI apps without burning tokens.

-

- Route OpenAI and Azure OpenAI API calls to a local language model during development. Get real responses while building your AI-powered apps — without spending tokens. -

- - Learn more → - -
-
-

// Your app calls OpenAI

-

POST /v1/chat/completions

-

// Dev Proxy routes to local LLM

-

Ollama (llama3.2)

-

200 { "choices": [{ "message": ... }] }

-

// Real responses. Zero API costs.

-
-
+ +
+
- +
-

Rate Limit Simulation

-

Verify your app respects API limits.

-

- Simulate rate limiting and throttling responses before they happen in production. Avoid getting blocked and deliver a smoother experience for your users. +

Build frontend features before the backend is ready.

+

+ Mock realistic CRUD APIs locally so your team can prototype, integrate, and ship frontend work without waiting for backend endpoints. Define it in JSON, get a working API in seconds.

- + Learn more →
-
-

RateLimit-Limit: 3

-
-
- GET /api/orders - Remaining: 2 -
-
- GET /api/orders - Remaining: 1 -
-
- GET /api/orders - Remaining: 0 -
-
-
- GET /api/orders - 429 Too Many Requests -
-

Retry-After: 30

-
+
+

// customers-api.json / CrudApiPlugin

+

"baseUrl": "https://api.contoso.com/customers"

+

getAll GET    /customers

+

getOne GET    /customers/{id}

+

create POST   /customers

+

merge  PATCH  /customers/{id}

+

delete DELETE /customers/{id}

+

// Defined in JSON. Zero server code.

- +
-

CI/CD Integration

-

Automate chaos testing in your pipeline.

-

- Run Dev Proxy as part of your CI/CD pipeline to catch API integration issues before they reach production. Works with GitHub Actions, Azure DevOps, and more. +

Iterate on AI features without burning tokens.

+

+ Route OpenAI and Azure OpenAI calls to a local model while you build. Iterate faster, test AI workflows end-to-end, and keep your API bill at zero during development.

- + Learn more →
-
-

# .github/workflows/test.yml

-

steps:

-

- name: Setup Dev Proxy

-

uses: dev-proxy-tools/actions/setup@v1

-

- name: Run tests

-

run: npm test

-

- name: Stop Dev Proxy

-

uses: dev-proxy-tools/actions/stop@v1

-

✓ 42 passed, 0 failed

-
-
- - -
-
-

MCP Server

-

Configure Dev Proxy with AI assistants.

-

- Use the Dev Proxy MCP server to create configurations using natural language. Get contextual help and discover features — right from your AI assistant. -

- - Learn more → - -
-
-

// .vscode/mcp.json

-

{

-

  "servers": {

-

    "devproxy": {

-

      "type": "stdio",

-

      "command": "npx",

-

      "args": ["-y", "@devproxy/mcp"]

-

    }

-

  }

-

}

-

// AI-powered configuration. Natural language.

+
+

// Your app calls OpenAI

+

POST /v1/chat/completions

+

// Dev Proxy routes to local LLM

+

Ollama (llama3.2)

+

200 { "choices": [{ "message": ... }] }

+

// Real responses. Zero API costs.

-
- -
-
-

Platform Agnostic

-

Works with everything you use.

-

- Dev Proxy intercepts network traffic at the system level. It works with any language, framework, and API — no SDKs, no adapters, no code changes. + +

+ +
+

Test the app you actually ship.

+

+ Dev Proxy intercepts HTTP traffic at the system level. No SDKs. No adapters. No test-only code paths. It works against the app you already have. The same binary your users run.

-
+

+ Not mocks. Not stubs. Not a test harness.
Real API behavior, simulated locally against your real app. +

+
{[ { name: '.NET', icon: `${import.meta.env.BASE_URL}logos/dotnet.svg` }, { name: 'Node.js', icon: `${import.meta.env.BASE_URL}logos/nodejs.svg` }, @@ -263,22 +214,59 @@ import Layout from '../layouts/Layout.astro'; { name: 'Browser', icon: `${import.meta.env.BASE_URL}logos/browser.svg` }, { name: 'Any REST API', icon: `${import.meta.env.BASE_URL}logos/rest-api.svg` }, ].map((tech) => ( -
- -

{tech.name}

+
+ +

{tech.name}

))}
- + +
+
+
+ +
+

Prevent rate-limit surprises.

+

+ Simulate 429s and throttling locally. Validate your retry logic and backoff strategy before real APIs block your app. +

+ + Learn more → + +
+ +
+

Catch issues before deploy.

+

+ Run Dev Proxy in CI/CD to test against errors and throttling on every push. Issues surface in the PR, not in production. +

+ + Learn more → + +
+ +
+

Configure with AI assistants.

+

+ Use the Dev Proxy MCP server to generate configurations in natural language. Describe what you want to simulate and your AI assistant writes the config. +

+ + Learn more → + +
+
+
+
+ +
-

See It In Action

-

Get started with Dev Proxy.

-

- Watch how to set up Dev Proxy and start testing your app in minutes. +

Up and running in 5 minutes.

+

+ Install, point at any URL, and start simulating failures immediately.

@@ -294,66 +282,31 @@ import Layout from '../layouts/Layout.astro';
- -
+ +
-
-

Get Started In Minutes

-

What do you want to do?

-
-
- {[ - { title: 'Mock an API that doesn\'t exist yet', time: '10 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-crud-api' }, - { title: 'Test my app handles API errors', time: '5 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/test-my-app-with-random-errors' }, - { title: 'Simulate OpenAI with a local LLM', time: '15 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-openai' }, - { title: 'Simulate rate limiting responses', time: '10 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-rate-limit-api-responses' }, - { title: 'Automate API testing in CI/CD', time: '15 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/use-dev-proxy-with-github-actions' }, - { title: 'Discover what APIs my app calls', time: '5 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/discover-urls-to-watch' }, - ].map((scenario) => ( - -

{scenario.title}

-
- {scenario.time} - -
-
- ))} -
-
-
- - -
-
-
+
-

VS Code Extension

-

Dev Proxy Toolkit for Visual Studio Code.

-

- Control Dev Proxy directly from your editor. Manage configurations with IntelliSense, use 100+ code snippets, and leverage the built-in MCP server for AI-assisted development — all without leaving VS Code. +

Stay in your editor.

+

+ The Dev Proxy Toolkit for VS Code gives you IntelliSense for config files, 100+ code snippets, debugger integration, and a built-in MCP server. All without leaving your editor.

- + Install from Marketplace →
-
-
- Visual Studio Code +
+
+ Visual Studio Code
-

Dev Proxy Toolkit

+

Dev Proxy Toolkit

garrytrinder

-
+
- Control Dev Proxy from VS Code + Start/stop from the command palette
@@ -369,7 +322,7 @@ import Layout from '../layouts/Layout.astro';
- MCP server for AI-assisted development + MCP server for AI-assisted config
@@ -377,7 +330,7 @@ import Layout from '../layouts/Layout.astro';
- +
- +
-

+

How does your app handle
- API errors? + a flaky API?

- Find out in minutes. Dev Proxy is open source and free. + Find out in 5 minutes. Free, open source, runs on your machine.

- Get Started + Simulate your first API error diff --git a/src/styles/global.css b/src/styles/global.css index fceecbb..54adc8e 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -4,6 +4,7 @@ --color-purple-400: #c084fc; --color-purple-500: #a855f7; --color-purple-600: #9333ea; + --font-heading: 'Sora', ui-sans-serif, system-ui, sans-serif; } :root {