Pulse — Case Study

01 — THE CHALLENGE

Prove product design, frontend craft and AI integration in a single portfolio piece — no frameworks, no libraries, shipped in a few-day sprint. One state-driven vanilla app that an AI populates end to end, polished enough to send to recruiters and attach to proposals.

02 — KEY FEATURES

AI Onboarding

Claude generates a personalized 7-day training plan from a five-question conversation, then auto-populates the entire app.

Live Dashboard

Animated activity ring, sleep, calories, streak and a weekly chart — every visual drawn with the Canvas API.

Workout Tracker

Interactive set tracker with a Canvas rest timer and an end-of-set audio cue via the Web Audio API.

Progress Camera

In-app camera with a branded stats overlay, composited on Canvas at native resolution and ready to download or share.

03 — SCREEN GALLERY

Onboarding chat — 01Onboarding · AI chat

Workout set tracker — 03Workout · set tracker

07Profile

04 — BUILD PROCESS

Step 01

AI-first Architecture

Designed the data schema around Claude's JSON output — onboarding answers flow directly into the state that drives every screen.

Step 02

Canvas as UI Engine

Activity rings, charts and the rest timer are drawn programmatically. No SVG libraries, no chart packages — just the Canvas API.

Step 03

Ship & Iterate

CI/CD via Vercel with every push. Lighthouse score optimised, zero dependencies, sub-second load on 4G.

05 — TECH STACK

Frontend

HTML · CSS · Vanilla JS
Canvas API · Web Audio API

AI Layer

Anthropic Claude API
Structured JSON prompts

Infra

Vercel Deploy
CI/CD pipeline

Tools

Antigravity IDE
Claude as CD / Reviewer

06 — RESULTS

8

Screens implemented

0

Frameworks & libraries

5

Day build sprint

1

AI API integrated