[!NOTE] Based on: https://www.youtube.com/watch?v=WRc8lz-bp78
This is a clone of the Spotify web app. It was created using Astro 3, React JS, Svelte and Tailwind CSS.
[!TIP]
- transition:name. Para hacer las transiciones entre paginas, nos tenemos que asegurar que el nombre de la transicion sea el mismo en ambas paginas. Es importante que haya una transicion para un elemento de la siguiente pagina
- Ejemplo:
[id].astro
yPlayListItemCard.astro
<Player client:load transition:name="media-player" transition:persist/>
- client:load es un hook que se ejecuta cuando el componente se carga en el cliente
- transition:name es el nombre de la transicion que se va a ejecutar
- transition:persist es para que el componente persista al navegar entre paginas
- zustand es una libreria para manejar el estado global de la aplicacion. Usada en
/src/store/playerStore.js
para manejar el estado del reproductor de musicapnpm astro preferences disable devToolbar
--> Deshabilitar la barra de herramientas de desarrollo