Back to home

How I Built an AI Fitness Coach App Using n8n + Claude + Next.js

February 2026

The Idea

What if you could take an automation workflow and turn it into a real, polished web app — complete with authentication, gamification, animations, and responsive design?

That's exactly what I did. I took a simple 5-node n8n workflow (a webhook connected to an AI agent) and turned it into a full-stack AI Fitness Coach app with a chat interface, a leveling system, daily streaks, 12 unlockable badges, animated celebrations, and mobile-first UX.

The Stack

Backend (n8n workflow on Railway)

  • Webhook node — receives POST requests from the frontend
  • LangChain AI Agent — powered by Claude 3.5 Haiku via the Anthropic API
  • Response nodes — structured JSON back to the frontend
  • Error handling path — graceful fallback when the AI fails

Frontend (Next.js on Vercel)

  • Next.js 16 (App Router) + React 19
  • Tailwind CSS 4 + shadcn/ui component library
  • Supabase for authentication + user profiles + badge storage
  • Motion.dev (Framer Motion v12) for animations
  • Fully responsive — mobile-first with bottom sheets, FABs, and safe-area handling

AI-Powered Development

  • Claude Code (CLI agent) — wrote ~95% of the code through conversational development
  • n8n MCP Server — inspected, modified, and validated the workflow directly from the IDE
  • Custom Skills — n8n expression syntax, node configuration, workflow patterns, frontend design
  • GitHub MCP — repo creation and code pushes without leaving the terminal

The Features

AI Chat Interface

The core experience: a real-time chat with your AI fitness coach. You type a question about workouts, nutrition, recovery, or general fitness — and Claude 3.5 Haiku responds with personalized guidance. The AI has guardrails: it won't diagnose injuries, prescribe medication, or replace a medical professional. Behind the scenes: messages flow from the frontend to n8n webhook to LangChain AI Agent to formatted JSON response and back to the UI. There's a 30-second timeout with AbortController, client-side rate limiting (10 requests per minute), and a 2,000-character message limit.

Gamification System (V2)

Every message you send earns progress toward the next level. There are 6 Levels (Beginner to Champion), 12 Badges across 4 categories (Milestone, Volume, Consistency, Exploration), Daily Streaks that track consecutive active days, Streak Freezes you earn every 7 days, an XP Multiplier (1.5x at 7-day streak, 2x at 30-day), and Celebration Toasts — animated spring-physics toasts that pop up when you level up, earn a badge, or hit a streak milestone.

Suggestion Cards

New users see 4 clickable cards instead of a blank chat: Workout Plan, Nutrition Tips, Health & Recovery, Getting Started. One tap sends a pre-written question and the conversation begins. Reduces the "what do I even ask?" friction to zero.

Usage Tracker

A stats panel showing days as a member, total active days, and a consistency percentage. Simple, motivating, always visible.

Animations & Polish

Every interaction is animated: messages fade-slide in, progress rings spring-animate, level badges pop on change, celebration toasts bounce with spring physics, and suggestion cards enter with staggered delays. All powered by Motion.dev's LazyMotion (~4.6KB gzipped) — lightweight enough to not hurt performance.

Text-to-Speech

A TTS button on each AI message lets you listen to the coach's response. Uses the browser's native Web Speech API — zero cost, decent quality, and prioritizes natural-sounding voices.

Authentication

Full signup/login flow with Supabase: email + password, email verification, protected routes via middleware, and graceful "demo mode" when Supabase isn't configured.

The Tools That Made It Possible

Claude Code (The Developer)

This was the real star. Claude Code — Anthropic's CLI agent — wrote virtually all of the code through back-and-forth conversation. I'd describe a feature, it would explore the codebase, write a plan, and implement it across multiple files.

n8n MCP Server (The Backend Bridge)

The n8n MCP server let Claude Code directly inspect and modify the n8n workflow from inside the IDE. No switching tabs. No copy-pasting node configs. A massive time-saver.

Custom Skills (Domain Expertise)

Specialized skills for n8n expression syntax, node configuration patterns, workflow architecture, and frontend design gave Claude Code deep knowledge of n8n's quirks.

GitHub MCP (Deployment Pipeline)

Repo creation, file pushes, and branch management — all from the conversation. No context-switching to the browser.

The Problems (And How We Solved Them)

The Mobile Scroll Nightmare

Problem: On mobile, the chat messages wouldn't scroll. The page just grew infinitely.

Fix: Replaced h-screen with h-dvh, added min-h-0 on every flex child in the scroll chain, and set overflow-hidden on the ScrollArea root.

Tailwind v4 Specificity Gotcha

Problem: overflow: hidden on html, body wasn't working — the page still scrolled on mobile.

Fix: Moved the rule outside @layer base into the regular stylesheet. Tailwind v4's layers have lower specificity than utility classes.

Badge Schema Mismatch

Problem: Badges weren't loading from Supabase. The table used UUID IDs but badge IDs are strings like "first_message".

Fix: Changed the column type from UUID to TEXT. Always match your schema to your data model before seeding.

Stall Detection UX

Problem: AI responses sometimes take 5-15 seconds. Users thought the app was frozen.

Fix: Built a stall detection system — at 8 seconds: "Still thinking..." and at 20 seconds: "Taking longer than usual..."

What We Didn't See Coming

  • -Mobile viewport is deceptively complex — dvh vs vh vs svh, safe-area insets, browser chrome interaction. What works on desktop breaks on every phone differently.
  • -Gamification is additive — what started as "show a level number" snowballed into streaks, freezes, 12 badges, toast queues, XP multipliers, and usage analytics.
  • -Animation budget matters — Motion.dev's LazyMotion with tree-shaking was critical. A full animation library import would've added 30KB+ to the bundle.
  • -Demo mode is valuable — making Supabase optional meant faster local development and easier demos. Accidental, but a great architectural choice.

How This Scales

Short-Term

  • API Route Proxy — move the webhook URL server-side for security
  • Conversation Memory — n8n's Window Buffer Memory node for context
  • Dark/Light Theme Toggle

Medium-Term

  • Workout Plan Generator with interactive cards
  • Progress Photos & Body Metrics dashboard
  • Push Notifications for streak reminders
  • Multi-Language Support

Long-Term

  • Voice Mode for hands-free gym coaching
  • Wearable Integration (Apple Health / Google Fit)
  • Community Features — leaderboards, shared badges, challenges
  • Multiple AI Coaches with different specializations
  • White-Label Template for any n8n-to-app conversion

The Takeaway

This project proved something powerful: you can go from an automation workflow to a production web app in days, not months. The combination of n8n for backend orchestration, Claude for AI intelligence, Supabase for persistence, and Claude Code for development created a pipeline where ideas become features almost as fast as you can describe them.

The AI Fitness Coach isn't just an app — it's a proof of concept for a new way to build software. Take a workflow. Give it a face. Ship it.

Built with Claude Code, n8n, Next.js, Supabase, and a lot of late-night debugging of CSS flexbox.