# How to Build a Fitness App in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 30-35 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

A fitness app in Bubble uses Data Types for exercises, workouts, and workout logs. You build an exercise library with categories and muscle groups, a workout builder that lets users create custom routines, a logging interface for sets and reps during workouts, and a history view with progress charts. This tutorial covers the full fitness app from exercise database to progress visualization.

## Overview: Building a Fitness App in Bubble

This tutorial guides you through creating a workout planning and tracking application. You will build an exercise database, a custom workout creator, a workout logging interface, and progress tracking with visual charts.

## Before you start

- A Bubble app with user authentication
- Understanding of nested Data Types and Repeating Groups
- Chart plugin installed for progress visualization (optional)

## Step-by-step guide

### 1. Create the fitness Data Types

In the Data tab, create 'Exercise' with: 'name' (text), 'muscle_group' (text), 'category' (text — strength, cardio, flexibility), 'description' (text), 'image' (image), 'video_url' (text). Create 'Workout' with: 'name' (text), 'exercises' (list of Exercises), 'creator' (User), 'is_template' (yes/no). Create 'WorkoutLog' with: 'workout' (Workout), 'user' (User), 'date' (date), 'duration_minutes' (number), 'notes' (text). Create 'SetLog' with: 'workout_log' (WorkoutLog), 'exercise' (Exercise), 'set_number' (number), 'reps' (number), 'weight' (number).

**Expected result:** Data Types exist for exercises, workout templates, workout logs, and individual set tracking.

### 2. Build the exercise library

Create an 'exercises' page with a search bar and category filter buttons (Strength, Cardio, Flexibility). Below, add a Repeating Group of Exercises with image, name, and muscle group in each cell. Clicking an exercise opens a detail popup with description, video embed, and an 'Add to Workout' button. Populate the exercise database with 20-30 common exercises across categories — or let users add custom exercises.

**Expected result:** An exercise library page with search, category filters, and detailed exercise information.

### 3. Create the workout builder

Create a 'create-workout' page. Add a text input for workout name. Below, add a section where users search and add exercises from the library. Display added exercises in an ordered Repeating Group. For each exercise, let users set target sets and reps. Add a 'Save Workout' button that creates a Workout record with the exercise list and creator = Current User. Users can create multiple workouts as templates.

> Pro tip: Store the exercise order using the list order in Bubble — items maintain their position in the list field. Use 'add' and 'remove' list operations for management.

**Expected result:** Users can build custom workout routines by selecting exercises, setting targets, and saving as reusable templates.

### 4. Build the workout logging interface

Create a 'log-workout' page that loads a Workout template. Display each exercise from the workout in a section. Under each exercise, show rows for each set (numbered 1, 2, 3...) with number inputs for reps and weight. Add a '+' button to add additional sets. When the user finishes, click 'Complete Workout'. The workflow creates a WorkoutLog and a SetLog for each set entered, storing exercise, set number, reps, and weight.

**Expected result:** Users can log their actual sets, reps, and weights for each exercise during a workout session.

### 5. Display workout history and progress charts

Create a 'history' page with a Repeating Group of WorkoutLogs sorted by date descending. Each row shows the workout name, date, duration, and a summary of exercises. For progress visualization, use a chart plugin (like Chart.js Plugin). Create a page or section where users select an exercise and see a line chart of their weight or reps over time, sourced from SetLogs filtered by exercise and user, sorted by date.

**Expected result:** Users can view their workout history and see visual progress charts showing strength gains over time.

## Complete code example

File: `Workflow summary`

```text
FITNESS APP — WORKFLOW SUMMARY
=================================

DATA TYPES:
  Exercise: name, muscle_group, category, description, image
  Workout: name, exercises (list), creator (User), is_template
  WorkoutLog: workout, user, date, duration_minutes, notes
  SetLog: workout_log, exercise, set_number, reps, weight

EXERCISE LIBRARY:
  Repeating Group with search + category filter
  Detail popup with description and video

WORKOUT BUILDER:
  Search exercises → add to ordered list
  Set target sets/reps per exercise
  Save as Workout template

WORKOUT LOGGING:
  Load Workout template → display exercises
  Input reps + weight per set
  Complete → Create WorkoutLog + SetLogs

PROGRESS CHARTS:
  Select exercise → line chart
  Data: SetLogs filtered by exercise + user
  X-axis: date, Y-axis: weight or reps
```

## Common mistakes

- **Storing all set data in a single text field instead of separate SetLog records** — A single text field cannot be queried, charted, or analyzed — you lose all data analysis capabilities Fix: Create individual SetLog records for each set, linked to the WorkoutLog and Exercise
- **Not preloading the exercise library with common exercises** — An empty exercise library gives new users nothing to work with and makes the app feel incomplete Fix: Populate 20-30 common exercises across categories before launching
- **Building complex progress charts with client-side calculations** — Calculating averages and trends on the client side is slow and consumes excessive WUs Fix: Use search aggregations (group by date, average weight) and feed the results to a chart plugin

## Best practices

- Pre-populate an exercise library with 20-30 common exercises
- Use separate SetLog records for granular tracking and analytics
- Let users create custom exercises in addition to the pre-built library
- Show the previous workout's numbers as reference when logging a new session
- Use charts for visual progress to increase user motivation and retention
- Add rest timers between sets using a countdown state
- Implement streaks and weekly goals for gamification

## Frequently asked questions

### Can I add exercise videos to the library?

Yes. Store YouTube or hosted video URLs in the 'video_url' field. Display them using a Video element or HTML iframe on the exercise detail page.

### How do I handle cardio exercises that track distance and time instead of sets and reps?

Add optional fields to SetLog: 'distance' (number) and 'duration' (number). For cardio exercises, hide the reps/weight inputs and show distance/duration instead.

### Can users share workouts with friends?

Yes. Add a 'shared_with' list field or make workouts publicly discoverable. Create a 'Community Workouts' page showing popular templates.

### How do I calculate one-rep max estimates?

Use the Epley formula: weight * (1 + reps/30). Calculate this dynamically in a text element using Bubble's math operators on the SetLog data.

### Can RapidDev build a complete fitness platform in Bubble?

Yes. RapidDev can build fitness platforms with workout planning, tracking, social features, meal planning integration, and coach-client management.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/build-a-fitness-app-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/build-a-fitness-app-in-bubble