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

midulive November 13, 2023
Video Thumbnail
midulive Logo

midulive

@midulive

About

Vídeos sobre tecnología, programación, noticias de desarrollo y salseos.

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

Slime-Making Must-Haves

AI-recommended products based on this video

Loading...
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

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

(657)
$12.99
FREE delivery Sat, Jun 14 on your first order
Loading...
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)

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)

(0)
$20.23
FREE delivery Sat, Jun 14 on your first order
Loading...
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

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

(18)
$13.86
FREE delivery Sat, Jun 14 on your first order
50+ bought in past month
Loading...
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

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

(3,122)
$13.42
FREE delivery Sat, Jun 14 on your first order
700+ bought in past month
Loading...
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

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

(4,653)
$24.99
FREE delivery Sat, Jun 14 on your first order
1K+ bought in past month
Loading...
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

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

(9)
$9.99
FREE delivery Sun, Jul 6 on your first order
Loading...
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

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

(2,003)
$37.40
PrimeFREE delivery Mon, Jun 16
Loading...
Pure Future 20-Pack Reusable Double Compartment Snack Containers with Lids – Leakproof, BPA-Free – Portable for Snacks, Dips, Lunch, Travel & Camping

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

(2,547)
$13.99
FREE delivery Sun, Aug 24 on your first order
1K+ bought in past month
Loading...
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

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

(288)
$139.99
FREE delivery Wed, Aug 27
200+ bought in past month
Loading...
Amazon Fire HD 10 Kids Pro tablet (newest model), ages 6-12, 10.1" brilliant screen, parental controls, slim case, 32 GB, Nebula Recycled Content Certification for Electrical and Electronic Equipment

Amazon Fire HD 10 Kids Pro tablet (newest model), ages 6-12, 10.1" brilliant screen, parental controls, slim case, 32 GB, Nebula Recycled Content Certification for Electrical and Electronic Equipment

(951)
$194.99
FREE delivery Wed, Aug 27
400+ bought in past month