Mishal Ibrar
000
Back to work
Web2025Full Stack Developer

(05) — case study

ApexGym

Modern Fitness Coaching Platform

A modern fitness platform that enables personal trainers to manage their entire coaching business from one unified ecosystem. It combines a Next.js web dashboard with React Native mobile apps, streamlining workout programming, client progress tracking, and referral onboarding.

Exercise assets
7,000+Exercise assets
Dedicated portal roles
2Dedicated portal roles
Cross-platform sync
100%Cross-platform sync
ApexGym — Modern Fitness Coaching Platform
Next.jsReactReact NativeExpoTypeScriptFirebaseCloud Firestore

(01) — the build

Overview

ApexGym is a modern fitness platform built for personal trainers and fitness businesses to manage clients, create personalized workout programs, monitor progress, and deliver a seamless coaching experience across web and mobile.

The platform combines a responsive web application with a cross-platform React Native mobile app, allowing trainers to manage their business while enabling trainees to follow structured fitness plans, track performance, and stay engaged throughout their fitness journey.

The Problem

Traditional coaching often depends on spreadsheets, messaging apps, and manual tracking. Trainers struggle to manage multiple clients efficiently, while trainees lack a centralized place to access workouts, nutrition plans, and progress.

The objective was to build a unified platform that simplifies coaching, automates daily workflows, and creates a better experience for both trainers and trainees.

The Solution

I developed a complete fitness ecosystem consisting of a Next.js web platform and a React Native mobile application powered by Firebase.

The platform enables trainers to create structured coaching programs, assign plans, monitor progress, and communicate with clients, while trainees receive personalized workouts, meal plans, supplement schedules, and performance insights from a single application.

My Contributions

  • Developed the responsive Next.js marketing website and dashboard.
  • Built the React Native mobile application for iOS and Android.
  • Designed and implemented the complete UI/UX using a custom Neobrutalist design system.
  • Integrated Firebase Authentication and Cloud Firestore.
  • Developed role-based authentication and navigation.
  • Built trainer and trainee onboarding workflows.
  • Implemented workout plan creation and assignment.
  • Developed progress tracking and fitness analytics.
  • Created reusable UI components and scalable architecture.
  • Optimized application performance and user experience.

Key Features

Trainer Experience

  • Professional onboarding workflow
  • Client management dashboard
  • Workout program builder
  • Nutrition & supplement planning
  • Referral-based trainee onboarding
  • Progress monitoring
  • Client analytics
  • Workout assignment
  • Business management tools

Trainee Experience

  • Personalized onboarding
  • Workout tracking
  • Nutrition plans
  • Progress dashboard
  • Streak tracking
  • Exercise demonstrations
  • Trainer connection
  • Performance analytics
  • Goal management

Shared Features

  • Secure authentication
  • Cross-platform synchronization
  • Responsive web dashboard
  • Modern onboarding experience
  • Profile management
  • Firebase-powered backend

Technical Highlights

  • Cross-platform development across Web, Android, and iOS.
  • Offline library containing 7,000+ exercise assets.
  • Role-based architecture for Trainers and Trainees.
  • Firebase Authentication and Cloud Firestore backend.
  • Custom Neobrutalist design system with lime & black branding.

Technology Stack

  • Frontend: Next.js, React, React Native, Expo, TypeScript
  • Backend: Firebase Authentication, Cloud Firestore, REST APIs
  • Tools: Expo Router, AsyncStorage, Git & GitHub

Results

  • Complete fitness ecosystem across Web and Mobile.
  • Dedicated Trainer and Trainee experiences.
  • Responsive management dashboard.
  • Production-ready React Native application.
  • Offline exercise library with 7,000+ assets.
  • Scalable Firebase architecture ready for AI-powered features.

What’s Next

Planned AI features include intelligent workout generation, AI nutrition planning, trainer copilot, personalized progress insights, and smart coaching recommendations.

Technologies

Next.js • React • React Native • Expo • TypeScript • Firebase • Cloud Firestore • REST API • Responsive Web

Industry
Health & Fitness SaaS
Platforms
Web (Next.js) + React Native (iOS & Android)
Role
Full Stack Developer
Duration
2025–Present
Updated
August 2026

Screen patterns

  • Trainer Onboarding
  • Workout Creator
  • Client Dashboard
  • Nutritional Planner

User flows

  • Onboarding Journey
  • Workout Scheduling
  • Performance Analytics

Key UI elements

  • Exercise Demo Library
  • Streak Tracker
  • Role-Based Router
  • Firebase Sync State

Stack

  • Next.js
  • React
  • React Native
  • Expo
  • TypeScript
  • Firebase
  • Cloud Firestore

Elsewhere