Building a Personal Fitness Tracker — Next.js, Supabase, and Vercel

A few months ago I decided to be more serious about fitness. Not being an athlete or bodybuilder — just exercising regularly so that your body doesn't get tired quickly from sitting in front of a laptop for a long time. The problem is, the fitness tracker applications on the market seem to be overkill. Some are monthly, some are full of advertisements, some have too complex features to just say "today push ups 3 sets of 12 reps".

Finally the idea emerged: why not make your own? As a developer, making your own tools feels more... meaningful. Plus, you can learn new technology as you go. So this project was born — a personal fitness tracker built with Next.js, Supabase, and deployed to Vercel.

The repo is open-source at github.com/adammuizweb/fitness. I also deployed it on fitness.adammuiz.com for my own use.

Main Features

This application is designed to be simple but functional. The focus is not on being a replacement for Strava or MyFitnessPal — more on a daily log that is light, fast, and doesn't require much thinking.

Technical Stack

Why choose this stack? Next.js provides complete flexibility — from static landing pages to fully interactive dashboards. Supabase eliminates the need for your own backend server: PostgreSQL as the database, built-in auth, and RLS for security. Vercel just connects to GitHub, deploys automatically every time you push to main.

The Story Behind the Scenes

On the surface, this app seems simple. But there were some pretty exciting technical challenges during development.

1. Storing Multiple ID Logs in One Post

The share post feature initially only supported one workout log per post — using the workout_log_id foreign key in the posts table. Over time, I want to be able to share all today's activities, including custom activities.

Ideal solution: post_logs pivot table or array column with foreign keys. But there was a problem — the direct PostgreSQL connection to Supabase couldn't be accessed (IPv6 only, no password). Only REST API via service role key is available.

2. Custom Activity As Hidden Workout

Custom activities need to be entered into the workout_logs table to be included in the trigger streak. But workout_logs has the constraint UNIQUE(user_id, workout_id, logged_date) — meaning it can only log one workout per day.

The solution: each custom activity creates a hidden workout (is_active=false) with the same name as the activity. So if the user inputs "Morning Stretching", the system automatically creates a "Morning Stretching" workout which doesn't appear in the regular exercise list. The getOrCreateWorkout() function looks for a workout with that name — if it doesn't exist, create a new one.

3. Streak Trigger Function

Streaks are managed by PostgreSQL triggers that fire every time there is a new row in workout_logs. Trigger function update_streak() checks last_activity_date — if yesterday, streak +1; if more than a day, reset to 1.

There is one corner case: the frontend needs to display 0 streaks if the user misses a day, but the trigger function only runs on INSERT. So the frontend has additional logic — if last_activity_date is neither today nor yesterday, the streak is considered 0. Accurate without needing a cron job or scheduler.

4. CDN Upload — From Cell Phone to Home Server

The photo upload feature requires client-side compression (to save bandwidth on Vercel), a Next.js API endpoint that forwards to the home server, and a PHP handler on the home server that validates + saves the file. The flow:

Hape → Kompresi WebP (max 1200px, target ≤300KB)
     → Next.js API Route (/api/upload)
         → Forward ke cdn.jyavani.com/upload.php
             → Simpan ke uploads/media/img/fitness/
             → Balikin URL
         → Catat ke tabel upload_logs (rate limit 2MB/hari)
     → URL masuk ke photos[]

Application View

Here are some screenshots of the running application:

What to Learn

This project taught me a lot:

• Next.js App Router — server components, client components, route groups, API routes, middleware for auth protection
• Supabase SSR — setup cookies for server-side sessions, Row Level Security, service role for admin operations
• PostgreSQL Triggers — plpgsql function for streak automation, auto-create profile during registration
• Creative problem solving — getting around database access limitations with meta markers in existing arrays
• CDN pipeline — from image compression in the browser, upload via API, to serving from the home server via Cloudflare Tunnel
• PWA — service worker with @serwist/next, manifest.json, offline support

Closing

Building your own fitness tracker is one of the most personally rewarding projects. Not only do you get the application that suits your needs, but you also learn a lot of new technology in the process. Sometimes the best solution doesn't come from buying expensive products, but from making your own — while learning something new.

Open source code on GitHub. If you have input, feature ideas, or find bugs, please open an issue or pull request. The app can also be accessed at fitness.adammuiz.com — but keep in mind this is a personal project, so registration may be limited.

Have fun exercising! 💪