PCPC — Pokémon Card Price Checker

A single product (Pokémon card pricing) deployed three ways from one repo to demonstrate architectural range across modern-edge, enterprise-cloud, and managed-container patterns. One frontend, three interchangeable backends, one shared schema.

Status: Phase 2.2 done — three live paths from one repo. See docs/PORTFOLIO_PLAN.md. Live demo: pcpc.maber.io — toggle all three backends via the corner badge or ?backend=vercel|azure|aca. Architecture comparison: docs/architecture-comparison.md.

The three paths

                         pcpc.maber.io
                       (Vercel · SvelteKit)
                                │
           ┌────────────────────┼────────────────────┐
           │                    │                    │
   ?backend=vercel        ?backend=azure        ?backend=aca
           │                    │                    │
   SvelteKit BFF        APIM → Functions      ACA → Functions
   (+server.ts)          (Consumption)       (KEDA-autoscaled
                                              container)
           │                    │                    │
           └────────────────────┼────────────────────┘
                                │
                       Cosmos DB (Scrydex schema)
                       Redis (optional)

All three paths share the same Cosmos DB account and the same TypeScript types via @pcpc/shared.

Skills demonstrated

Frontend / Edge · SvelteKit 2 · Svelte 5 runes · Tailwind CSS v4 · Vercel adapter · pnpm workspaces

Azure · API Management · Functions v4 · Container Apps + KEDA · Cosmos DB · Redis · Application Insights · Key Vault · Managed Identity · ACR

IaC + Pipelines · Terraform (9 modules) · Azure DevOps multi-stage pipelines · ACR-backed CI containers · Static Web Apps

Architecture / Practice · ADR-driven design · Repository consolidation via git filter-repo · Multi-runtime type sharing · Architectural decision documentation

Live demo

pcpc.maber.io — one URL, one frontend, three switchable backends. A corner badge surfaces the active path with its latency; click to switch, or pin via ?backend=vercel|azure|aca in the URL. Healthcheck-driven graceful degradation hides any path whose /health does not respond within 2s, so partial outages never break the demo. The toggle defaults to Path A — a recruiter who never engages it gets a normal app experience.

Architecture decision records

Decisions live in docs/adr/. The existing ADRs (001–006) cover earlier infrastructure choices (package manager, runtime, caching, devcontainer, schema, API integration). The three-path portfolio story adds:

• ADR-007 — API architecture spectrum (why three paths exist) (Accepted, Phase 1)
• ADR-008 — APIM vs SvelteKit BFF as gateway (Accepted, Phase 1)
• ADR-009 — Functions Consumption vs Container Apps (Accepted, Phase 2.2)
• ADR-010 (optional) — Path to AKS (Phase 3)

Repository layout

PCPC/
├── frontend/          SvelteKit 2 + Svelte 5 app   (Path A — was maber-web/apps/pcpc)
├── backend/
│   ├── functions/     Azure Functions v4           (Path B; Phase 2 → Path C as container)
│   └── shared/        @pcpc/shared types           (canonical Scrydex schema)
├── infra/             Terraform modules            (9 modules + container-app in Phase 2)
├── apim/              APIM as code
├── db/                Cosmos DB schema
├── pipelines/ado/     Azure DevOps multi-stage CI/CD
├── docs/
│   ├── PORTFOLIO_PLAN.md
│   ├── architecture-comparison.md   (in progress)
│   └── adr/
├── tests/             Jest + Playwright + k6
├── memory-bank/       Project memory documentation
└── .devcontainer/     ACR-backed devcontainer (~60s setup)

Quick start

Requires Docker Desktop, VS Code with Dev Containers, and Git.

git clone https://github.com/Abernaughty/PCPC.git
cd PCPC
code .                                            # → "Reopen in Container"
pnpm install                                      # at the repo root
pnpm --filter @pcpc/frontend dev                  # frontend on :5173
pnpm --filter @pcpc/frontend build                # production build (Vercel adapter)

Backend (Path B) and infrastructure are run via pipelines/ado/ and Terraform modules in infra/ — see infra/README.md and pipelines/ado/README.md.

Status by phase

Full plan with risks, success metrics, and open questions: docs/PORTFOLIO_PLAN.md.

License

MIT — see LICENSE.txt.