En este tutorial, te guiaré a través del proceso completo de creación de un clon de Spotify. Desde la configuración inicial con Astro y la implementación de TailwindCSS para el diseño, hasta la construcción de un reproductor funcional con React y Svelte. Abordaremos desafíos, corregiremos bugs y estableceremos una conexión con una API para una experiencia completa. Además, el repositorio estará disponible para que puedas seguir cada paso. ¡Vamos a construir juntos este proyecto desde cero!
▶ No te pierdas más directos en: / midudev
▶ Repositorio: github.com/midudev/spotify-tw...
0:00 Intro
2:53 Crear un nuevo proyecto con Astro
4:38 Extensión para Astro
5:16 Limpiando ficheros
6:30 Instalando TailwindCSS
7:28 Creando Layout
15:41 Creando Aside
17:17 Obtener todos los iconos
18:41 Creando Aside pt2
27:53 Cargando Fuentes
30:35 Mostrando Canciones
39:00 Creando Main
41:39 Creando Cards de música
49:25 View Transition
51:23 Creando página de las playlist
55:43 Continuando View Transitions
57:28 Agregando info. de la 2da. página
01:07:19 Problemas con las Transition API
1:07:55 Creando componente de Svelte
1:13:16 Creando Player con componentes de React
1:19:14 Importante con los componentes Reactjs y Sveltejs
1:23:00 Persistencia en el Audio a Spotify
01:29:00 Explicación del reproductor
1:31:53 Corrigiendo detalles
1:38:31 Creando estado global zustand
1:40:38 Usando Store
1:46:26 Qué musica se esta ejecutando?
1:49:10 Arreglando animación de las View Transitions
1:51:10 Creando EndPoiny
1:54:15 Creando API
2:00:00 Recuperar la información de la PlayList
2:04:10 Reproducir y pausar música
2:05:00 Cambiar la canción que esta escuchando
2:07:33 Mostrando musica actual en el reproductor
2:13:00 Slider del Volumen
2:18:26 Cambio de icono con respecto al volumen
2:34:00 Controles de musica
2:52:00 Arreglando bugs
2:55:20 Bug NaN
2:59:03 Lista de canciones (tabla de todas las musicas)
3:12:00 Arreglando el borde de las tablas
3:14:00 Player GRANDE
3:21:55 Que faltaria??
3:23:49 Repositorio
Негізгі бет Ғылым және технология Clon de Spotify DESDE CERO con Astro 3, React JS, Svelte y TailwindCSS
Пікірлер: 97