Clon de Spotify DESDE CERO con Astro 3, React JS, Svelte y TailwindCSS

Рет қаралды 295,764

Күн бұрын

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

Пікірлер: 109

@DAVIDIL81 8 ай бұрын

Estaba esperando este video más que un crío una PlayStation... ya tengo para toda la semana... GRACIAS ERES UN CRACK!!! (egoístamente te digo: no aceptes ofertas millonarias porque ese día nos quedaremos sin tus videos)

@KingProzak 4 ай бұрын

En menos de 4 horas todo lo que aprendí no tiene precio. Todo mi agradecimiento midu ❤

@hernanfelipediaz566 8 ай бұрын

Que buen video, se aprende mucho acá. En serio da un contexto muy completo del flujo de trabajo con Astro además de cómo conseguir ciertas cosas que solemos hacer en SPAs

@grabbyel 4 ай бұрын

Tus vídeos son droja dura Midu. La labor que haces por el mundo de la programación es absolutamente inestimable. Increíble que expliques las cosas de forma que parece fácil, hasta el punto de sentirme tonto por no saberlo. Mil gracias mister!!!

@GabrielPozo 8 ай бұрын

Increible la cantidad de detalles que explicas en este video 👏👏👏👏

@elliotgaramendi 8 ай бұрын

No sabes cuánto lo he esperado! Lo comentaste tiempo atrás y al fin llego. Ando muy animado de aprender Astro. Gracias!!!

@GaloPapah 4 ай бұрын

Me encanta en el 2:33:30 cómo el mismo chat le arregla un bug, el tema de que no solo enseñas a la gente que te ve, si no que en verdad es una comunidad construyendo algo.

@kenetacuna9330 8 ай бұрын

Quiero más astro. Está genial. Gracias por tu esfuerzo, se aprende mucho.

@andresfont4651 8 ай бұрын

Llevaba tiempo esperándolo. Muchas gracias por compartir tan valioso contenido.

@leosombra8708 7 ай бұрын

Estuve probando hacerlo responsive, (Soy primeriso en talwind y en astro), muy lindo proyecto, lo probe en el celular y la música se reproduce en segundo plano muy bueno. A la hora de aplicar estilos es talwind me da un poco de problemas el responsive en algunos dispositivos al usar el 100vw no funciona como deberia, pero algo debo estar pasando por alto, el View-transition lo probe en diferentes dispositivos y en algunos celulares si los cambios de estilos son muchos, se demora mas de la cuenta en realizarse. Gracias por el excelente contenido, seguire aprendiendo. Lo que mas me gusto fue la persistencia del reproductor saludos.

@josuechavez7683 8 ай бұрын

Que grande Midu, me encanta ver hacer este tipo de cosas, nunca pares maestro

@axvevansterk2264 2 ай бұрын

Llevo 1h rayado porque no me hacia hover sobre el icono de la misma manera que sobre el texto, y era por el fill="currentColor". Al parecer en los archivos de los svg que ha subido midu a GitHub si aparece. Saludos

@jjedwar17 8 ай бұрын

Me ayudas con la info, muchas gracias por todos los aportes que das a la comunidad sos un crack.

@paulpwo 8 ай бұрын

Que crack! Máster excelente, muchas gracias!

@LocalGhost_8080 8 ай бұрын

Ufff lo estabamos esperando creo que todos!

@alejandroramos9949 8 ай бұрын

No entiendo mucho lo que haces porque estoy arrancando pero haces tan ameno que esta bueno

@juliorodriguez2853 8 ай бұрын

Al tener componentes de React y Svelt se pueden hacer fetching de datos por medio de estos?

@diegoulloao 8 ай бұрын

cómo se pueden agregar absolute paths imports como lo hace next.js?

@TheAlexis0070 8 ай бұрын

Tremendo proyecto!

@mariorous 7 ай бұрын

Que app utilizas para hacer las selecciones en la pantalla cuando explicas algo?

@armandopena5508 8 ай бұрын

Hola midu, por fin vas a hacer el tutorial de hacer un blog con astro? llevo mucho esperandolo. Tus videos son geniales como siempre!

@Kollor 8 ай бұрын

Cual es la diferencia de Zustand con Nanostores (La alternativa que aparece en las docs de astro)?

@Rodo_ 27 күн бұрын

Midulevi, si encuentras maravilloso lo que muestras, cuando pondrás a prueba GeneXus? Y más aún si lo complementas con work with plus?

@user-rw6su6vd7u 7 ай бұрын

Eres el crack de los cracks... pero no paro de reir con el TOÑO EL AMABLE....

@zbishop_1 7 ай бұрын

TUVE UN PROBLEMA. Estuve siguiendo todos tus pasos y cuando llego el minuto 22:12 por alguna razón los íconos no heredaban ni el color ni el hover. Por lo que me rompí la cabeza 2horas entre todas las IA's y mucho stack overflow, para que al final por azares del destino coloqué en el SideMenuItem junto con el text-zinc, la propiedad de fill y hover:fill . Funcionó de maravilla pero no entiendo el porqué no hereda inicialmente. Si alguien pudiera Darme una explicación lo agradecería. Muy buen video, gracias por enseñarnos tanto.

@brandon21997 3 ай бұрын

gracias compañero, justo llevo un buen rato con el mismo problema XD

@hernanfelipediaz566 8 ай бұрын

Quiero decir que he notado que hay una parte donde el audio se escucha como si tuviera pésima calidad, pero es porque tuvieron que editar el audio para limpiar el sonido de fondo. Tal vez fue por eso que demoraron en subir el video, Valió la pena, buen trabajo, reconozco y noto el trabajo 🙌🏽

@madcativ 4 ай бұрын

Gracias por el tuto!, muy bien explicado!. Jejeje en 21:57 parece que gruñe un oso XD

@midulive 4 ай бұрын

🐻 grrrroooor

@mikelsalvadorgarcia5034 8 ай бұрын

Socorroo!!! No me funciona la importación de ViewTransitions de astro:transitions, me pone que no se encuentra el módulo.

@nvrsobrio 8 ай бұрын

Saludos midu desde la tgx gang 💪🏻 y muy bien vídeo

@Avispanalgonsota 6 ай бұрын

Muy bueno, lo termine en 5 dias pero lo logre!

@LuisJimenez-uh1zx 8 ай бұрын

Midu, pero el output en server crea todo JS, esto ko sería contraproducente? Ya que no genera todo con js?

@luisarrieta1501 8 ай бұрын

Midu, ¡está genial!, una pregunta, ¿Es posible usar el linter con standard para Astro? no he podido con la documentación

@Deus-lo-Vuilt 8 ай бұрын

Lo esperaba, gracias

@midulive 8 ай бұрын

Con gusto

@paulo_pana3371 6 ай бұрын

donde puedo ver la continuación del video o lo que falta agregar , esta en otra plataforma ?

@ernestop74 8 ай бұрын

Hola amigos como andan, una pregunta, habría alguna ventaja si se integra daisyUI a tailwindcss?

@marcosdanielgonzalezgimene5273 8 ай бұрын

Hola midu, llegarás a hacer algún curso de Vue o algún "clon" hecho con Vue?, gracias. Saludos!

@flobberant 8 ай бұрын

27:18 otra manera es fijarse la pestaña 'network' de las dev tools y ver la peticion al recurso de las fonts, y ahi te da link directo y todo xd

@diegoalejandrotororeyes5895 8 ай бұрын

¿¿Vas a continuar este proyecto ?? esta muy bueno, quede con las ganas de ver los colores del fondo, los aplique a mi manera mientras, pero de seguro puede mejorar

@juansebastian1186 8 ай бұрын

Hola soy nuevo, apenas ando aprendiendo y quisiera saber si estás usando vs code modificado de apariencia o algún otro editor de código.

@victorgarrido6346 6 ай бұрын

Menuda clase magistral! Está pa lamerlo

@alexboscan6909 Ай бұрын

midu con que mides la pantalla he estado buscando y no lo consigo

@carci2203 Ай бұрын

pregunta basica pero soy nuevo. cuando en las class le da por ejemplo margin y basicamente css que tipo de libreria esta usando??

@DanKayser 29 күн бұрын

No he entendido muy bien del todo tu pregunta pero creo que te refieres a las clases que esta utilizando para estilar los elementos. Si es eso, midu en este proyecto esta utilizando tailwind. En resumidas cuentas en tailwind estan definidas todas esas clases que midu pone. A principios del vídeo explica como instalarla en el proyecto.

@Maikolgames 8 ай бұрын

Quiero y necesito una Parte 2 de esto

@jdsanchez1993 8 ай бұрын

como hacer para que con estas nuevas tecnologias en navegadores antiguos no pete?, y que se pueda lograr buena funcionalidad independiente del navegador

@Elbaulforex 8 ай бұрын

Seria excelente hacerlo solo con nextjs o si es posible con solo astro

@felipedev_ 8 ай бұрын

Midu que buen ejercicio!, muchas gracias por compartir. Quería preguntarte o preguntarle a cualquiera si saben como se llama la herramientica con la que el mide los tamaños de los elementos en las paginas web. Saludos!

@cesaralo2111 6 ай бұрын

Hola bro supiste como se llamaba la herramienta

@heymergg Ай бұрын

El view transitions solo es de astro?

@franklinrodriguez5427 6 ай бұрын

Me da curiosidad como hacer lo del color de background

@OzcarCalle 8 ай бұрын

Lo máximo 😎

@diegoulloao 8 ай бұрын

Tu compadre el que se apellida Silva -> 2:30:34

@juanavlia9776 3 ай бұрын

3:05:26 Impresionante, no me funcionaba por que estaba usando find() en vez de filter().... 1 hora buscando el error :D

@humbertovlopez8643 8 ай бұрын

con svelte, excelente

@scherpabloDev 5 ай бұрын

Excelente video Midu.. Muchas gracias por el aporte. Alguien sabe porque no me deja inspeccionar la página de spotify?? Puede ser que este bloqueado eso por parte de la empresa??

@nospoiler1403 Ай бұрын

Hermano cuando uno dedicado a como hacer portales o plataformas de cursos online (esos donde colocan video) tipo hotmart , udemy.. etc.

@dracogamesoficial 8 ай бұрын

cuando entras a una playlist sale 3h aproximadamente en todas

@thecoderbutcher 7 күн бұрын

Alguno que lo este haciendo pero en nextjs sabe como se le podria poner lo de la transicion sin agregar alguna libreria extra? Creo que tailwind no tiene algo parecido ni tampoco nextjs por lo que estuve leyendo pero si alguien le encontro la vuelta?

@thecoderbutcher 4 күн бұрын

Hola yo del pasado, puedes usar next-view-transitions, no es lo mejor pero te servira. Tambien hechale un vistazo a zustand que te servira para mantener la reproduccion manipulando estados globales.

@sntlln93 2 ай бұрын

Pensé que se me había cortado la luz 01:14:00 🤣

@didierlugo7892 7 ай бұрын

a mi no me cambia de color los iconos por que sera

@TheAlexis0070 7 ай бұрын

A mi tampoco me sirve, pero en otro comentario un chico lo pudo solucionar. Agrega la clase "fill-current" en el link del componente SideMenuItem

@didierlugo7892 7 ай бұрын

@@TheAlexis0070 sigue sin funcionar no que que hago mal jajajaj

@TheAlexis0070 7 ай бұрын

@@didierlugo7892 En los iconos SVG, agrega la propiedad fill="currentColor", intenta de esa manera. Por ejemplo el icon Time.astro lo tengo así: ...

@LKPablo678 3 ай бұрын

Es posible que falle a la hora de instalar las dependencias? Esque me da estos errores si sigo tus pasos al principio: ▲ error Dependencies failed to install, please run npm install to install them manually after setup. -------- Y como soy un poco nuevo no se que dependencias me tengo que instalar.

@DanKayser 29 күн бұрын

¿Qué pasos has realizado al comenzar el proyecto?

@davidsepulveda4325 7 ай бұрын

Queremos la parte 2

@davidrivas6625 8 ай бұрын

Siuu, gracias

@midulive 8 ай бұрын

Gracias a ti!

@alejandroramos9949 8 ай бұрын

Te amo

@josepazmino842 7 ай бұрын

¿Qué herramienta utiliza para ver los pixeles?

@pepito7773 6 ай бұрын

Creo que es propio de Mac

@hernanarica6389 8 ай бұрын

Por que lo hiciste con astro? En su documentación dicen que no recomiendan astro para apps

@sistana 8 ай бұрын

Hay algo que no entiendo. Por qué usar componentes de react, svelte, etc. Desde mi perspectiva, es válido si tienen cierta complejidad y si ya los tengo hechos con alguno de estos frameworks, pero sino, ¿no es mejor hacerlos con el propio Astro?. De antemano mil gracias por tu video que esta excelente.

@samu350 7 ай бұрын

Lo usarías para las partes interactivas del site, es mejor manejar esos detalles con un framework que usar vanilla TS/JS.

@sistana 7 ай бұрын

Completamente claro, mil gracias!! @@samu350

@SquadronYT 8 ай бұрын

El GRAN problema de BUN es que no funciona nativamente en windows, osea, lo mismo que nada...

@user-mc7di7xn8d Ай бұрын

3 hora madre mia

@yari3061 6 ай бұрын

Para desabilitar la barra de astro teclea en la consola "npx astro preferences disable devToolbar" en caso de usar npm como administrador de paquetes

@raulman0852 6 ай бұрын

que buen video, una pregunta. Que terminal usa??

@victorgarrido6346 6 ай бұрын

Es Warp, está para macos, no se si para Windows o linux

@FabianD1991 8 ай бұрын

Svelte ❤

@tomivm 7 ай бұрын

Tremendo video. Que lastima que transition persist no funcione en mozilla.

@midulive 7 ай бұрын

Por ahora

@matic7188 8 ай бұрын

siuuu

@matic7188 8 ай бұрын

@Miscafer 2 ай бұрын

Hola gente, por si alguna tiene error con el tema del audio usando useRef (que suene el reproductor), aquí les paso una alternativa solo reemplazando lo de adentro del handleClick: const handleClick = () => { const audio = new Audio('/music/1/01.mp3'); if (isPlaying) { audio.pause(); } else { audio.play(); } setIsPlaying(!isPlaying); } de resto lo dejan igual y eliminan si algo la etiqueta audio del html y el audioRef🤘🏻

@luisberoiza227 6 ай бұрын

tengo dudas con respecto a este codigo #app { display: grid; grid-template-areas: "aside main main" "player player player"; grid-template-columns: 350px 1fr; grid-template-rows: 1fr auto; } aqui se defineron 3 columnas grid-template-areas: "aside main main" "player player player" pero solo se le esta definiendo el tamaño a dos grid-template-columns: 350px 1fr; por qué no hay error?

@GaloPapah 4 ай бұрын

Yo entiendo que, como son dos main se entiende que es un mismo componente que usa dos columnas, por eso el ancho es en px en el aside, pero en el main le pide ocupar el ancho restante.

@luisberoiza227 4 ай бұрын

@@GaloPapah yo hubiese puesto grid-template-areas: "aside main" "player player"

@FrancoAguileradonillan Ай бұрын

5:04 le salio el argentino de adentro

@frangomez2747 7 ай бұрын

Muy mal Midu, escuchando música de mi amigo Rafa Pons y no escuchando mi música ... en fin ... deberías echarle una escucha, que está en Spotify!

@midulive 7 ай бұрын

Preséntame a Rafa Pons y escucho tu música 🤣

@joseeavr 8 ай бұрын

Bun + Vite 🤯

@erickmunoz1355 3 ай бұрын

Cómo es que cambia tan rápido entre ventanas?

6 ай бұрын

Ahora con Vue 😂

@Viiper_Oficial Ай бұрын

Name de la app

@allker1192 28 күн бұрын

Spotify 2

@miguelsirna 8 ай бұрын

falta mucho aun

@VieraMaster 8 ай бұрын

hijo de tu madre das miedo creando un clon de spotify en 3 horas y media madre mía

@allsunday1485 8 ай бұрын

Por que usas img en lugar del componente Image de Astro que optimiza imagenes?

@ammarali8432 8 ай бұрын

primero

@kevjimenez9809 3 ай бұрын

el buscador :c chmr

@snithfferx 6 ай бұрын

Ya te ves como chat gpt. A la empresa le toma varios empleados y horas de programacion y a midu le toma 3 horas.

@nahuellescano 8 ай бұрын

Hice algo más fácil, cloné tu repo y me robé tu carpeta xD