Hoppscotch

# MISSION: Scaffold "Hoppscotch" Production Architecture
You are an expert Senior Staff Software Architect and Full-Stack Engineer. Your mission is to scaffold and implement a production-grade, highly reliable, and modular codebase following the proven architecture of **Hoppscotch**.
---
## 1. PROJECT SPECIFICATIONS & BENCHMARK
- **Reference Architecture**: Hoppscotch
- **What It Does**: Hoppscotch is an open-source API development ecosystem for testing REST, GraphQL, WebSocket, and MQTT endpoints, shipped as a web app, Tauri desktop and agent apps, browser extensions, and a CLI, with an optional NestJS/Prisma/PostgreSQL backend for teams and sync.
- **Domain & Category**: API Testing Client
- **Production Scale**: 6-20 people
- **Development Mode**: CLASSIC
- **Architectural Rationale**: App logic lives in one shared Vue package reused by every client shell, while a native Rust relay and a separate Tauri agent process handle outbound HTTP so desktop and agent users are not limited by browser CORS and sandboxing rules.
- **Live Website Reference**: https://hoppscotch.com
- **Source Repository**: https://github.com/hoppscotch/hoppscotch
---
## 2. PRODUCTION TECH STACK
- **Full Stack Array**: Vue, TypeScript, NestJS, GraphQL, Prisma, PostgreSQL, Redis, Tauri, Rust, Go, Docker
- **Primary Language(s)**: TypeScript, Vue, Rust, JavaScript
- **License of the reference repo**: MIT
- **Frontend**: Vue — Vue 3 is the UI framework for the shared app package and every client shell (web, desktop, agent).; Vite — Dev server and production bundler for the selfhost-web, desktop, agent, and admin builds.; CodeMirror 6 — Powers the request/response and script editors (autocomplete, lint, language modes) inside hoppscotch-common.; Tailwind CSS — Utility CSS for the selfhost-web, agent, desktop, and admin apps.; Tauri — Rust-based shell that wraps the shared Vue app into native Desktop and Agent binaries.
- **Backend & APIs**: NestJS — Structures the hoppscotch-backend REST/GraphQL API into modules, controllers, and services.; Apollo Server (GraphQL) — Serves the GraphQL API consumed by the web, desktop, and admin clients.; Prisma — ORM and migration tool for the backend Postgres schema; client is generated during postinstall.; Passport — Auth strategies (GitHub, Google, Microsoft, JWT, local) for backend login and session handling.; hoppscotch-relay (Rust) — Native curl-based HTTP relay that Desktop and Agent use to send requests outside the browser sandbox.
- **Data & persistence**: PostgreSQL — Primary datastore for the backend, reached through Prisma; the bundled compose service sets DATABASE_URL.; Redis — Backs GraphQL subscriptions pub/sub via graphql-redis-subscriptions in the NestJS backend.
- **Infrastructure & deploy**: Docker Compose — Self-host entry point with profiles (default, backend, app, admin, database) built from prod.Dockerfile targets.; Caddy — Serves the static selfhost-web and sh-admin builds in their production Docker images.; Nix (devenv) — Pins the local development toolchain and services via a devenv-managed Nix shell.; Netlify — Legacy static-hosting config for the marketing/web build; the referenced package path predates the current workspace layout.
---
## 3. KEY ARCHITECTURAL DECISIONS (audited from https://github.com/hoppscotch/hoppscotch @ d86e59f)
1. **One shared Vue package is reused across web, desktop, and agent shells**: packages/hoppscotch-common holds the app logic, routes, and editors; packages/hoppscotch-selfhost-web/package.json and packages/hoppscotch-desktop/package.json both pull it in as "@hoppscotch/common": "workspace:^" instead of forking the UI per client.
2. **A native Rust relay bypasses the browser for outbound HTTP requests**: packages/hoppscotch-relay/Cargo.toml wraps curl (with NTLM and vendored OpenSSL) so the Desktop and Agent apps can send requests with custom headers, client certificates, and proxies that a browser sandbox would block.
3. **A separate Tauri agent app runs as a local HTTP proxy for the browser app**: packages/hoppscotch-agent/src-tauri/Cargo.toml builds an axum server plus the relay crate into a standalone system-tray binary, letting the hosted web app delegate privileged requests to a locally running agent process instead of requiring the full desktop app.
4. **docker-compose.yml exposes profiles instead of one fixed self-host stack**: The file documents default, default-no-db, backend, app, admin, database, just-backend, and deprecated profiles built from prod.Dockerfile targets, so operators choose which services (and whether to use the bundled Postgres) start with "docker compose --profile <name> up".
5. **GraphQL subscriptions are backed by Redis, not in-process pub/sub**: packages/hoppscotch-backend/package.json depends on graphql-redis-subscriptions alongside @nestjs/graphql and @apollo/server, so realtime GraphQL events can fan out across multiple backend instances rather than staying scoped to one process.
6. **The self-hosted web build ships its own Go server for serving and verifying assets**: packages/hoppscotch-selfhost-web/webapp-server/go.mod is an independent Go module (klauspost/compress, zeebo/blake3) that compresses and hashes the built web bundle, separate from the Node/Vite toolchain used to build it.
7. **Local dev environment is pinned with Nix via devenv, not a Node version manager alone**: devenv.nix, devenv.yaml, and devenv.lock at the repo root declare the reproducible shell that CONTRIBUTING.md points to, on top of the pnpm workspace.
---
## 4. NON-NEGOTIABLE ARCHITECTURAL GUARDRAILS
1. **Monorepo & Modular Separation**:
   - Structure as a Turborepo monorepo with strict package boundaries:
     - `apps/web`: Application UI, routing, layouts, and server endpoints.
     - `packages/ui`: Shared design tokens, CSS variables, and Radix UI primitive components.
     - `packages/db`: Database schemas, client singleton, declarative migrations, and seed scripts.
     - `packages/config`: Shared TypeScript, ESLint, and build configurations.
2. **Strict Type Safety & Zero `any` Policy**:
   - Enable `strict: true`, `noImplicitAny: true`, and `strictNullChecks: true`.
   - Validate ALL external inputs, API request bodies, and query parameters with **Zod** schemas before execution.
3. **Frontend & Rendering Guidelines**:
   - Isolate interactive UI state to leaf components. Keep core pages lightweight and performant.
4. **Design System & Aesthetics**:
   - Keep every color, radius, shadow and font in a single token file (CSS variables) and consume tokens everywhere; never hardcode hex values in components.
   - Prefer crisp 1px borders and one subtle shadow scale over blurry default shadows. Pair one sans-serif for body/headings with one monospace for tags, badges, metrics, and code.
5. **Data Layer & Reliability**:
   - Write declarative schema definitions with foreign keys, composite indexes on queried filters, and automated timestamp triggers.
   - Use connection pooling and prepared statements for serverless database execution.
---
## 5. STEP-BY-STEP SCAFFOLDING ROADMAP
- **Phase 1: Workspace & Root Config**: Initialize package manager, monorepo configuration (`turbo.json`, `tsconfig.base.json`, `package.json`).
- **Phase 2: Database Schema & Client**: Set up the data layer (PostgreSQL, Redis): client, connection pool, models, and migration scripts.
- **Phase 3: Design Tokens & UI Primitives**: Build accessible `Button`, `Input`, `Card`, `Badge`, and layout wrappers inside `packages/ui`.
- **Phase 4: Core Application Routes & Handlers**: Implement primary authentication, user session handling, and application routes.
- **Phase 5: Quality Assurance & Build Verification**: Run `tsc --noEmit`, ESLint, Prettier, and smoke test suites to ensure zero compilation or runtime errors.
---
## 6. EXECUTION INSTRUCTIONS
1. Review all specifications, architectural guardrails, and stack choices above.
2. Present the full monorepo directory tree structure.
3. Systematically generate the complete, production-ready codebase according to the 5-phase roadmap above — starting with the root workspace setup, followed by the database schema, UI design system package, and full-stack application routes until the repository is fully scaffolded and ready to run.