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.
Prerequisites
- 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
Create the fitness Data Types
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.
Build the exercise library
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.
Create the workout builder
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.
Build the workout logging interface
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.
Display workout history and progress charts
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 working example
1FITNESS APP — WORKFLOW SUMMARY2=================================34DATA TYPES:5 Exercise: name, muscle_group, category, description, image6 Workout: name, exercises (list), creator (User), is_template7 WorkoutLog: workout, user, date, duration_minutes, notes8 SetLog: workout_log, exercise, set_number, reps, weight910EXERCISE LIBRARY:11 Repeating Group with search + category filter12 Detail popup with description and video1314WORKOUT BUILDER:15 Search exercises → add to ordered list16 Set target sets/reps per exercise17 Save as Workout template1819WORKOUT LOGGING:20 Load Workout template → display exercises21 Input reps + weight per set22 Complete → Create WorkoutLog + SetLogs2324PROGRESS CHARTS:25 Select exercise → line chart26 Data: SetLogs filtered by exercise + user27 X-axis: date, Y-axis: weight or repsCommon mistakes when building a Fitness App in Bubble
Why it's a problem: Storing all set data in a single text field instead of separate SetLog records
How to avoid: Create individual SetLog records for each set, linked to the WorkoutLog and Exercise
Why it's a problem: Not preloading the exercise library with common exercises
How to avoid: Populate 20-30 common exercises across categories before launching
Why it's a problem: Building complex progress charts with client-side calculations
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a workout tracking app in Bubble.io where users create custom workouts from an exercise library, log sets/reps/weight, and see progress charts over time. What Data Types and pages do I need?
Build a fitness app with an exercise library, workout builder, and workout logger. Create data types for exercises, workouts, workout logs, and set logs. Add a progress chart showing weight lifted over time for each exercise.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation