Sporefy

Resumen

Sporefy es una plataforma completa de streaming de música inspirada en Spotify que permite a los usuarios descubrir, reproducir y gestionar su música favorita. Desarrollé tanto el frontend como el backend utilizando tecnologías web modernas. Todo el contenido musical, incluyendo datos de artistas y metadatos de pistas, fue generado usando inteligencia artificial para poblar la plataforma con un catálogo realista.

Arquitectura técnica

La aplicación utiliza Astro como framework full-stack con Svelte para componentes interactivos. La gestión de estado aprovecha tiendas persistentes (svelte-persisted-store) para funcionalidad offline y experiencia de usuario sin interrupciones entre sesiones. El backend está impulsado por AstroDB con migraciones automáticas, y Lucia maneja la autenticación segura con GitHub OAuth y soporte para email/contraseña.

La estructura de componentes está organizada por dominios funcionales: botones, iconos, herramientas de administrador, páginas de artistas, flujos de autenticación e interfaz principal del reproductor. Esta arquitectura modular garantiza mantenibilidad y escalabilidad conforme la aplicación crece.

Características & experiencia de usuario

La aplicación incluye un reproductor de música interactivo con controles completos de reproducción (play, pausa, siguiente, anterior), shuffle y modos de repetición, y ajuste de volumen. Los usuarios pueden ver letras en tiempo real y gestionar colas de reproducción. Las playlists personales permiten a los usuarios curar colecciones, mientras que el sistema de likes permite guardar tracks, colecciones, artistas y otras playlists en su perfil.

La capa social incluye perfiles de usuario, la capacidad de seguir artistas y otros usuarios, e historial de búsquedas recientes que rastrea patrones de navegación. Todo el estado persiste en localStorage, manteniendo contexto entre sesiones del navegador.

Panel de administrador

Para usuarios administrativos, construí un panel de control dedicado para la gestión completa de contenido: crear y editar artistas con biografías y insignias verificadas, gestionar colecciones con metadatos, cargar imágenes de portada vía Cloudinary y organizar tracks con letras y seguimiento de duración. La interfaz administrativa incluye características colaborativas para gestionar colecciones de artistas y asignar curadores.

Toda la interfaz está completamente optimizada para dispositivos móviles y tablets, utilizando Tailwind CSS con animaciones suaves, menús contextuales interactivos y tooltips accesibles para una experiencia pulida.