Electron JS y React JS: Creando un Spotify

Name: Electron JS y React JS: Creando un Spotify
Rating: 4.5 (353 reviews)

Desarrolla una App de Escritorio como Spotify usando React JS, Electron JS, Firebase y SASS

Highest Rated

Created byAgustin Navarro Galdon

Last updated 4/2026

Spanish

What you'll learn

¡La Biblioteca creada por Facebook! REACT JS
El Framework Electron JS para crear Apps de Escritorio
Juntaremos React JS con Electron JS
Aprende a usar Firesbase, Firestore y Storage
Añadiremos SASS al proyecto
Sistema de Login y Registro
Sistema de seguridad para verificar cuenta y recuperar cuentas
Sistema de permisos y roles
Enrutamiento con React Router Dom
Crearemos un reproductor de música personalizado
Subiremos música al servidor usando Drag & Drop
Subiremos imágenes al servidor usando Drag & Drop
Enlazaremos Artistas con Álbumes y Canciones
Configuraremos la app para poder compilar
Crearemos el .dmg para instalar en Sistemas Operativos MacOS
Crearemos el .exe para poder instalar en Sistema Operativos Windows

Course content

17 sections • 124 lectures • 12h 37m total length

Resultado final de la aplicación3:28
Resultado final de app que conseguirás al acabar el curso.
Repositorio de la aplicación0:33

Instalación del Navegador1:37
Instalaremos el navegador que vamos a usar durante el curso.
Seleccionando el Editor de Código2:48
Seleccionaremos el editor de código con que estaremos trabajando durante el curso.
Instalando Extensiones en Visual Studio Code12:04
Instalaremos extensiones para facilitar la escritura de código durante el desarrollo.
Instalando Node JS3:43
Veremos como descargar e instalar Node JS.
Instalando YARN5:35
Descargaremos e instalaremos el gestor de dependencias YARN.
Instalando Electron JS2:15
Instalaremos Electron JS de menare global en nuestro equipo.

¿Qué vamos hacer en esta sección?1:28
Una explicación de todo lo que vamos a ver en esta sección de Conceptos básicos sobre React JS.
Introducción a JSX3:21
Veremos que es el JSX de React y por que nos facilita mucho a la hora de programar.
Conceptos básicos de React JS4:22
Veremos los conceptos básicos que tiene React para entender mejor como funciona.
Creando nuestra primera app en React JS2:54
Crearemos nuestra primera app con el comando create-react-app.
Estructura de React JS7:45
Veremos toda la estructura de una aplicación de React JS.
Nuestro primer Componente en React JS11:27
Crearemos nuestro primer componente y veremos todas sus partes.
¿Que son los Props de React?3:57
Veremos una explicación de que son los PROPS de React y como funcionan.
Pasando props básicos entre componentes8:55
Pasaremos props básicos de una componente a otro para crear componentes reutilizables.
Pasando variables y objetos entre componentes por los props6:07
Pasaremos variables y objetos por los props de nuestros componentes.
Pasando funciones entre componente por los props6:30
Vamos a aprender como podemos pasar funciones completas entre componentes usando los props de React JS.
El uso de la Asignación por Destructuring4:17
Veremos que es la asignación por destructuring y como no puede ayudar con el manejo de props.
Props por defecto2:11
Podemos definir en nuestros componentes props por defecto en el caso de que no le pasemos ninguno.
Template Strings3:15
Veremos que el Template Strings y como nos puede ayudar a mostrar las variables en los componentes.
Hook de estado - useState8:37
Veremos el uso del hook de estado useState de React.
Hook de efecto - useEffect5:10
Veremos el uso del hook de efecto useEffect de React.

Assets de la app2:55
Contenedor del Auth5:23
Opciones de registro y login5:11
Creando el formulario de registro15:42
Estilos globales para errores en inputs2:23
Estilos globales para el botón primary de un formulario1:39
Controlando formulario con Formik8:43
Validando formulario con Yup8:57
Registrando usuario9:08
Botón para cerrar sesión3:23
Formulario de login10:16
Controlando y validando formulario5:17
Logeando usuario3:15

Estructura de los ajustes7:30
Componente del avatar8:05
Controlando el fichero4:39
Subiendo avatar a firebase7:25
Actualizando el avatar del usuario5:00
Creando el modal8:05
Controlando el contenido del modal5:38
Formulario para cambiar displayName3:36
Controlando y validando formulario4:36
Actualizando displayName2:36
Formulario para cambiar email4:51
Controlando y validando formulario4:13
Actualizando email5:27
Formulario para cambiar la contraseña5:11
Controlando y validando formulario4:53
Actualizando contraseña4:35

Requirements

Nociones básicas de JavaScript
Nociones básicas de React JS

Description

En este curso vas a aprender a crear una aplicación de Escritorio tipo Spotify donde podremos subir Artistas, Álbumes y Canciones, después podremos reproducir cualquier canción, te tengamos subida a la aplicación y podremos controlar el estado de la reproducción y el volumen, directamente desde nuestra app.

Aprenderás a crear tu propio reproductor de música controlado con un Context y un Hooks personalizado creado desde cero.

Crearemos nuestra aplicación desde cero conectando React JS, Electron JS y Firebase.

Cuando tengamos nuestra aplicación terminara aprenderemos a crear el .DMG para MacOS y el .EXE para Windows.

Este curso tiene como objetivo enseñarte a desarrollar cualquier tipo de aplicación de escritorio con React y Electron desde cero.

Estructura del curso

¡La Biblioteca creada por Facebook! REACT JS
El Framework Electron JS para crear Apps de Escritorio
Juntaremos React JS con Electron JS
Aprende a usar Firesbase, Firestore y Storage
Añadiremos SASS al proyecto
Sistema de Login y Registro
Sistema de seguridad para verificar cuenta y recuperar cuentas
Sistema de permisos y roles
Enrutamiento con React Router Dom
Crearemos un reproductor de música personalizado
Subiremos música al servidor usando Drag & Drop
Subiremos imágenes al servidor usando Drag & Drop
Enlazaremos Artistas con Álbumes y Canciones
Configuraremos la app para poder compilar
Crearemos el .dmg para instalar en Sistemas Operativos MacOS
Crearemos el .exe para poder instalar en Sistema Operativos Windows

Who this course is for:

Desarrolladores Web
Programadores de aplicaciones móviles
Programadores de JavaScript
Programadores Frontend
Programadores Backend
Programadores de Node JS
Programadores de React JS
Programadores de React Native
Programadores de Angular
Programadores de Vue JS
Programadores de Angular JS
Programadores de Electron JS

Electron JS y React JS: Creando un Spotify

What you'll learn

Explore related topics

Course content

Introducción2 lectures • 4min

Herramientas y entorno de desarrollo6 lectures • 28min

Conceptos básicos15 lectures • 1hr 20min

Creando y configurando la App8 lectures • 32min

Firebase2 lectures • 13min

Sistema de navegación4 lectures • 33min

Sistema de registró y login13 lectures • 1hr 22min

Layout zona usuario6 lectures • 1hr 3min

Ajustes del usuario16 lectures • 1hr 26min

Sistema de Artistas9 lectures • 1hr 15min

Requirements

Description

Who this course is for: