Electron JS y React JS: Creando un Spotify
Desarrolla una App de Escritorio como Spotify usando React JS, Electron JS, Firebase y SASS
Lo que aprenderás
Este curso cuenta con:
Soporte del instructor
Videos en Full HD
Certificado de Finalización
Garantía de Reembolso
Contenido del Curso
Introducción
Disponible en
días
días
después de inscribirte
Herramientas y entorno de desarrollo
Disponible en
días
días
después de inscribirte
Conceptos básicos
Disponible en
días
días
después de inscribirte
- ¿Qué vamos hacer en esta sección? (1:28)
- Introducción a JSX (3:21)
- Conceptos básicos de React JS (4:22)
- Creando nuestra primera app en React JS (2:54)
- Estructura de React JS (7:45)
- Nuestro primer Componente en React JS (11:27)
- ¿Que son los Props de React? (3:57)
- Pasando props básicos entre componentes (8:55)
- Pasando variables y objetos entre componentes por los props (6:07)
- Pasando funciones entre componente por los props (6:30)
- El uso de la Asignación por Destructuring (4:17)
- Props por defecto (2:11)
- Template Strings (3:15)
- Hook de estado - useState (8:37)
- Hook de efecto - useEffect (5:10)
Creando y configurando la App
Disponible en
días
días
después de inscribirte
- Creando nuestra App de React JS (2:23)
- Añadiendo Electron JS a nuestra App en React JS (9:38)
- Solucionando BROWSER no se reconoce (2:13)
- Solucionar Warning Content-Security-Policy (1:45)
- Creando un proyecto nuevo en Firebase (4:01)
- Añadiendo proyecto de Firebase a nuestra App (8:01)
- Añadiendo fichero SASS al nuestra app (3:50)
- Creando sistema de variables con SASS (16:18)
- Instalando React Router Dom para crear sistema de rutas (3:19)
- Instalando Semantic UI React (4:45)
Sistema de Login y Registro de usuarios
Disponible en
días
días
después de inscribirte
- Control de usuarios logeado o no logeados (12:27)
- 1/2 - Página para seleccionar Login o Registro de usuario (7:05)
- 2/2 - Página para seleccionar Login o Registro de usuario (12:19)
- Añadiendo el los botones de Login y Registro (9:19)
- 1/2 - Creando el formulario de Registro de usuarios (11:06)
- 2/2 - Creando el formulario de Registro de usuarios (8:49)
- Guardando los valores del formulario en un estado (6:49)
- Funcionalidad para mostrar o ocultar la contraseña (3:52)
- Validando formulario de Registro de Usuarios (14:20)
- Registrado usuario en Firebase (7:22)
- Creando Toast para notificar al usuario (12:29)
- Actualizando el nombre del usuario al darse de alta (3:39)
- Sistema de verificación de cuenta por email (9:40)
- Creando el formulario de Login (11:42)
- Funcionalidad para mostrar o ocultar la contraseña (4:13)
- Guardando datos del formulario de login en un estado (4:03)
- Validando formulario de login (6:38)
- 1/2 - Realizando login y avisando si el usuario no tiene la cuenta verificada (9:57)
- 2/2 - Realizando login y avisando si el usuario no tiene la cuenta verificada (9:56)
- Añadir Loading al botón de Iniciar sesión (1:41)
Panel usuario logeado
Disponible en
días
días
después de inscribirte
Menu Lateral
Disponible en
días
días
después de inscribirte
- Creando la estructura del menu lateral (13:09)
- Añadiendo Links al menu (3:48)
- Sistema para mostrar el menu activo en todo momento (9:33)
- Sistema de permisos para mostrar los botones de añadir Canción y Artista (13:07)
- Componente BasicModal (12:07)
- Sistema de modal para añadir artistas y canciones (8:22)
TopBar de Usuario
Disponible en
días
días
después de inscribirte
Página de configuración de usuario
Disponible en
días
días
después de inscribirte
- Creando el componente Settings (6:57)
- Estructura del cambio de avatar (9:09)
- Logica para subir el avatar (11:15)
- Subiendo Avatar a Firebase y actualizando usuario (12:46)
- Actualizando avatar del TopBar al subir un nuevo avatar (7:13)
- Estructura para actualizar el nombre del usuario (7:04)
- Abriendo un modal para actualizar el nombre del usuario (5:36)
- Creando el formulario para actualizar el nombre del usuario (10:34)
- Lógica para actualizar el nombre del usuario en Firebase (10:19)
- Interface para actualizar el email del usuario (6:32)
- Creando formulario para cambiar email y abriéndolo en el modal (8:10)
- Mostrando y ocultando contraseña con el icono (5:19)
- Guardando el email y la password en un estado (4:02)
- Reautenticando usuario para poder cambiar el email (9:45)
- Función para controlar los errores de Firebase (6:52)
- Actualizando email firebase y seguridad antirrobo de cuentas (10:41)
- Interface para actualizar la contraseña del usuario (4:20)
- Creando formulario para cambiar la contraseña y abriéndolo en el modal (6:56)
- Funcionalidad para mostrar y ocultar todas las contraseñas (4:29)
- Guardando la información del formulario en un estado (3:41)
- Validando formulario antes de cambiar la contraseña (6:49)
- Reautenticando usuario para poder cambiar la contraseña (6:51)
- Actualizando contraseña en Firebase (6:06)
Sistema de Artistas
Disponible en
días
días
después de inscribirte
- Creando formulario para crear un nuevo artista (8:14)
- Habilitando la subida de imágenes para el artista (12:42)
- Mostrando la imagen subida en el banner y en el avatar (8:42)
- Guardando los datos del formulario en un estado (3:27)
- Validando formulario (3:50)
- Subiendo la imagen del artista al Storage de Firebase (9:29)
- Subiendo los datos de artista a Firebase (5:41)
- Añadiendo banner principal en la home (13:21)
- Obteniendo todos los artistas de Firebase (10:56)
- Creando un slider con React Slick (13:40)
- Pintando los artistas dentro del slider (13:21)
- Añadiendo el evento de click a cada artista para ir a su página (12:19)
- Obteniendo la información del artista seleccionado (6:45)
- 1/2 - Pintando el banner con la información del artista (8:39)
- 2/2 - Pintando el banner con la información del artista (9:39)
- Creando la página de artistas (4:21)
- Obteniendo todos los artistas de Firebase (8:32)
- Obteniendo las imágenes de todos los artistas (9:50)
- Mostrando todos los artistas en la aplicación (9:57)
Sistema de Álbumes
Disponible en
días
días
después de inscribirte
- Formulario para añadir nuevo Álbum (11:54)
- Añadiendo useDropzone para el avatar el album (12:17)
- Añadiendo Artistas disponibles al Dropdown (14:34)
- Guardando toda la información del formulario en un estado (6:47)
- Validando formulario (3:59)
- Subiendo imagen del álbum al Storage (5:42)
- Subiendo álbum a Firestore (5:51)
- Obteniendo todos los álbumes de Firebase en la home (8:09)
- Pintando el slider de álbumes (8:38)
- Creando la página de Álbumes y añadiéndola al menú lateral (4:57)
- Obteniendo los datos de todos los álbumes (8:15)
- Creando el Grid de álbumes (4:18)
- Obteniendo todas las imágenes de los álbumes (4:22)
- Pintando el listado de álbumes (4:46)
- Creando la página de Álbum y añadiendola a las rutas (5:42)
- Obteniendo toda la información el álbum seleccionado (4:29)
- Obteniendo la URL de la imagen del álbum (5:13)
- Obteniendo la información del artista del álbum (4:50)
- Renderizando todos los datos en la página (12:44)
- Obteniendo Albumes del artista en su perfil (7:54)
- Pintando todos los álbumes del artista (4:34)
Reproductor de música
Disponible en
días
días
después de inscribirte
- Creando el componente Player e instalando react-player (5:13)
- Creando la estructura del player (4:35)
- Mostrando la canción que se esta reproduciendo (5:15)
- Controles de música y linea de tiempo (12:36)
- Añadiendo el sistema de volumen (7:43)
- Añadiendo React Player (6:30)
- Pruebas sobre el Player (13:29)
Sistema de Canciones
Disponible en
días
días
después de inscribirte
- Creando el componente AddSongForm para subir música (3:01)
- Estructura del formulario (6:20)
- Obteniendo todos los álbumes y usandolos en el Dropdown (6:48)
- Añadiendo una zona para subir la música (12:56)
- Guardando toda la información del formulario en un estado (5:52)
- Validando formulario (3:44)
- Subiendo canción al Storage de Firebase (7:26)
- Subiendo todos los datos a firestore (6:35)
- Obteniendo 10 canciones subidas a firebase en al home (7:44)
- Componente para renderizar un slider de canciones (6:55)
- Creando el slider de canciones (8:33)
- Obteniendo la imagen del Álbum al que pertenece la canción (10:11)
- Estructura para mostrar todas las canciones (11:37)
- Añadiendo la funcionalidad de reproducción canción (12:27)
- Obteniendo todas las canciones de un artista (10:22)
- Pintando un slider con todas las canciones obtenidas (3:32)
- Obteniendo todas las canciones de un álbum (6:16)
- Creando el componente ListSongs (3:47)
- Creando la estructura de la lista de canciones (5:53)
- Renderizando todas las canciones obtenidas (3:16)
- Añadiendo la funcionalidad de reproducción de canciones a la lista (3:16)
Configuración de Electron
Disponible en
días
días
después de inscribirte
Compilando nuestra app
Disponible en
días
días
después de inscribirte