I Built a Real-Time Posture Coach That Runs Entirely in Your Browser

Three weeks of remote work. Two monitors. One increasingly angry lower back.

I started Googling posture apps and immediately hit the same wall every time: they want you to install something, create an account, or — worst of all — upload your webcam feed to their servers. I don't want my camera data on someone else's machine. I don't want a subscription for what is, fundamentally, a "sit up straight" reminder.

So I built my own. In one night.

The Core Insight

Most posture tracking products are solving the wrong problem. They're asking: How do we analyze your posture? I asked: How do we do it without ever touching your camera data?

The answer was already in the browser. Google's MediaPipe Pose library runs a full 33-point body landmark model entirely client-side, in WebAssembly. No server. No data egress. You can get shoulder coordinates, head angle, and spine curvature from a live webcam feed in real time — all inside a <canvas> element.

Once I realized the hard part was solved, the rest was just building a good product around it.

What It Actually Does

Posture Coach uses MediaPipe's pose estimation to track a handful of key landmarks every second while you work:

• Shoulder symmetry (are they leveled, or is one hunching forward?)
• Head-to-shoulder offset (how far is your head drifting forward?)
• Ear-to-shoulder vertical alignment

From those three signals, it computes a 0–100 posture score every minute, fires a browser alert if you've been slouching for 3+ consecutive minutes, and builds a daily timeline so you can see exactly when your back gives up (spoiler: post-lunch, every time).

The streak mechanic turned out to be the killer feature. Once you've got a 4-day streak, you really don't want to blow it by slouching at 1pm.

Key Technical Decisions

MediaPipe via CDN, not npm. The npm package for MediaPipe Pose is 40MB and has quirky build behavior with Next.js's bundler. I load it via script tag from the Google CDN in useEffect, then initialize the pose model lazily when the user clicks "Start." Keeps the bundle lean and avoids SSR nightmares.

useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose.js';
  script.onload = () => initPoseModel();
  document.head.appendChild(script);
}, []);

Score smoothing with a rolling average. Raw pose landmarks are jittery — a single frame where you turn your head to sneeze shouldn't tank your score. I keep a 30-frame rolling buffer and only compute the official minute-score from the smoothed average. Feels way more fair.

localStorage for everything. No backend, no auth, no database. Session data, streak count, historical scores — all in localStorage. The app is stateless from a server perspective. This also means the demo data is pre-seeded on first load, so new users see a live-looking dashboard instead of an empty screen.

What Surprised Me

How good the MediaPipe model is at a distance. I expected it to need you centered and close to the camera — it works fine at normal desk distance, even with bad lighting. The 33 landmark points are stable enough to build reliable heuristics on.

Also: the notification timing matters a lot. Too aggressive and it's annoying. Too passive and it's useless. 3 minutes of continuous bad posture before alerting felt right — it's long enough that you know it's real, short enough that you haven't already done damage.

What I'd Do Next

• Calibration session. Let users do a 30-second "good posture" recording that sets their personal baseline. Right now I'm using hardcoded thresholds.
• Hourly reports. Push a notification at the end of each hour with your score for that block.
• Export. A weekly PDF with your scores, trend line, and worst hours — something you could actually show a physio.
• Sound cues. Optional gentle audio when you start slouching — some people respond to audio more than visual alerts.