General arrangement · DWG GV-001 General arrangement · GV-001
C Rev C · now with AI Rev C Prototype → ProductGeorge Vrancianu AI-driven product developer and senior frontend engineer. 15+ years of React and TypeScript, full-stack ownership and AI features, from the first sketch to production. AI-driven product developer and senior frontend engineer. 15+ years of React and TypeScript, full-stack ownership and AI features. AI-driven product developer · senior frontend engineer · 15+ years
Process diagram · DWG GV-002 Process diagram · GV-002
AI-made prototype in. Shippable product out. 1 Audit Map what the prototype does, what is faked and what breaks first. What it really does, what is faked, what breaks first. Out: risk list 2 Architect Modules, data model, boundaries. A few patterns everyone follows. Modules, data model, boundaries, shared patterns. Out: target structure 3 Refactor Typed components, predictable state, dead code out. Out: readable code 4 Harden Tests, loading and error states, accessibility, performance. Tests, error states, accessibility, performance. Out: test suite 5 Ship CI, review gates, preview deploys and a handover. CI, review gates, a codebase your team owns. Out: a codebase you own Bill of materials Item Part Group 01 React, TypeScript Frontend craft Frontend 02 Design systems: Material UI, Tailwind, Headless UI Material UI, Tailwind, Headless UI Frontend craft Frontend 03 React Table, D3.js, React DnD Frontend craft Frontend 04 OpenAI API vision workflows Agentic AI 05 Claude, OpenAI Codex, agent PRs with human review Claude, Codex, agent PRs + review Agentic AI 06 NestJS, PostgreSQL, GraphQL with Apollo NestJS, PostgreSQL, GraphQL + Apollo Product engineering Product eng. 07 Jest, TestCafe, CI pipelines Product engineering Product eng.
Frontend craft React, TypeScript, Material UI, Tailwind, React Table, D3.js
Agentic AI OpenAI vision, Claude, Codex, agent PRs with human review
Product engineering NestJS, PostgreSQL, GraphQL + Apollo, Jest, TestCafe Notes · Audit
I run the prototype end to end and read every route before changing a line. Mocked APIs, hard-coded data and copy-pasted logic go on the risk list, ranked by what breaks first. Nothing is rewritten yet; the audit decides what is worth keeping. Notes · Architect
Feature modules with clear boundaries, each owning its data, UI and tests. One data model, and one way to fetch, cache and change it. A few conventions, written down, so people and AI agents write code that fits. Notes · Refactor
Behaviour is preserved through every step. Users never notice the rebuild. Small pull requests, each one reviewed and each one leaving the app shippable. AI agents draft the mechanical changes; a human approves every one. Notes · Harden
Tests pin down the behaviour that matters before anyone changes it again. Every screen gets its loading, empty and error states. Accessibility and performance are checked in CI, not after launch. Notes · Ship
Every change ships through a reviewed pull request, with CI and a preview deploy. A handover: architecture notes, decision records and a walkthrough with the team. A well-designed codebase stays maintainable: new features land in days, not rewrites. Audit · Nothing is rewritten yet; the audit decides what is worth keeping.
Architect · A few conventions, written down, so people and AI agents write code that fits.
Refactor · AI agents draft the mechanical changes; a human approves every one.
Harden · Accessibility and performance are checked in CI, not after launch.
Ship · A well-designed codebase stays maintainable: new features land in days, not rewrites.
