Clon de Spotify DESDE CERO con Astro 3, React JS, Svelte y TailwindCSS
midulive
@miduliveAbout
Vídeos sobre tecnología, programación, noticias de desarrollo y salseos.
Latest Posts
Video Description
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: https://www.twitch.tv/midudev ▶ Repositorio: https://github.com/midudev/spotify-twitch-clone 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
You May Also Like
Slime-Making Must-Haves
AI-recommended products based on this video

ESR for iPhone 16 Case, Military-Grade Protection, Shockproof Air Guard Corners, Yellowing-Resistant Acrylic Back, Phone Case for iPhone 16, Air Armor Series, New Clear Blue

Yarxiawin Phone Case for Samsung S25 Case with Ring Stand Magnetic Compatible with Magsafe Wireless Charger, Pink Bumper Cover Samsung Galaxy S25 Case Clear Shockproof (Blue)

GuaGua for Galaxy S25 Case Samsung S25 Case Glow in The Dark Noctilucent Luminous Cover Space Nebula Slim Thin Shockproof Protective Phone Cases for Samsung S25, Purple/Blue

LEGO Marvel Spider-Man's Car and Doc Ock Building Set, Spidey and His Amazing Friends Buildable Toy for Kids 4 Plus Years Old with Glow in The Dark Pieces, 10789

Kids Rock Painting Kit - Glow in The Dark - Arts & Crafts Easter Gifts for Boys and Girls Ages 4-12 - Craft Activities Kits - Creative Art Toys for 4, 5, 6, 7, 8, 9, 10, 11 & 12 Year Old Kids

Sukakimi Fort Building Kit, Glow In The Dark 155 Pcs Kids Fort Building Kit Construction Toys Diy Crazy Forts Indoor Outdoor For 4,5,6,7,8,9,10 Years Old Boys Girls

Pink Unicorn Carrying Case Compatible with Nintendo Switch Lite with Crystal Glitter Soft Protective Case Cover+Screen Protector+Stickers, Hard Storage Case Accessories Kit for Girls Birthday Gift

Pure Future 20-Pack Reusable Double Compartment Snack Containers with Lids – Leakproof, BPA-Free – Portable for Snacks, Dips, Lunch, Travel & Camping

Amazon Fire HD 8 Kids Pro tablet, ages 6-12 | 3GB memory, 8" HD screen, slim case for older kids, ad-free content, parental controls, 13-hr battery, 32GB, Hello Teal, (2024 release) Recycled Content Certification for Electrical and Electronic Equipment




















