Pulse: Spotify-Inspired Front-End Replica

A high-fidelity Spotify-inspired desktop/web front-end replica focused on the current Spotify desktop/web experience: tri-panel shell, dense library layout, central content area, bottom player, and a right-side Now Playing / Friend Activity rail.

The project uses original mock data, original abstract artwork, and neutral branding so the UI can get close to Spotify’s product feel without reusing proprietary assets.

Project Goal

Recreate the Spotify experience as closely as possible in:

• dark visual system and panel hierarchy
• library-left / content-center / now-playing-right shell structure
• spacing, card density, typography rhythm, and control sizing
• hover states, transitions, micro-interactions, and playback feedback
• search, browse, playlist/album detail, player behavior, queue, and device switching UI

Stack

• React 19
• Vite 7
• TypeScript
• React Router
• Framer Motion
• Lucide React
• Custom CSS system with CSS variables and handcrafted layout/state styling

Setup

npm install

Codespaces users can rely on the included devcontainer configuration, which installs dependencies automatically and forwards port 5173.

Run

npm run dev -- --host 0.0.0.0

Open the Vite URL shown in the terminal, typically http://localhost:5173.

Production Build

npm run build
npm run preview

What Was Replicated

• tri-column desktop shell with Your Library, main content, and right rail
• resizable left and right desktop panels with compact/collapsed behavior at narrower widths
• Spotify-like library browsing with filters, search affordance, recents sorting, and dense saved-item rows
• sticky topbar with back/forward navigation, contextual search, friend activity toggle, and profile controls
• home screen with compact greeting, dense quick-access cards, and multiple content shelves
• search page with top result, collection result list, editor picks, and category tiles
• playlist/album detail page with denser hero, action row, and track table
• bottom player with playback state, queue controls, volume/progress sliders, and active track animation
• queue popover with now playing, upcoming tracks, and autoplay recommendations
• device picker popover modeled after Spotify Connect behavior
• procedural audio previews so every mock track can actually play without proprietary media files
• Now Playing rail with about/credits/queue preview and Friend Activity rail with realistic mock activity
• loading skeletons, empty states, and responsive behavior

Intentionally Adapted

• neutral Pulse branding instead of Spotify marks or logos
• original abstract cover system built from gradients, shapes, and editorial-style treatments
• generated synth-based track previews instead of copyrighted audio assets
• mock catalog, social activity, and queue state instead of live Spotify APIs
• handcrafted CSS and local state rather than copied internal Spotify assets or tokens

Major Improvement Work

Structural Fidelity

• replaced the earlier simplified shell with a tri-panel Spotify-like layout
• added explicit layout state for left rail mode/width and right rail mode/width
• reworked home, search, and detail views to feel denser and less like a custom landing page

Interaction Fidelity

• connected the right rail to playback state so Now Playing reacts to the active queue
• made the friend activity icon functional instead of decorative
• preserved motion, but made it subtler and more product-like rather than presentation-heavy

Visual Fidelity

• replaced the earlier letter-based covers with more convincing abstract editorial artwork
• tightened radii, borders, contrast, spacing, and card proportions to better match Spotify
• reduced glossy/template styling in favor of flatter, more faithful Spotify-like surfaces

Utility Panel Fidelity

• added a dedicated queue panel with current track, upcoming queue, and autoplay recommendations
• added a device picker panel that behaves like a Spotify Connect menu with active-device selection
• tightened the player bar, transport controls, and bottom-right utility spacing for a closer Spotify feel

Scripts

• npm run dev: start the development server
• npm run build: type-check and build for production
• npm run lint: run ESLint
• npm run preview: preview the production build locally

Verification

The project is verified with:

• npm run build
• npm run lint
• dev-server smoke test via npm run dev -- --host 0.0.0.0

Visual Closeness Summary

This version targets the modern Spotify desktop/web product more directly than the earlier two-panel replica. It is still intentionally front-end-only and brand-neutral, but the shell structure, panel behavior, queue/device utilities, density, and right-rail behavior are substantially closer to the current Spotify app.