learntodriveai.dev/Web Development/Full Lifecycle: Brief to Handover
Web Development·Project 19·7 units

Full Lifecycle: Brief to Handover.

**Track:** web-dev

§ Brief

You're building a production platform — project management, client portal, portfolio, festival tracking — for a five-person film company in Havana. The brief is a voicemail.

The discipline skills: engagement architecture from a maximum-ambiguity brief; service boundaries that tolerate partial failure; connectivity patterns per surface (offline-first, sync queue, optimistic UI with rollback); threat-modelling calibrated to the actual profile; SLOs derived from user-facing reliability claims; observability designed in from the first decision; a deployment runbook the client can operate; production monitoring read for the change the client asks for; and a handover packet organised by operations the next maintainer performs.

The AI-direction lesson: every column is at its highest expression in a single engagement and the columns are no longer separable. One architectural decision crosses frontend, backend, infrastructure, observability, and security at once, against four constraints at once: intermittent connectivity, cost, operator capacity, Cuban regulatory context. AI's defaults assume none of them — overengineering from vague briefs, retrofitting observability, proposing SLOs that ignore the environment, treating iteration as feature-driven not data-driven, losing coherence across weeks. The register is supervisory at lifecycle scale — sustaining across deployments and a scope-turn driven by real production data.

Your Role

You're the architect, builder, and operator for a single engagement: problem statement through architecture, implementation, deployment, monitoring, iteration on real usage, and handover. The deliverable is a running platform plus the documentation that lets a five-person company operate it between film shoots.

No scaffold remains. The platform supplies the voicemail, a Cuban-context reference, and a set of templates. Everything else — stack, topology, service boundaries, connectivity strategy, threat model, SLOs, monitoring design, runbook, iteration plan, handover packet — is your design.

AI drafts every layer. You hold architectural coherence across seven units, the trade-off log against the four constraints, and the calls where AI's defaults are wrong by a wide margin.

What's New

Last time you designed the AI development environment for a Toronto nonprofit — memory, skills, hooks, MCP connectivity, lifecycle, handover. The infrastructure was the deliverable. This project flips that framing.

Infrastructure is substrate, not deliverable. Your CLAUDE.md, skills, hooks, and MCP connections sustain the build. They are not what you ship.

Every column is at its highest expression at once. Architecture, build, deploy, monitor, iterate, hand over — integrated, not sequenced. The only project where that is true.

The system is alive before the engagement ends. You deploy in Unit 5. Real post-production clients use it. Monitoring shows a pattern. Daniel asks for a change. You design and ship it as the next unit; the verification architecture evolves with the new surface.

Four first-class constraints calibrate every decision. Intermittent connectivity is an invariant, not a tolerated condition. Cost is film budget. Operator capacity is filmmakers, not on-call engineers. Cuban regulatory and payment context shapes the data model.

Tools

  • Claude Code across the full multi-week engagement. Your CLAUDE.md, skills, hooks, and MCP connections from earlier projects carry across all seven units.
  • A web stack you choose in Unit 1 against the trade-off log. Default direction: Next.js (App Router) + React + Tailwind + PostgreSQL with a service-worker offline-first layer, deployed to a low-cost managed platform (Vercel Hobby, Railway, Fly.io, AWS Amplify). Calibrated to Daniel's budget.
  • PostgreSQL for project, portal, and festival data — Neon, Supabase, or the deployment platform's own managed offering.
  • A service-worker offline-first layer, with sync queues for deferred writes and optimistic UI for immediate-feedback actions.
  • Sentry free tier for errors, structured logging on the hosting platform, BetterStack free tier for uptime. Chosen against cost, not feature lists.
  • Git and GitHub. The trade-off log, threat model, observability design, deployment runbook, and handover packet all live in the repository.
  • VS Code + Claude Code extension.

Materials

  • Daniel's voicemail transcript (daniel-voicemail.md) — 3:52 from a dropping Havana WiFi hotspot. He names the company, the four functional needs, and one explicit constraint: it has to work when the internet is bad, "which is always." The regulatory context, the payment intermediaries, and two design blind spots surface only when you ask.
  • The Cuban-context reference (references/cuban-production-context.md) — Havana connectivity, ICAIC registration, the three payment intermediary channels, festival circuit timing, Vega's operating shape. Sparse enough that the discovery still does work.
  • Four more references under references/ — intermittent-connectivity patterns, observability as architecture, the iteration cycle, a template-set overview.
  • The full-lifecycle templates under templates/ — engagement architecture, trade-off log, schema, API contract, verification architecture, frontend design, threat model, observability, SLOs, deployment runbook, monitoring journal, iteration evidence, and a handover packet pre-seeded with operation entries, not feature entries.
  • The engagement governance file (CLAUDE.md) — constraints, served audiences, critical claims, verification targets, commit conventions.

No recommended stack. No prescribed architecture. No deployment platform. No monitoring service. The brief is the voicemail.