Back to Home

Product Building & Vibe Coding

Building Real Products
with AI

I build real, working products using AI as my primary tool — no traditional coding required. Here's a look at what I've built, how I built it, and what each one proves is possible for a product manager who thinks like a builder.

My Website

A live, SEO-optimised portfolio — built entirely with AI

Live

Summary

This portfolio website is both the product and the proof. The goal was to build a professional, high-performance personal website that showcases my work as a product manager and positions me as an AI Product Builder — without relying on a developer or a website builder template. Every design decision, every line of code, and every SEO optimisation was directed by me and executed by AI. The result is a site that loads fast, ranks in search, tracks user behaviour, and looks nothing like a template.

Tools Used

Gemini Claude AI Google Analytics Google PageSpeed Microsoft Clarity Sentry GitHub Netlify

Development Process

01 Design Gemini — Layout & visual identity
02 Prototype Claude — React prototype, then HTML migration
03 SEO Claude — Metadata, schema, Open Graph
04 QA & Debug Claude — Cross-device bugs, performance tuning
05 Deploy GitHub + Netlify — CI/CD pipeline

I started with a brief to Gemini: design a dark, minimal portfolio with an orange accent that feels premium but not corporate. Gemini gave me the visual direction — layout, spacing logic, and the black-and-orange palette. Then I moved to Claude to turn that direction into code. We first built a React prototype, but after testing performance I made the call to migrate to pure HTML and CSS — no framework overhead, no JavaScript bundle, just fast-loading static files.

Claude then helped me instrument the full SEO stack: metadata, Twitter cards, Open Graph previews, structured data for Google rich results, and canonical URLs. The entire QA process — finding mobile bugs, fixing layout shifts, and tuning animations — was also done in conversation with Claude. I described what I saw, Claude fixed it. No Stack Overflow, no developer. Just clear thinking and precise prompting.

Outcome

01
Live Platform
A professional digital presence that shows, not just tells, what AI-powered product management looks like.
02
Search Visible
Structured data, canonical URLs, and optimised metadata that help the site rank for relevant search queries.
03
Data Instrumented
Google Analytics, Microsoft Clarity, and Sentry give real-time insight into user behaviour and errors.
04
Security-first
CSP headers, HSTS, X-Frame-Options, and zero external runtime scripts — built safe from day one.

Uncle John

A food safety app built without writing a single line of code

In Development

Summary

Uncle John is a cross-platform iOS and Android app that helps everyday people make safer food choices. Users photograph any ingredient label and the app instantly delivers a colour-coded health risk report — green, yellow, or red — based on a database of 529 ingredients. The app uses warm, non-clinical language in the voice of a caring uncle who wants you to eat better. The core thesis behind Uncle John is that a product manager, with no coding knowledge, can ship a real, working mobile app by using AI as the primary development tool.

Tools Used

Claude AI Flutter Google ML Kit (OCR) GitHub JSON Ingredient DB

Development Process

01 Concept Claude — Problem definition, feature scoping, V1 lock
02 Tech Stack Claude — Flutter chosen for iOS + Android from one codebase
03 OCR Engine Google ML Kit — on-device text recognition, no API cost
04 Analysis Rule-based engine — 529-ingredient JSON database
05 Build Claude — All 11 core Flutter files generated via AI

Uncle John started as a product brief I wrote with Claude's help — defining the problem, the user, the feature set, and the boundaries of V1. V1 features are deliberately locked: scan, analyse, report. Scan history, barcode scanning, user accounts, and AI analysis are explicitly deferred to future versions. That discipline is the product management at work.

The tech stack decision was a real product decision: Flutter was chosen because one codebase ships to both iOS and Android, reducing complexity for a solo non-developer builder. Google ML Kit handles all OCR on-device — meaning no internet required for scanning, no API costs, and no privacy risk. The ingredient analysis is rule-based, not AI, keeping it fast and predictable for V1.

All 11 core code files were written by Claude based on my product specifications. I described the behaviour, Claude wrote the code. I reviewed, tested, and iterated — just as I would manage any engineering team, except the team is an AI model.

Outcome

01
Cross-Platform App
One codebase. Two platforms. iOS and Android — built without a single line of manually written code.
02
Zero Code Knowledge
Proof that a PM who thinks clearly and prompts precisely can ship a mobile app — no developer needed.
03
Privacy by Design
All scanning and analysis happens on-device. No user data leaves the phone. No AI API calls at runtime.
04
Real User Value
529 ingredients checked instantly. Colour-coded results. Plain language. Because Uncle John cares about what you eat.