Sporefy

Overview

Sporefy is a full-featured music streaming platform inspired by Spotify, enabling users to discover, play, and manage music. I built both the frontend and backend using modern web technologies. All music content, including artist data and track metadata, was generated using AI to populate the platform with a realistic catalog.

Technical architecture

The application uses Astro as the full-stack framework with Svelte for interactive components. State management leverages persisted stores (svelte-persisted-store) for offline functionality and seamless user experience across sessions. The backend is powered by AstroDB with automatic migrations, and Lucia handles secure authentication with GitHub OAuth and email/password support.

The component structure is organized by feature domains: buttons, icons, admin tools, artist pages, authentication flows, and the main player interface. This modular architecture ensures maintainability and scalability as the application grows.

Features & user experience

The application features an interactive music player with full playback controls (play, pause, next, previous), shuffle, repeat modes, and volume adjustment. Users can view real-time lyrics and manage playback queues. Personal playlists allow users to curate collections, while the like system enables saving tracks, collections, artists, and other playlists to their profile.

The social layer includes user profiles, the ability to follow artists and other users, and a recent search history that tracks user navigation patterns. All state persists to localStorage, maintaining context across browser sessions.

Admin dashboard

For administrative users, I built a dedicated control panel for comprehensive content management: creating and editing artists with biographies and verified badges, managing collections with metadata, uploading cover images via Cloudinary, and organizing tracks with lyrics and duration tracking. The admin interface includes collaborative features for managing artist collections and assigning curators.

The entire interface is fully responsive for mobile and tablet devices, using Tailwind CSS with smooth animations, interactive context menus, and accessible tooltips for a polished user experience.