Skip to content

danielislas3/crossfade

BranchesTags

Repository files navigation

Crossfade - Sincronizador de Playlists

Crossfade Logo

Sincroniza tus playlists entre Spotify, Tidal y Amazon Music con un solo clic.

📖 Contenido

🎵 Sobre el Proyecto

Crossfade es una aplicación web que permite a los usuarios sincronizar sus playlists entre diferentes servicios de streaming de música. El proyecto nació de la frustración común de tener playlists dispersas en diferentes plataformas y la dificultad de mantenerlas actualizadas manualmente.

Características principales:

  • Autenticación de usuarios
  • Conexión con Spotify, Tidal y Amazon Music mediante OAuth
  • Importación de playlists desde cualquier servicio conectado
  • Exportación de playlists a cualquier servicio conectado
  • Almacenamiento de playlists en la nube para acceso desde cualquier dispositivo
  • Sincronización automática de playlists

🚀 Desarrollo del Proyecto

El proyecto Crossfade (originalmente llamado PlaylistSync) se desarrolló de forma modular y progresiva, siguiendo estos pasos:

Iteración 1: Prototipo Inicial y Estructura

  1. Configuración inicial del proyecto:

    • Creación del proyecto Nuxt 3
    • Configuración de TypeScript
    • Configuración de Tailwind CSS y Nuxt UI

  2. Diseño de la interfaz base:

    • Creación de componentes reutilizables
    • Implementación de layout principal
    • Desarrollo de la página de inicio

  3. Diseño de la arquitectura:

    • Definición de la estructura de carpetas
    • Diseño de la base de datos
    • Planificación de endpoints de API

Iteración 2: Autenticación y Gestión de Usuarios

  1. Implementación de Supabase:

    • Configuración de la base de datos
    • Configuración de autenticación
    • Implementación de políticas RLS (Row Level Security)

  2. Desarrollo del sistema de autenticación:

    • Registro de usuarios
    • Inicio de sesión
    • Cierre de sesión
    • Persistencia de sesión

  3. Gestión de perfiles de usuario:

    • Creación de perfiles al registrarse
    • Visualización y edición de perfiles

Iteración 3: Integración con Servicios de Música

  1. Implementación de OAuth para servicios externos:

    • Configuración de OAuth para Spotify
    • Configuración de OAuth para Tidal
    • Configuración de OAuth para Amazon Music

  2. Desarrollo de endpoints en el servidor:

    • Creación de endpoints para el intercambio de tokens
    • Manejo seguro de credenciales de servicios
    • Renovación automática de tokens

  3. Interfaz de conexión de servicios:

    • Página de servicios con estado de conexión
    • Manejo de errores en la autenticación
    • Desconexión de servicios

Iteración 4: Gestión de Playlists

  1. Implementación de importación de playlists:

    • Obtención de playlists desde servicios conectados
    • Almacenamiento en base de datos propia
    • Interfaz de selección e importación

  2. Implementación de exportación de playlists:

    • Creación de playlists en servicios externos
    • Mapeo de canciones entre servicios
    • Seguimiento de estado de exportación

  3. Visualización de playlists:

    • Vista de lista de playlists
    • Vista detallada de playlist con canciones
    • Funcionalidades de edición y eliminación

Iteración 5: Mejoras y Optimizaciones

  1. Optimización de rendimiento:

    • Mejora de consultas a la base de datos
    • Implementación de caché para llamadas a APIs externas
    • Optimización de carga de componentes

  2. Mejora de experiencia de usuario:

    • Implementación de feedback en tiempo real
    • Mejoras en el diseño responsivo
    • Animaciones y transiciones

  3. Robustez y manejo de errores:

    • Mejora en el manejo de casos borde
    • Implementación de reintentos automáticos
    • Logging y monitoreo

🛠️ Tecnologías Utilizadas

El proyecto utiliza un stack moderno de tecnologías:

🏗️ Arquitectura

Estructura de carpetas

app/
├── assets/             # Archivos estáticos (CSS, imágenes)
├── components/         # Componentes Vue reutilizables
│   ├── auth/           # Componentes relacionados con autenticación
│   ├── playlist/       # Componentes relacionados con playlists
│   └── service/        # Componentes relacionados con servicios externos
├── composables/        # Composables Vue reutilizables
├── layouts/            # Layouts de la aplicación
├── middleware/         # Middleware de autenticación y otros
├── pages/              # Páginas de la aplicación (rutas)
├── public/             # Archivos públicos (favicon, robots.txt)
├── server/             # Código del lado del servidor (API, middleware)
│   ├── api/            # Endpoints de la API
│   └── middleware/     # Middleware del servidor
├── stores/             # Stores de Pinia
│   ├── auth.ts         # Store de autenticación
│   ├── playlist.ts     # Store de playlists
│   └── service.ts      # Store de servicios externos
└── types/              # Definiciones de tipos TypeScript

Diagrama de flujo de autenticación OAuth

┌─────────┐      1. Inicio auth      ┌──────────────┐
│         │─────────────────────────>│              │
│         │                          │              │
│  App    │                          │   Servicio   │
│         │                          │   (Spotify)  │
│         │<─────────────────────────│              │
└─────────┘      2. Redirección      └──────────────┘
     │             a callback               ▲
     │                                      │
     │                                      │
     │                                      │
     │           ┌───────────────┐          │
     │           │               │          │
     └──────────>│  Backend Nuxt │──────────┘
   3. Intercambio │               │  4. Intercambio
      de código   └───────────────┘     de token
                         │
                         │
                         ▼
                  ┌────────────┐
                  │            │
                  │  Supabase  │
                  │            │
                  └────────────┘
                 5. Almacenamiento
                    de tokens

Base de datos

La estructura de la base de datos en Supabase incluye las siguientes tablas:

  • profiles - Información de los usuarios
  • service_tokens - Tokens de acceso a servicios
  • playlists - Playlists almacenadas
  • tracks - Canciones de las playlists
  • playlist_tracks - Relación entre playlists y canciones
  • sync_history - Historial de sincronizaciones

⚙️ Instalación y Configuración

Prerrequisitos

  • Node.js (v18 o superior)
  • Yarn o npm
  • Cuenta en Supabase
  • Cuentas de desarrollador en Spotify, Tidal y Amazon Music

Instalación

  1. Clonar el repositorio:

    git clone https://github.com/tu-usuario/crossfade.git
cd crossfade

  2. Instalar dependencias:

    yarn install

  3. Configurar variables de entorno: Crea un archivo .env en la raíz del proyecto con el siguiente contenido:

    # Supabase
SUPABASE_URL=https://tu-proyecto.supabase.co
SUPABASE_KEY=tu-anon-key

# Spotify
SPOTIFY_CLIENT_ID=tu-spotify-client-id
SPOTIFY_CLIENT_SECRET=tu-spotify-client-secret

# Tidal
TIDAL_CLIENT_ID=tu-tidal-client-id
TIDAL_CLIENT_SECRET=tu-tidal-client-secret

# Amazon Music
AMAZON_CLIENT_ID=tu-amazon-client-id
AMAZON_CLIENT_SECRET=tu-amazon-client-secret

# URL del sitio (para callbacks de OAuth)
SITE_URL=http://localhost:3000

  4. Configurar la base de datos: Ejecuta el script SQL proporcionado en scripts/schema.sql en tu proyecto de Supabase.

  5. Iniciar el servidor de desarrollo:

    yarn dev

🎮 Uso

Registro e inicio de sesión

  1. Visita la aplicación en http://localhost:3000
  2. Regístrate con tu correo electrónico
  3. Inicia sesión con tus credenciales

Conexión de servicios

  1. Ve a la página "Servicios"
  2. Haz clic en "Conectar" junto al servicio deseado
  3. Autoriza a Crossfade en la página del servicio
  4. Serás redirigido de vuelta a la aplicación

Importación de playlists

  1. En la página "Servicios", verás tus playlists disponibles
  2. Selecciona las playlists que deseas importar
  3. Haz clic en "Importar seleccionadas"

Exportación de playlists

  1. Ve a la página "Mis Playlists"
  2. Selecciona una playlist
  3. Haz clic en "Exportar"
  4. Selecciona el servicio de destino
  5. Confirma la exportación

🎛️ Configuración de Servicios

Spotify

  1. Ve a Spotify Developer Dashboard
  2. Crea una nueva aplicación
  3. Configura la URL de redirección: http://localhost:3000/callback/spotify
  4. Obtén el Client ID y Client Secret

Tidal

  1. Ve a Tidal Developer Portal
  2. Crea una nueva aplicación
  3. Configura la URL de redirección: http://localhost:3000/callback/tidal
  4. Obtén el Client ID y Client Secret

Amazon Music

  1. Ve a Amazon Developer Console
  2. Crea una nueva aplicación
  3. Configura la URL de redirección: http://localhost:3000/callback/amazon
  4. Obtén el Client ID y Client Secret

🗺️ Roadmap

Próximas características

  • Sincronización automática periódica
  • Soporte para más servicios (Apple Music, YouTube Music)
  • Transferencia de gustos musicales (artistas/géneros favoritos)
  • Reconstrucción inteligente de playlists basada en similitud
  • Aplicación móvil nativa
  • Modo offline

Mejoras planeadas

  • Optimización de rendimiento
  • Mejoras en la interfaz de usuario
  • Soporte para múltiples idiomas
  • Análisis de estadísticas de reproducciones
  • Modo oscuro/claro

👥 Contribuir

¡Las contribuciones son bienvenidas! Si quieres contribuir al proyecto:

  1. Haz un fork del repositorio
  2. Crea una rama para tu característica (git checkout -b feature/amazing-feature)
  3. Haz commit de tus cambios (git commit -m 'Add some amazing feature')
  4. Haz push a la rama (git push origin feature/amazing-feature)
  5. Abre un Pull Request

Guía de estilo

  • Usamos ESLint para mantener la consistencia del código
  • Sigue las convenciones de Vue 3 y Nuxt 3
  • Usa TypeScript para todas las nuevas características
  • Escribe tests unitarios para la lógica de negocio
  • Usa mensajes de commit significativos siguiendo Conventional Commits

📄 Licencia

Este proyecto está licenciado bajo la Licencia MIT - ver el archivo LICENSE para más detalles.

Desarrollado con ❤️ y ☕️ por danielislas3

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages