Hace aproximadamente 2 años tuve la oportunidad de conocer proyectos en React, pero fue hacia finales del año pasado cuando comencé a perfeccionar mis habilidades en esta tecnología.
Aunque todavía estoy en proceso de aprendizaje, he decidido compartir una serie de proyectos que he desarrollado en mi cuenta de Github. Durante este tiempo, mi objetivo ha sido crear proyectos funcionales que no solo beneficien mi crecimiento como desarrollador, sino que también puedan ser útiles para la comunidad en general. Recientemente, mientras escuchaba una playlist en Spotify, noté varias canciones que no me gustaban. Esto me llevó a plantearme la siguiente pregunta:
¿Existirá una opción dentro de Spotify, en la que pueda clonar una playlist pública y que pueda eliminar canciones?
La respuesta corta es: No
Debido a que solo el dueño de la playlist tiene el control total sobre su contenido, incluyendo la capacidad de agregar, eliminar o reorganizar canciones.
Entonces decidí investigar cómo funciona Spotify y descubrí que tienen una API a la cual puedes conectarte de forma gratuita después de cierta configuración. Con esta información, desarrollé la siguiente SPA (Single Page Application).
La versión más reciente del repositorio está publicada en vercel, puedes acceder desde acá https://spotify-playlists-mu.vercel.app/
¿Como funciona?
Iniciar sesión con Spotify.
¿Porque debo acceder con mi cuenta de Spotify?
Cuando clonas listas de reproducción, estas se guardan en tu cuenta, por lo que te conviertes en el administrador. Esto significa que no solo se agregarán a tu biblioteca, sino que también podrás gestionarlas a tu gusto. Está sesión quedará únicamente en tu navegador.
Al momento de que presiones el botón iniciar con Spotify, si no tienes ingresada tu sesión te pedirá que accedas.
Después de que ingreses sesión te pedirá que apruebes unos permisos, estos permisos servirán para crear playlists, agregar canciones a playlists y eliminar canciones.
Si otorgas los permisos correspondientes, la aplicación te dará un mensaje de Bienvenida y se habilitarán los inputs para colocar los links de las playlists.
Clonar playlist
Para clonar una playlist basta con poner el link de la playlist pública, si deseas eliminar una canción presiona el botón "Agregar Canción" y entonces las canciones que coloques en esa lista se excluirán de tu nueva playlist.
Fusionar Playlists
Durante el desarrollo de la aplicación web, se me ocurrió la idea de poder combinar las canciones de 2 o más playlists. Para esto, creé una sección donde se pueden ingresar los enlaces de las playlists públicas. Utilizando el API de Spotify, la aplicación crea una nueva playlist y agrega todas las canciones de las playlists especificadas.
Explicando el código
Antes de continuar, cabe mencionar que el código está disponible de forma gratuita en mi Github.
El link del repositorio es https://github.com/garcodas/spotify-playlists
Debido a que es una SPA (Single Page Application), en el repositorio solo se encuentra la parte del frontend, que se conecta con el API de Spotify.
Para su desarrollo, se utilizaron las siguientes bibliotecas:
- React con versión 18.2.0
- React Router con versión 6.23.1
- Vite con versión 5.2.0
Para la realización de solicitudes se utilizó la biblioteca:
- Axios con versión 1.7.2
Para la realización y validación de formularios se utilizaron las bibliotecas:
- Zod con versión 3.23.8
- React Hook Form con versión 7.51.5
También se utilizó una biblioteca de componentes llamada shadcn/ui la cual utiliza tailwindcss para estilizar los componentes.
En conclusión, esta SPA que he desarrollado te permite combinar canciones de varias playlists de Spotify, facilitando la creación de nuevas listas personalizadas. Todo el código está disponible en mi repositorio de GitHub, donde puedes encontrar la parte del frontend que se conecta con el API de Spotify.
Si estás interesado en aprender más sobre React o deseas contribuir haciendo mejoras al proyecto, te animo a explorar el repositorio y enviar tus Pull Requests. Estaré encantado de revisar y colaborar en tus aportes. Además, Estoy abierto a recibir comentarios constructivos sobre mi código para seguir avanzando en esta tecnología. Tu participación es muy valiosa para seguir mejorando esta herramienta.
Top comments (0)