Molecule.dev

Music Streaming

Content & Social · React + Node (Express) · 17 @molecule/* packages

Spotify-like music with playlists, queue, and artist pages — with built-in Stripe-backed subscription tiers

Open in Molecule

Try it

Opens instantly. Runs on sample data, so changes reset on reload.

Open preview in a new tab ↗View workspace ↗

What is inside

Screens (17)

  • Landing /
  • Login /login
  • Signup /signup
  • ForgotPassword /forgot-password
  • ResetPassword /reset-password
  • Home /home (signed in)
  • Search /search (signed in)
  • Library /library (signed in)
  • PlaylistDetail /playlists/:id (signed in)
  • ArtistDetail /artists/:id (signed in)
  • Radio /radio (signed in)
  • Settings /settings (signed in)
  • AlbumDetail /albums/:id (signed in)
  • NowPlaying /now-playing (signed in)
  • Profile /profile/:handle (signed in)
  • Subscription /subscription (signed in)
  • LikedSongs /library/liked (signed in)

Data model (16 tables)

  • albums — id, user_id, artist_id, title, cover_url, release_date, type, created_at, …
  • artists — id, user_id, name, slug, bio, avatar_url, monthly_listeners, created_at, …
  • devices — id, createdAt, updatedAt, userId, name, pushPlatform, pushSubscription, hasPushSubscription
  • liked_tracks — id, user_id, track_id, liked_at, updatedAt
  • listening_history — id, user_id, track_id, ms_played, played_at, listened_at, updatedAt
  • notifications — id, user_id, kind, payload, read_at, created_at, updatedAt, title, …
  • payments — id, createdAt, updatedAt, userId, transactionId, productId, platformKey, data, …
  • playlist_tracks — id, playlist_id, track_id, position, added_at, updatedAt
  • playlists — id, user_id, owner_id, name, description, cover_image_url, is_public, track_count, …
  • queue_items — id, user_id, track_id, position, added_at, updatedAt, origin, source_kind, …
  • radio_stations — id, owner_id, user_id, seed_track_id, name, created_at, updatedAt, description, …
  • tracks — id, user_id, album_id, artist_id, title, duration_ms, duration_seconds, track_number, …
  • artist_follows — id, user_id, artist_id, followed_at, updatedAt
  • playlist_saves — id, user_id, playlist_id, saved_at, updatedAt
  • user_playback — user_id, track_id, position_seconds, is_playing, is_shuffled, repeat_mode, volume, updated_at
  • user_preferences — user_id, display_name, country, audio_quality, crossfade, gapless, normalize, allow_explicit, …

API (14 handlers)

  • \_audio api/src/handlers/_audio.ts
  • \_decorate api/src/handlers/_decorate.ts
  • \_seed api/src/handlers/_seed.ts
  • albums api/src/handlers/albums.ts
  • artists api/src/handlers/artists.ts
  • follow api/src/handlers/follow.ts
  • liked api/src/handlers/liked.ts
  • notifications api/src/handlers/notifications.ts
  • playlists api/src/handlers/playlists.ts
  • preferences api/src/handlers/preferences.ts
  • queue api/src/handlers/queue.ts
  • reports api/src/handlers/reports.ts
  • search api/src/handlers/search.ts
  • tracks api/src/handlers/tracks.ts

Subscription tiers

free / pro / team — gated by: maxAlbums, maxArtists, maxPlaylists, maxTracks, advancedFeatures, canExport, retentionDays

Built from 17 @molecule/* packages

Browse all @molecule/* packages →

Required secrets

  • DATABASE_URL PostgreSQL connection string
  • MEILISEARCH_API_KEY MeiliSearch API key
  • S3_BUCKET S3 bucket for audio/image uploads
  • S3_ACCESS_KEY_ID S3 access key
  • S3_SECRET_ACCESS_KEY S3 secret key

The @molecule/* packages are Apache-2.0. The app you build from this template is yours to export and self-host. Licensing