ymove-exercise-browser

Filterable exercise library demo built on the ymove Exercise Video API. Open-source example you can fork, deploy, and reshape.

What's in here

• Next.js 14 (Pages Router) + Tailwind + TypeScript
• Dark UI modelled on Equinox+'s movement library (search, filter pill, photo-thumbnail rows)
• Single page (pages/index.tsx) using getServerSideProps to fetch from ymove on each request
• All API access through the official ymove-exercise-api SDK: no raw fetch calls
• Shows a clear message instead of crashing when the API key is missing

Run locally

git clone https://github.com/ymove-app/ymove-exercise-browser
cd ymove-exercise-browser
npm install
cp .env.example .env.local      # then set YMOVE_API_KEY
npm run dev

Open http://localhost:3000.

Get an API key

Get a free trial key at ymove.app/exercise-api/signup and put it in .env.local:

YMOVE_API_KEY=your_key_here

Deploy

Vercel asks for YMOVE_API_KEY during setup. The key stays on the server: it is only used in getServerSideProps.

How it works

// lib/ymove.ts
import { YMoveClient } from 'ymove-exercise-api';
export const ymove = new YMoveClient(process.env.YMOVE_API_KEY ?? '');

// pages/index.tsx
const result = await ymove.exercises.list({
  muscleGroup: 'chest',
  hasVideo: true,
  pageSize: 30,
});
// result.data: Exercise[], result.pagination: { total, page, ... }

That's it. The SDK gives you typed Exercise, MuscleGroupSlug, EquipmentSlug, Difficulty types.

Build with Claude

Add the ymove MCP server to Claude Desktop / Claude Code and Claude can scaffold extensions to this template directly:

{
  "mcpServers": {
    "ymove": {
      "command": "npx",
      "args": ["ymove-exercise-mcp"],
      "env": { "YMOVE_API_KEY": "your_key" }
    }
  }
}

Then ask Claude things like:

Add a detail page at /exercises/[slug] that fetches the exercise and embeds its primary video.

License

MIT