← Back to Projects
Gains

Gains

A fast, distraction-free fitness companion for building custom training routines, logging live workouts, and tracking strength progression.

A streamlined workout tracker and routine builder designed for the gym floor. Athletes can create custom training routines, log working sets in real time without lag, and view clear charts tracking strength gains and consistency over time.

Live SiteGitHub
Next.jsReactTypeScriptTailwind CSSZustandLucide ReactFastAPIPythonSQLAlchemy

Core Problem Solved

Most fitness apps are cluttered with social feeds and slow animations, making it tedious to log sets quickly during short rest intervals. On top of that, gyms often have poor mobile signal. Gains offers an instant, distraction-free interface that works reliably even with spotty connectivity.

Why I Built This

Built out of personal need for a fast, simple workout tracker that focuses on quick data entry and clear progress charts without distracting clutter.

Features

  • •Custom Routine Builder: Build personalised workout programmes, organise exercise sequences, and pre-set targets for weights and reps.
  • •Fast Live Logging: A clean, one-tap interface to log sets, weights, and rest times between exercises without friction.
  • •Offline-Resilient Local Storage: Active sessions save to your device as you type so you never lose progress if the browser closes.
  • •Strength Analytics: Automatically calculates your estimated 1-Rep Max (1RM) progression and training volume trends.
  • •Exercise Library: Searchable catalogue of movements with personal records and historical performance stats.

Architecture

Frontend: • Next.js App Router with TypeScript for swift page transitions and responsive layouts. • Zustand provides lightweight global state management for active workout sessions without unnecessary re-renders. • Tailwind CSS for responsive styling, designed with clean dark-mode friendly contrast. • Lucide React icons for clear visual cues. Backend: • Python and FastAPI providing clean, lightweight REST endpoints. • SQLAlchemy handles user data, exercise libraries, and historical workout logs.

Database Modelling

Schema for Gains

Challenges

  • •Designing for Unreliable Gym Connectivity: Gyms frequently have dead zones and poor mobile reception. Solved this by saving active workout data to browser localStorage on every input change. The workout is only synced to the backend API once completed, ensuring users never lose data if the browser crashes or signal drops.
  • •Refining the User Experience with Figma: Learning the Next.js App Router while balancing Server vs Client components required careful planning. Designed wireframes and user flows in Figma first to validate layouts, empty states, and loading indicators before writing code.

Tradeoffs and Decisions

Chose Zustand instead of Redux Toolkit to keep client state management lightweight and free from boilerplate, making it easy for interactive workout buttons to subscribe directly to state updates without slowing down the page.

Impact

Used consistently over several months as a daily personal workout companion to track lifts, refine workout programmes, and reliably measure strength improvements.