.gif)
Build fitness tracking with Lovable: step counting, heart rate integration, data sync, analytics and customizable user insights to engage users.
Book a call with an Expert
Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.
The fastest path: add a Supabase-backed workouts API and simple React UI inside your Lovable project using Chat Mode edits. Use Lovable Secrets UI to add SUPABASE_URL and SUPABASE_ANON_KEY, create a supabase client file, add a WorkoutForm and Workouts page, and wire a route in src/App.tsx. You don't need a terminal — use Lovable Preview to test and Publish to push. If you need server-side functions or migrations, export to GitHub and run them locally or via Supabase CLI (outside Lovable).
Build a simple fitness tracker: users can add workouts (date, type, duration, notes) and see a list and daily totals. Data is stored in Supabase. UI is React pages/components inside the Lovable project.
Use Chat Mode file edits to create/update files, use Lovable Preview to run the app and test, add Supabase credentials in Lovable Cloud Secrets UI, then Publish. No terminal required. If you need DB migrations, export to GitHub and run migrations outside Lovable (explicitly labeled).
Use these prompts one-by-one in Lovable chat. Each prompt tells Lovable exactly which files to create/modify and acceptance criteria.
Files to create: src/lib/supabaseClient.ts, src/types/workout.ts
Instructions for Lovable: Create src/lib/supabaseClient.ts that reads from environment via process.env (SUPABASE_URL, SUPABASE_ANON_KEY) and exports a Supabase client using @supabase/supabase-js. Create src/types/workout.ts with a Workout type: id, user_id, date, type, duration\_minutes, notes.
Acceptance criteria: Preview builds without import errors; components can import { supabase } from 'src/lib/supabaseClient'.
Secrets: Tell the user to add SUPABASE_URL and SUPABASE_ANON\_KEY via Lovable Cloud Secrets UI before Preview.
.png)
.png)
// src/lib/supabaseClient.ts
// create supabase client using env variables
import { createClient } from '@supabase/supabase-js'
const url = process.env.SUPABASE_URL!
const key = process.env.SUPABASE_ANON_KEY!
export const supabase = createClient(url, key)
// src/types/workout.ts
export type Workout = {
id: string
user_id?: string
date: string // ISO date
type: string
duration_minutes: number
notes?: string
}
Files to create: src/components/WorkoutForm.tsx
Instructions: Implement a form with date, type (text), duration (number), notes (textarea). On submit call supabase.from('workouts').insert(...) and then call an onSaved callback prop with the new record.
Acceptance criteria: Component compiles; form submits and returns inserted row to caller in Preview (assuming Supabase configured).
// src/components/WorkoutForm.tsx
import React, { useState } from 'react'
import { supabase } from 'src/lib/supabaseClient'
import type { Workout } from 'src/types/workout'
export default function WorkoutForm({ onSaved }: { onSaved: (w: Workout)=>void }) {
const [date, setDate] = useState(new Date().toISOString().slice(0,10))
const [type, setType] = useState('')
const [duration, setDuration] = useState(30)
const [notes, setNotes] = useState('')
const [saving, setSaving] = useState(false)
async function submit(e: React.FormEvent) {
e.preventDefault()
setSaving(true)
const { data, error } = await supabase
.from('workouts')
.insert([{ date, type, duration_minutes: duration, notes }])
.select()
setSaving(false)
if (error) { alert(error.message); return }
if (data?.[0]) onSaved(data[0])
}
return (
<form onSubmit={submit}>
<label>Date<input value={date} onChange={e=>setDate(e.target.value)} type="date"/></label>
<label>Type<input value={type} onChange={e=>setType(e.target.value)}/></label>
<label>Duration (min)<input value={duration} onChange={e=>setDuration(Number(e.target.value))} type="number"/></label>
<label>Notes<textarea value={notes} onChange={e=>setNotes(e.target.value)}/></label>
<button disabled={saving} type="submit">Save workout</button>
</form>
)
}
Files to create/modify: create src/pages/Workouts.tsx, update src/App.tsx to add a /workouts route and link
Instructions: Workouts page loads recent workouts via supabase.from('workouts').select('\*').order('date', {ascending:false}). Show list and daily totals. Include WorkoutForm and refresh list after save.
Acceptance criteria: Preview shows /workouts route with form and list; adding a workout updates the list with the new row.
// src/pages/Workouts.tsx
import React, { useEffect, useState } from 'react'
import { supabase } from 'src/lib/supabaseClient'
import WorkoutForm from 'src/components/WorkoutForm'
import type { Workout } from 'src/types/workout'
export default function Workouts() {
const [workouts, setWorkouts] = useState<Workout[]>([])
async function load() {
const { data } = await supabase.from('workouts').select('*').order('date', { ascending: false })
setWorkouts(data || [])
}
useEffect(()=>{ load() },[])
return (
<div>
<h2>Workouts</h2>
<WorkoutForm onSaved={(w)=> setWorkouts(prev => [w, ...prev])} />
<ul>{workouts.map(w=> <li key={w.id}>{w.date} {w.type} {w.duration_minutes}min</li>)}</ul>
</div>
)
}
// modify src/App.tsx — add import and Route for /workouts and a Nav link
Files to modify: package.json (add @supabase/supabase-js)
Instructions: Update package.json dependencies to include "@supabase/supabase-js": "^2.x". In Lovable Preview the environment will install packages automatically.
Secrets: In Lovable Cloud go to Settings → Secrets and add SUPABASE_URL and SUPABASE_ANON\_KEY. Provide guidance to copy from Supabase project.
Acceptance criteria: Preview installs dependency and no import errors for supabase client.
This plan uses Lovable-native actions only (Chat Mode edits, Preview, Secrets, Publish, GitHub export for outside tasks). Any DB migrations or serverless functions requiring terminal are labeled "outside Lovable" and require running CLI after GitHub export.
Connect with our team to unlock the full potential of no-code solutions with a no-commitment consultation!
.svg)
This prompt helps an AI assistant understand your setup and guide to build the feature
This prompt helps an AI assistant understand your setup and guide to build the feature
This prompt helps an AI assistant understand your setup and guide to build the feature
Connect with our team to unlock the full potential of no-code solutions with a no-commitment consultation!
Book a call with an Expert
Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.
Build it as an AI-assisted, privacy-first web app: use Lovable’s chat-first edits to iterate UI + API, store secrets (Supabase, OpenAI) in Lovable Cloud Secrets UI (never in code), use Preview to test endpoints and UI, Publish when stable, and export/sync to GitHub when you need local tooling or DB migrations. Architect with Supabase for auth + real-time data, server-side AI calls (via serverless endpoints) to generate personalized workouts, and client-side UI that only queries curated endpoints. Prioritize input validation, rate limits, opt-in health data consent, and clear data retention policies.
// pages/api/generate-workout.js (Next.js-style serverless API route)
// Fetch user profile, generate workout via OpenAI, store in Supabase
import { createClient } from '@supabase/supabase-js'
// Create Supabase client on server
const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY)
export default async function handler(req, res) {
// Basic validation
if (req.method !== 'POST') return res.status(405).end()
const { user_id, goal, experience_level } = req.body
if (!user_id || !goal) return res.status(400).json({ error: 'Missing params' })
// Fetch user record for personalization
const { data: user } = await supabase.from('users').select('age,weight').eq('id', user_id).single()
// Build prompt
const prompt = `Create a ${experience_level || 'beginner'} ${goal} workout plan for a ${user?.age || 'adult'} year-old weighing ${user?.weight || 'unknown'} kg. Provide 5 exercises with reps/time and brief notes.`
// Call OpenAI from server (key stored in Lovable Secrets -> process.env.OPENAI_KEY)
const r = await fetch('https://api.openai.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.OPENAI_KEY}`,
},
body: JSON.stringify({
model: 'gpt-4o-mini', // choose a model available to you
messages: [{ role: 'user', content: prompt }],
max_tokens: 500
})
})
const ai = await r.json()
const planText = ai.choices?.[0]?.message?.content || 'Could not generate'
// Store structured record
const { error } = await supabase.from('workouts').insert([
{ user_id, goal, plan: planText, generated_at: new Date().toISOString() }
])
if (error) return res.status(500).json({ error: error.message })
res.json({ plan: planText })
}
From startups to enterprises and everything in between, see for yourself our incredible impact.
They do complex work on extremely fast timelines and effectively manage the testing and pre-launch process to deliver the best possible product. I'm extremely impressed with their execution ability.
