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

🌐
Live Platform
A professional digital presence that shows, not just tells, what AI-powered product management looks like.
🔍
Search Visible
Structured data, canonical URLs, and optimised metadata that help the site rank for relevant search queries.
📊
Data Instrumented
Google Analytics, Microsoft Clarity, and Sentry give real-time insight into user behaviour and errors.
🔒
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

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