FixMyCoffee
I'm a big coffee and espresso fan. Home espresso is a hobby with a real learning curve. Tiny parameter changes in dose, grind or brew time can completely change what's in the cup. FixMyCoffee started as a way to scratch that itch: an AI barista assistant that listens to your shot parameters, analyzes what went wrong and tells you exactly how to adjust. It was also my first attempt at building a complete full-stack web application from the ground up.
The FixMyCoffee landing page
The AI Barista Agent
The core of the app is a shot-logging flow where users enter their espresso parameters: dose, yield, brew time and a taste balance between sour and bitter. The agent then uses GPT-4o-mini to generate concise, specific feedback, paired with an automatic star rating calculated from target extraction ratios. The result is delivered with a typewriter animation to keep the experience a little playful.
Step 1: log your shot
Step 2: AI feedback
How it works
Log your shot parameters → select your flavor notes → the AI agent analyzes the extraction and gives you direct, actionable advice in under two sentences.
Blog & Content System
Alongside the AI tool, I built a full blog system backed by Supabase. Articles are written in Markdown and stored in the database, with an admin editing template for managing content. The blog renderer handles a table of contents, key takeaways, related posts and SEO meta tags, all processed through a Supabase Edge Function. The original goal was to drive organic traffic through espresso-related content, though visitor numbers turned out to be modest.
What I Learned
This was my first completed full-stack project and it covered a lot of ground in a short time. From setting up Supabase with row-level security and Edge Functions, to integrating the OpenAI API, deploying on Netlify with static site generation and wiring up product analytics via PostHog.
- ✓ Full-stack development with React, TypeScript and Supabase
- ✓ Building and deploying Deno-based serverless Edge Functions
- ✓ Integrating OpenAI's API for real-time user-facing feedback
- ✓ Static site generation with Vite React SSG for SEO
- ✓ Building a content management system with a Markdown-based blog editor
- ✓ Product analytics setup and conversion tracking