Workout Logger
A full-stack workout logging application with cloud storage (Supabase/Postgres) and optional native mobile builds (Capacitor).
Tech Stack
- Frontend: React 18 + TypeScript + Vite
- Backend: Node.js + Express + TypeScript
- Database: PostgreSQL via Supabase
- Auth: Supabase Auth (JWT verified server-side on all API routes)
- Native: Capacitor (iOS/Android) with local SQLite for offline use
Prerequisites
- Node.js 18 or later
- npm 9 or later
- A Supabase project (free tier works fine)
Getting Started
1. Clone and install
git clone https://github.com/your-username/workout-logger.git
cd workout-logger
npm install
This installs dependencies for both the client and server workspaces via npm workspaces.
2. Set up environment variables
Copy the root env example and fill in your Supabase credentials:
cp .env.example .env
Edit .env:
DATABASE_URL=postgresql://postgres:[password]@db.[project-ref].supabase.co:5432/postgres
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_ANON_KEY=your-anon-key
PORT=3001
CLIENT_ORIGIN=http://localhost:5173
Copy the client env example:
cp client/.env.example client/.env
Edit client/.env:
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key
VITE_API_URL=http://localhost:3001
3. Run database migrations
Apply the schema to your Supabase Postgres database:
cd server && npm run migrate
This runs all SQL files in server/src/db/migrations/ in order, tracking applied migrations in a schema_migrations table.
4. Run the development servers
Start both the backend and frontend together:
npm run dev
Or run them separately:
npm run server # Express API on http://localhost:3001
npm run client # Vite dev server on http://localhost:5173
Supabase Setup
Enable Email Auth
In your Supabase dashboard: Authentication > Providers > Email — ensure it is enabled. For local development you may want to disable email confirmation under Authentication > Settings.
Row Level Security
RLS policies are defined in supabase/migrations/. Run these in the Supabase SQL Editor if you want RLS enforced at the database level (optional — the Express API enforces user scoping via JWT on every query).
Project Structure
workout-logger/
├── package.json # Workspace root — runs both client and server
├── .env.example # Server environment variables template
│
├── server/
│ ├── package.json
│ ├── tsconfig.json
│ └── src/
│ ├── index.ts # Express app entry point + global error handler
│ ├── db/
│ │ ├── postgres.ts # Pool init and connection
│ │ ├── migrate.ts # Migration runner (npm run migrate)
│ │ └── migrations/
│ │ ├── 001_initial_schema.sql
│ │ ├── 002_seed_exercises.sql
│ │ ├── 003_templates.sql
│ │ └── 004_workout_exercise_metadata.sql
│ ├── middleware/
│ │ ├── auth.ts # JWT verification via Supabase, attaches req.userId
│ │ └── asyncHandler.ts # Wraps async handlers, forwards errors to Express
│ └── routes/
│ ├── workouts.ts # CRUD for workouts, workout_exercises, and metadata
│ ├── exercises.ts # CRUD for exercises
│ ├── sets.ts # CRUD for sets
│ └── templates.ts # Workout templates (save, apply, delete)
│
├── client/
│ ├── package.json
│ ├── capacitor.config.ts # Capacitor native build config
│ ├── tsconfig.json
│ ├── vite.config.ts
│ ├── index.html
│ ├── .env.example
│ └── src/
│ ├── main.tsx
│ ├── App.tsx # Router, auth state, UnitsProvider
│ ├── index.css # Global dark theme styles
│ ├── lib/
│ │ ├── api.ts # API layer — Supabase direct (web) or SQLite (native)
│ │ ├── auth.ts # Supabase auth helpers
│ │ ├── supabase.ts # Supabase client instance
│ │ ├── sqlite.ts # Capacitor SQLite init (native only)
│ │ ├── migrations.ts # Native SQLite migration runner
│ │ ├── sync.ts # Supabase sync helpers (native only)
│ │ └── audio.ts # Web Audio API tone generator for tempo timer
│ ├── hooks/
│ │ ├── useTempoTimer.ts # Tempo phase cycling and countdown logic
│ │ ├── useDialog.ts # Promise-based in-app confirm/prompt dialogs
│ │ └── useNetwork.ts # Online/offline detection
│ ├── contexts/
│ │ └── UnitsContext.tsx # Metric/imperial preference (localStorage)
│ ├── components/
│ │ ├── Nav.tsx # Top navigation bar
│ │ ├── Dialog.tsx # In-app modal (replaces window.confirm/prompt)
│ │ ├── ExercisePicker.tsx
│ │ ├── TemplatePicker.tsx
│ │ ├── SetRow.tsx # Inline editable set row
│ │ └── OfflineBanner.tsx
│ └── pages/
│ ├── Login.tsx
│ ├── Dashboard.tsx # Overview, recent workouts, stats
│ ├── WorkoutHistory.tsx # Full workout list
│ ├── NewWorkout.tsx # Create a new workout session
│ ├── WorkoutDetail.tsx # Log exercises, sets, and tempo timer
│ ├── ExerciseLibrary.tsx # Browse and create custom exercises
│ ├── Templates.tsx # Workout templates
│ ├── Charts.tsx # Historical progress charts
│ └── Settings.tsx # Metric/imperial toggle
│
└── supabase/
└── migrations/ # Postgres schema + RLS policies (for Supabase SQL Editor)
API Endpoints
All endpoints (except /api/health) require a Authorization: Bearer <token> header. Requests are scoped to the authenticated user — no user can access another user's data.
| Method | Path | Description |
|---|
| GET | /api/health | Health check |
| GET | /api/workouts | List workouts for the authenticated user |
| GET | /api/workouts/:id | Get workout with exercises and sets |
| POST | /api/workouts | Create a new workout |
| PUT | /api/workouts/:id | Update a workout |
| DELETE | /api/workouts/:id | Delete a workout |
| POST | /api/workouts/:id/exercises | Add an exercise to a workout |
| DELETE | /api/workouts/exercises/:weId | Remove an exercise from a workout |
| PATCH | /api/workouts/exercises/:weId/metadata | Update exercise metadata (e.g. tempo) |
| GET | /api/exercises | List global + user's custom exercises |
| POST | /api/exercises | Create a custom exercise |
| PUT | /api/exercises/:id | Update a custom exercise |
| DELETE | /api/exercises/:id | Delete a custom exercise |
| GET | /api/sets?workout_exercise_id= | List sets for a workout exercise |
| POST | /api/sets | Log a new set |
| PUT | /api/sets/:id | Update a set |
| DELETE | /api/sets/:id | Delete a set |
| GET | /api/templates | List workout templates |
| POST | /api/templates/from-workout/:workoutId | Save a workout as a template |
| POST | /api/templates/:id/apply | Create a workout from a template |
| DELETE | /api/templates/:id |
Features
- Exercise library: 30+ built-in global exercises across muscle groups. Add custom exercises.
- Set logging: Track weight, reps, rest time, and RPE per set. Values auto-save on blur.
- Tempo timer: Per-exercise eccentric/pause/concentric/pause timer with distinct audio tones per phase. Tempo persists to the database.
- Workout templates: Save any workout as a reusable template and apply it to create a new session.
- Historical charts: Visualize progress over time per exercise.
- Metric / imperial: Toggle weight units in Settings; preference persists in localStorage.
- Auth: Email/password authentication via Supabase Auth.
- Native mobile: Capacitor builds for iOS and Android with local SQLite storage.
Native Mobile Build (Capacitor)
cd client
npm run build
npx cap sync
npx cap open ios # or android
On native, the app uses a local SQLite database instead of the Express API. Migrations run automatically on first launch.
Building for Production
npm run build
This compiles the server TypeScript to server/dist/ and builds the client to client/dist/.
To run the compiled server:
cd server && node dist/index.js
