learntodriveai.dev/Web Development/Performance and Resilience: Designing the Seam
Web Development·Project 15·6 units

Performance and Resilience: Designing the Seam.

**Client:** Ahmed Mattar, Owner and Creative Director, Mattar Heritage Pearls (Manama, Bahrain) — a six-person family pearl-jewelry business in continuous trade since 1850. The online store serves collectors in the GCC, Europe, and East Asia on a Next.js 15 storefront over an Express API gateway with a single backend service, PostgreSQL, a CDN-fronted asset bucket, and an integration with the Bahraini BenefitPay-style payment gateway.

§ Brief

You're making a luxury pearl-jewelry e-commerce site fast under collection-launch traffic and graceful when the local payment gateway misbehaves. The client is Ahmed Mattar, who runs a six-person family business in Manama, Bahrain.

The discipline skills: image architecture for high-fidelity product photography, progressive enhancement as a rendering strategy, circuit breakers and graceful degradation around external dependencies, a two-tier checkout that turns gateway failure into a reservation, defence-in-depth along every fallback path, and observability designed for the seam between the two halves. No discipline column is climbing. The work is integration — performance and resilience on the same system at once.

The AI-direction lesson: you design the project's AI infrastructure from scratch — project memory, directory-scoped subdirectory CLAUDE.md files, skills, hooks — before any code is written. The constraints in the CLAUDE.md at apps/storefront/ carry different commitments than the ones at apps/api-gateway/services/payment/, and Claude Code's ancestor-hierarchy walk-up loads the right ones for the surface you are on — the infrastructure is what keeps the two halves coherent. You also hold the "when NOT to delegate" call on load-bearing decisions. AI's reflexes at the resilience seam are categorically dangerous: retry without backoff, swallow exceptions in fallback paths, propose circuit-breaker thresholds that match no real upstream behaviour. On calls where your reasoning is the deliverable, the right move is to do the work yourself and write the reasoning down.

Your Role

You're a performance-and-resilience consultant brought in for one focused engagement before the next collection launch. Ahmed's six-person team cannot retain you on staff and cannot ignore the problem. Your job is to make the site fast under load, graceful when the gateway is down, and operable by his nephew afterwards. You leave behind a system, an infrastructure, and a trade-off log a maintainer can read.

The register is supervisory. You decide what AI sees through the subdirectory CLAUDE.md files it loads on its walk-up, what gates its commits through hooks, which workflows earn a skill, and which decisions stay in your hands. AI builds the image pipeline, drafts the circuit-breaker code, scaffolds the progressive-enhancement layer; you decide the budgets, thresholds, and threat-model deltas.

What's New

Last time you took a live e-commerce platform for a Melbourne outdoor brand and made it operable before its biggest sales quarter — cost investigation, deploy-strategy per change, peak rehearsal, refactoring an AI infrastructure for ongoing operation.

This project moves on three axes.

The shape rotates instead of progressing. The first half is performance terrain — image architecture, progressive enhancement, render strategy. The second half is resilience terrain — circuit breakers, fallback paths, two-tier checkout, defence-in-depth. The middle unit is the seam. A trade-off log grows across the project; the system only makes sense when both halves are read together.

You design the AI infrastructure from scratch. The site has no CLAUDE.md, no subdirectory CLAUDE.md files, no skills, no hooks. You design all of it before writing any code. The infrastructure is itself a deliverable.

The deadline is the verification. A collection launch is coming. The final unit is a load-tested rehearsal of the integrated system at peak with the gateway intermittently failing. If the storefront stays fast and the checkout degrades gracefully, the engagement worked.

Tools

  • The existing Mattar Heritage Pearls stack — Next.js 15 storefront, Express API gateway, a backend service for catalog/inventory/reservations, PostgreSQL, Bahraini payment-gateway integration, CDN, certificate store for pearl-authentication PDFs. You modify it, not rebuild it.
  • Lighthouse, WebPageTest, k6 — continuing. Performance baselining and load testing.
  • Sharp and the Next.js Image pipeline — image architecture for luxury-goods presentation.
  • Toxiproxy or AWS Fault Injection — new. Fault injection in staging for seam verification.
  • OpenTelemetry, Grafana, Prometheus, Loki, Tempo — continuing. Seam-shaped dashboards designed fresh.
  • Claude Code with project memory and directory-scoped subdirectory CLAUDE.md files at apps/storefront/, apps/storefront/app/checkout/, apps/api-gateway/services/payment/, and apps/api-gateway/services/inventory-sync/, loaded via the ancestor-hierarchy walk-up — designed from scratch in Unit 1.
  • Codex CLI as MCP server — continuing. Cross-tool verification of an infrastructure-portability call.
  • VS Code, Git, GitHub — continuing.

Materials

  • Email from Ahmed — how the project starts. He names the two problems and the standard he holds himself to. Hidden constraints surface through the discovery exchange, not the first email.
  • The Mattar Heritage Pearls platform — the running system as it is today, with the existing payment-gateway integration that fails the way Ahmed describes and heavy image handling.
  • A two-week traffic snapshot — a quiet steady state and one collection launch, for performance baselining and SLO grounding.
  • Bahraini payment-gateway sandbox documentation — published timeouts and outage characteristics. The grounding for circuit-breaker thresholds.
  • Certificate-store API documentation and sample authentication PDF metadata.
  • Curated reference documentation for progressive enhancement, circuit breakers, and fault-injection patterns.
  • A baseline observability stack — already wired, with generic dashboards.

No AI infrastructure, no trade-off log, no threat model, no fault-injection suite, no runbook. Those are your deliverables.

Materials

View all →
Pearl Store/
apps/api-gateway/.dockerignoreapps/api-gateway/Dockerfilejsapps/api-gateway/index.jsjsapps/api-gateway/middleware/auth.jsjsapps/api-gateway/middleware/observability.jsjsonapps/api-gateway/package.jsonjsapps/api-gateway/routes/admin.jsjsapps/api-gateway/routes/catalog.jsjsapps/api-gateway/routes/certificate.jsjsapps/api-gateway/routes/checkout.jsjsapps/api-gateway/routes/reservation.jsjsapps/api-gateway/services/certificate-store/client.jsmdapps/api-gateway/services/inventory-sync/CLAUDE.mdjsapps/api-gateway/services/inventory-sync/poller.jsmdapps/api-gateway/services/payment/CLAUDE.mdjsapps/api-gateway/services/payment/gateway.jsmdapps/storefront/app/checkout/CLAUDE.mdtsxapps/storefront/app/checkout/page.tsxtsxapps/storefront/app/collections/[slug]/page.tsxtsxapps/storefront/app/layout.tsxtsxapps/storefront/app/page.tsxtsxapps/storefront/app/products/[id]/page.tsxtsxapps/storefront/app/products/[id]/product-zoom-client.tsxtsxapps/storefront/app/reservation/[id]/page.tsxmdapps/storefront/CLAUDE.mdtsapps/storefront/lib/catalog-client.tsjsapps/storefront/next.config.jsjsonapps/storefront/package.jsonymlinfrastructure/docker-compose.ymlmdobservability/README.mdjsonpackage.jsonmdREADME.mdjsonseed-data/certificate_metadata.jsonsqlseed-data/collections.sqlsqlseed-data/inventory.sqlsqlseed-data/orders.sqlsqlseed-data/pearls.sqlsqlseed-data/reservations.sqlservices/catalog/.dockerignoreservices/catalog/Dockerfilejsservices/catalog/index.jsjsonservices/catalog/package.jsonsqlservices/catalog/schema.sqljstests/checkout.test.js