Melody

Full-stack Spotify-inspired app focused on playback UX and playlist flows.

#PlaylistCRUD
#QueueManagement
#SessionAuth
#AudioPlaybackEngine

Project overview

Melody is a full-stack clone of Spotify that delivers a seamless music streaming experience. Users can create accounts, build personalized playlists, browse albums, play songs, and enjoy continuous playback with a feature-rich audio player and advanced queue management.

Engineering challenges

Coordinating HTML5 audio with Redux play state, resetting readiness when currentSongUrl changes and only calling play() once the new source is loaded, so rapid skip/prev actions do not hit stale <audio> buffers.
Centralizing queue navigation in playbarReducer (PLAY_QUEUE, PLAY_PREV/PLAY_NEXT with modulo index math) so the global playbar and album/playlist views share one queue instead of duplicating skip logic per screen.
Shaping playlist APIs with reusable Jbuilder partials that return explicit playlist_song join IDs—letting the client add, reorder, or remove tracks without refetching full album catalogs after every mutation.

Features

User authentication with secure session management
Continuous audio playback with queue management
Custom playbar with seamless song control (play, pause, rewind, skip, volume adjustment)
Logged-in users can create, edit, and manage personal playlists
Advanced search functionality to explore and discover albums

Architecture

flowchart TB
  subgraph fe [1. Frontend — React + Redux]
    react[React UI — albums, playlists, playbar]
    redux[Redux — playbarReducer]
    audio[HTML5 audio player]
    react --> redux --> audio
  end
  subgraph be [2. Backend — Ruby on Rails]
    auth[Auth — BCrypt passwords + sessions]
    api[Jbuilder JSON API — playlists and songs]
    orm[ActiveRecord]
    auth --> api --> orm
  end
  subgraph data [3. Data and files]
    pg[(PostgreSQL — users, playlists, song metadata)]
    s3[AWS S3 — MP3 files and cover images]
  end
  react -->|Login, signup, logout| auth
  redux -->|Fetch playlists, albums, playback URLs| api
  orm --> pg
  api --> s3

The React app and Rails API are deployed on Render; the browser talks to Rails over HTTPS, and Rails reads/writes PostgreSQL and S3.

Technologies used

Frontend

React, Redux, CSS

Backend

Ruby on Rails, ActiveRecord (ORM), Jbuilder (JSON formatter)

Data

PostgreSQL

Infra

Render

Asset Storage

AWS S3