Build a fitness app with Lovable and Median.co

Follow this guide to build a mobile fitness tracker app with Lovable and Median.co. The app displays the user’s activity data from their iOS and Android devices (steps, average heart rate, and active energy). It also supports push notifications with OneSignal and haptic feedback.

This guide includes an optional Lovable prompt you can paste as-is or adapt.

Build the Daily Health app in Lovable

Follow these steps to build a health tracker that shows today’s step count, average heart rate, and active energy.

Prompt Lovable

1. Go to lovable.dev and create an account.
2. Follow the prompts to finish account setup.
3. In Plan mode, enter a prompt or paste this one:

Build a mobile-first health app named "Daily Health".

Add email/password signup and sign-in only. Use a Supabase backend to store user profiles and daily step totals (user_id, local_date, steps). Protect Dashboard and Profile pages so only signed-in users can access them.

UI: Use a minimal, clear mobile layout with legible text, modern UI components, and a ~420px centered column. Include Dashboard and Profile tabs.

Dashboard: Show three cards only — Today's Steps, Today's Avg Heart Rate (bpm), Today's Active Energy (kcal). Under steps, include a short informative line that estimates distance from steps using one landmark (for example, "You've walked about 5 times the length of a football field today"). Add a primary button: Connect Health / Refresh.

If not running inside Median, show: "App Only: Open this page inside your Median.co app to load real health data." and keep all metrics as "—". Do not use mock health data.

Profile: Show name/email, a push notification opt-in/opt-out toggle, and a sign-out button.

Use the Median JavaScript Bridge NPM package per https://docs.median.co/docs/npm-package.
Detect the native app with:
  const isMedianApp = navigator.userAgent.indexOf('median') > -1;

Only when isMedianApp is true, on Connect Health / Refresh follow https://docs.median.co/docs/health-bridge:
  1. Call median.healthBridge.requestPermissions(["steps", "heartRate", "activeEnergy"])
  2. Call median.healthBridge.getData for those types from the start of the user's local today through now, with bucket "day"
  3. Map only today's local day into the three cards
  4. Upsert today's steps for the signed-in user in Supabase
Never call Health Bridge in the browser.

On first login in the Median app, show an informative prompt to request push notification permission. Wire the Profile toggle to opt in / opt out using Median + OneSignal consent patterns from https://docs.median.co/docs/user-consent-management.

When health data is successfully rendered after Connect Health / Refresh, trigger haptic feedback:
  median.haptics.trigger({ style: "notificationSuccess" })
See https://docs.median.co/docs/haptics

4. Review the agent’s plan, suggest any changes if needed, then approve it.
5. Lovable will build the app and shows it in a preview browser.

In the Lovable app

1. Create an account (check inbox and spam for the confirmation email).
2. Review the Dashboard and Profile pages. Prompt Lovable to adjust design or copy if needed.
3. Confirm that in a normal browser the health cards show "—" and the app-only message (no fake data).
4. Publish your Lovable app and copy the public URL.

The publish setting is in the top right of the Lovable dashboard.

Quick check: Go to the public URL in a private/incognito window. If the app loads without being logged into Lovable’s editor, you’re ready for the next phase. If it doesn’t, retry step 4 and check for any errors.

Create your app in the Median App Studio

1. Enter your Lovable URL below and click Build Now.

2. Follow the prompts to create the app.
3. Follow our Quickstart guide to set up and customize your app.

You can preview your app in the App Studio simulators to see your customizations.

Configure the JavaScript Bridge and native plugins

Enable the NPM package setting

Your Lovable app should already include the median-js-bridge NPM package from the prompt. Update the App Studio configuration so Median uses that package instead of injecting a second bridge.

1. In App Studio, head over to Web Overrides.
2. Under JavaScript Frameworks and NPM, click Enable.
3. Save your changes.

See NPM Package for details.

Enable native plugins

Go to the Native Plugins page, then add and enable these plugins:

• Health Bridge
• OneSignal
• Haptic Feedback

Then go to the Build & Deploy page and click Build all so the new plugins and NPM setting are included in the app.

Set up OneSignal push notifications

This guide uses OneSignal to send push notifications to the app. To set this up you’ll need:

• A OneSignal account (free to create)
• Your OneSignal App ID (OneSignal dashboard → Settings → Keys & IDs)
• An Apple Developer account (iOS / APNs) and/or a Google Firebase project (Android / FCM)

In Median App Studio

1. Go to Native Plugins → OneSignal and enter your OneSignal App ID.
2. Review the configuration settings and update as needed. Click the documentation chips for more information on the settings.
3. Save and rebuild the app.

Follow the OneSignal documentation to set up OneSignal, generate and upload the necessary credentials, and learn how to send a test push notification. For best results, send test push notifications while testing on a physical device.

Build and test on a device

Follow the relevant documentation below to install the mobile app on a physical device and test the native features.

• Build iOS from source
• Install Android APK
• Build Android from source

What success looks like

• You can sign up / log in inside the Median app
• Connect Health / Refresh prompts for health permissions and fills today’s cards
• Steps upsert to Supabase for the signed-in user
• Haptic feedback fires when health data renders successfully
• Push permission / Profile opt-in–opt-out behaves as configured
• In a normal browser, metrics stay "—" and Health Bridge is never called

When you’re ready for the stores, use Prepare your Lovable app for publishing.

Testing checklist

Use this checklist to confirm Daily Health is working end to end:

App creation

• You’ve created a Lovable Daily Health app
• You’ve created a Median app using your Lovable public URL

App configuration

• In App Studio, Web Overrides → JavaScript Frameworks and NPM is set to Enable
• The Lovable app imports median-js-bridge
• Health Bridge, Haptic Feedback, and OneSignal plugins are enabled
• The Median app has been rebuilt and uses the latest version
• OneSignal App ID is added in App Studio → Native Plugins → OneSignal

Mobile app testing

• You can install the mobile app on a physical device
• You can log in to the Lovable app inside the mobile app
• Health cards load real device data after Connect Health / Refresh
• The app provides haptic feedback on successful health refresh
• The app can receive push notifications (after OneSignal credentials are configured)
• Profile push opt-in / opt-out works as expected

Troubleshooting

You can learn more about the iOS tint color in the Apple Developer Documentation: Apple Developer tintColor