How to Build a Music Streaming Backend with Lovable

1Create a music streaming backend with Supabase. Set up these tables:
2
3- artist_profiles: id (references auth.users), display_name, bio, avatar_url, genre_tags (text[]), created_at
4- albums: id, artist_id (references artist_profiles), title, cover_art_url, release_year (int), genre (text), created_at
5- tracks: id, artist_id (references artist_profiles), album_id (references albums nullable), title, duration_seconds (numeric), file_size_bytes (int), mime_type (text), storage_path (text — NEVER exposed to client), play_count (int default 0), track_number (int nullable), genre (text), is_published (bool default false), created_at
6- playlists: id, owner_id (references auth.users), title, description, cover_art_url, is_public (bool default true), created_at
7- playlist_tracks: id, playlist_id (references playlists), track_id (references tracks), position (int), added_at
8- listen_history: id, user_id (references auth.users), track_id (references tracks), position_seconds (numeric default 0), completed (bool default false), last_played_at — unique(user_id, track_id)
9
10RLS:
11- artist_profiles: publicly readable, users manage their own
12- albums: publicly readable
13- tracks: SELECT only shows rows where is_published = true. storage_path MUST NOT be included in client queries — never select it directly. Artists can INSERT/UPDATE/DELETE their own tracks
14- playlists: publicly readable if is_public = true, owners can CRUD their own
15- playlist_tracks: inherits playlist visibility
16- listen_history: users can only read/write their own rows
17
18Create a Supabase Storage bucket called 'audio':
19- PRIVATE bucket (no public URL access)
20- Allowed MIME types: audio/mpeg, audio/flac, audio/mp4, audio/ogg, audio/wav
21- Max upload size: 500MB

1Create a Supabase Edge Function at supabase/functions/get-stream-url/index.ts.
2
3Receives: { track_id: string } in body.
4Requires authentication (validate JWT).
5
6Logic:
71. Extract user_id from JWT.
82. Fetch track from Supabase using service role key:
9   SELECT id, storage_path, is_published, duration_seconds FROM tracks WHERE id = track_id AND is_published = true
10   If no row returned, return 404.
113. Optional access check (uncomment for subscription model):
12   Check if user has an active subscription in a subscriptions table. If not and the track requires subscription, return 403.
134. Generate a signed URL with expiry of 300 seconds (5 minutes):
14   const { data, error } = await supabaseAdmin.storage.from('audio').createSignedUrl(track.storage_path, 300)
155. If error generating signed URL, return 500.
166. Log the play event: upsert into listen_history { user_id, track_id, last_played_at: now() } ON CONFLICT (user_id, track_id) DO UPDATE SET last_played_at = now().
177. Increment play_count: UPDATE tracks SET play_count = play_count + 1 WHERE id = track_id.
188. Return: { signed_url: data.signedUrl, expires_in: 300, track_id, duration_seconds: track.duration_seconds }
19
20Store SUPABASE_SERVICE_ROLE_KEY in Cloud tab → Secrets. Use it to initialize a separate admin Supabase client in the Edge Function.

1import { useEffect, useRef, useState, useCallback } from 'react'
2import { supabase } from '@/integrations/supabase/client'
3import { Button } from '@/components/ui/button'
4import { Slider } from '@/components/ui/slider'
5import { Play, Pause, SkipBack, SkipForward, Volume2, VolumeX } from 'lucide-react'
6
7type Track = { id: string; title: string; artist_name: string; duration_seconds: number; cover_art_url?: string }
8
9export function AudioPlayer({ track, onNext, onPrev }: { track: Track | null; onNext: () => void; onPrev: () => void }) {
10  const audioRef = useRef<HTMLAudioElement>(null)
11  const [playing, setPlaying] = useState(false)
12  const [currentTime, setCurrentTime] = useState(0)
13  const [volume, setVolume] = useState(0.8)
14  const [muted, setMuted] = useState(false)
15  const urlRefreshTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
16
17  const fetchAndLoad = useCallback(async (trackId: string, resumeAt?: number) => {
18    const { data, error } = await supabase.functions.invoke('get-stream-url', { body: { track_id: trackId } })
19    if (error || !data?.signed_url) return
20    const audio = audioRef.current
21    if (!audio) return
22    audio.src = data.signed_url
23    audio.currentTime = resumeAt ?? 0
24    audio.load()
25    if (playing) audio.play()
26    if (urlRefreshTimer.current) clearTimeout(urlRefreshTimer.current)
27    const refreshIn = Math.max((data.expires_in - 30) * 1000, 5000)
28    urlRefreshTimer.current = setTimeout(() => fetchAndLoad(trackId, audio.currentTime), refreshIn)
29  }, [playing])
30
31  useEffect(() => {
32    if (!track) return
33    supabase.from('listen_history').select('position_seconds').eq('track_id', track.id).single()
34      .then(({ data }) => fetchAndLoad(track.id, data?.position_seconds ?? 0))
35    return () => { if (urlRefreshTimer.current) clearTimeout(urlRefreshTimer.current) }
36  }, [track?.id])
37
38  useEffect(() => {
39    const audio = audioRef.current
40    if (!audio) return
41    const onTime = () => setCurrentTime(audio.currentTime)
42    const onEnded = () => { setPlaying(false); onNext() }
43    audio.addEventListener('timeupdate', onTime)
44    audio.addEventListener('ended', onEnded)
45    return () => { audio.removeEventListener('timeupdate', onTime); audio.removeEventListener('ended', onEnded) }
46  }, [])
47
48  const saveProgress = useCallback(async () => {
49    if (!track || !audioRef.current) return
50    const pos = audioRef.current.currentTime
51    const completed = pos >= track.duration_seconds * 0.95
52    await supabase.from('listen_history').upsert({ track_id: track.id, position_seconds: pos, completed, last_played_at: new Date().toISOString() }, { onConflict: 'user_id,track_id' })
53  }, [track])
54
55  useEffect(() => {
56    const interval = setInterval(saveProgress, 15000)
57    window.addEventListener('beforeunload', saveProgress)
58    return () => { clearInterval(interval); window.removeEventListener('beforeunload', saveProgress) }
59  }, [saveProgress])
60
61  const togglePlay = () => {
62    const audio = audioRef.current
63    if (!audio) return
64    if (playing) { audio.pause(); setPlaying(false) } else { audio.play(); setPlaying(true) }
65  }
66
67  const seek = (value: number[]) => {
68    const audio = audioRef.current
69    if (!audio) return
70    audio.currentTime = value[0]
71    setCurrentTime(value[0])
72  }
73
74  const fmt = (s: number) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`
75
76  return (
77    <div className="fixed bottom-0 left-0 right-0 bg-background border-t p-4">
78      <audio ref={audioRef} />
79      <div className="max-w-3xl mx-auto">
80        <div className="flex items-center gap-4 mb-3">
81          {track?.cover_art_url && <img src={track.cover_art_url} alt={track.title} className="w-10 h-10 rounded object-cover" />}
82          <div className="flex-1 min-w-0">
83            <p className="text-sm font-medium truncate">{track?.title ?? 'No track selected'}</p>
84            <p className="text-xs text-muted-foreground truncate">{track?.artist_name ?? ''}</p>
85          </div>
86        </div>
87        <div className="flex items-center gap-3">
88          <Button variant="ghost" size="icon" onClick={onPrev}><SkipBack className="h-4 w-4" /></Button>
89          <Button variant="ghost" size="icon" onClick={togglePlay}>
90            {playing ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5" />}
91          </Button>
92          <Button variant="ghost" size="icon" onClick={onNext}><SkipForward className="h-4 w-4" /></Button>
93          <span className="text-xs text-muted-foreground w-10 text-right">{fmt(currentTime)}</span>
94          <Slider className="flex-1" min={0} max={track?.duration_seconds ?? 100} step={1} value={[currentTime]} onValueChange={seek} />
95          <span className="text-xs text-muted-foreground w-10">{fmt(track?.duration_seconds ?? 0)}</span>
96          <Button variant="ghost" size="icon" onClick={() => { setMuted(!muted); if (audioRef.current) audioRef.current.muted = !muted }}>
97            {muted ? <VolumeX className="h-4 w-4" /> : <Volume2 className="h-4 w-4" />}
98          </Button>
99          <Slider className="w-20" min={0} max={1} step={0.05} value={[volume]} onValueChange={([v]) => { setVolume(v); if (audioRef.current) audioRef.current.volume = v }} />
100        </div>
101      </div>
102    </div>
103  )
104}

1Build an audio upload form at src/components/artist/TrackUploadForm.tsx.
2
3Install tus-js-client as a dependency. Ask Lovable to add it via package.json.
4
5Requirements:
6- Form fields: title (required), album Select (optional — fetches this artist's albums), track_number (optional), genre Select, and the audio file Input.
7- On file selection, show: file name, file size (formatted), audio format.
8- Use tus-js-client for the upload:
9  import * as tus from 'tus-js-client'
10  const upload = new tus.Upload(file, {
11    endpoint: SUPABASE_URL + '/storage/v1/upload/resumable',
12    headers: { authorization: 'Bearer ' + (await supabase.auth.getSession()).data.session?.access_token, 'x-upsert': 'true' },
13    uploadDataDuringCreation: true,
14    removeFingerprintOnSuccess: true,
15    metadata: { bucketName: 'audio', objectName: storagePath, contentType: file.type },
16    chunkSize: 6 * 1024 * 1024, // 6MB chunks
17    onProgress: (uploaded, total) => setProgress(Math.round((uploaded / total) * 100)),
18    onSuccess: async () => { /* insert track row */ },
19    onError: (error) => setError(error.message),
20  })
21  upload.start()
22- Show a shadcn/ui Progress bar during upload.
23- On success, insert into tracks: { artist_id, album_id, title, duration_seconds (read from HTMLAudioElement), storage_path, file_size_bytes, mime_type, is_published: false }.
24  To get duration: const audio = new Audio(); audio.src = URL.createObjectURL(file); audio.onloadedmetadata = () => resolve(audio.duration).
25- After insert, show a success message with a 'Publish Track' Button that sets is_published = true.

1Build playlist management and a play queue.
2
31. Playlists page at src/pages/Playlists.tsx:
4- Fetch user's playlists joined with track count from playlist_tracks.
5- Display as Cards with cover art, title, track count, and total duration (sum of tracks.duration_seconds).
6- 'New Playlist' Dialog: title, description, visibility toggle.
7- Playlist detail at /playlists/[id]: list of tracks in order with drag-to-reorder using position integer.
8  Each row: track number, album art, title, artist, duration, Remove button.
9  'Add Tracks' Sheet: search user's accessible tracks by title or artist, checkbox select, Add to Playlist.
10- 'Play Playlist' Button adds all tracks to the play queue and starts the first track.
11
122. Play queue (Zustand store or Context):
13- State: queue (Track[]), currentIndex (number), shuffle (bool), repeat ('off'|'track'|'queue').
14- Actions: setQueue(tracks), addToQueue(track), next(), prev(), toggleShuffle(), cycleRepeat().
15- When shuffle is true, next() picks a random unplayed track from the queue.
16- When repeat is 'track', onEnded loops the same track. When 'queue', wraps from last to first.
17- PlayerBar at the bottom reads from this store and calls next() when a track ends.