Herramientas y entorno de desarrollo
Instalación del Navegador
Instalando React Developer Tools en Google Chrome
Seleccionando el Editor de Código
Instalando Extensiones en Visual Studio Code
Instalando Node JS
Instalando YARN
Instalando Electron JS
Conceptos básicos
¿Qué vamos hacer en esta sección?
Introducción a JSX
Conceptos básicos de React JS
Creando nuestra primera app en React JS
Estructura de React JS
Nuestro primer Componente en React JS
¿Que son los Props de React?
Pasando props básicos entre componentes
Pasando variables y objetos entre componentes por los props
Pasando funciones entre componente por los props
El uso de la Asignación por Destructuring
Props por defecto
Template Strings
Hook de estado - useState
Hook de efecto - useEffect
Creando y configurando la App
Creando nuestra App de React JS
Añadiendo Electron JS a nuestra App en React JS
Solucionar Warning Content-Security-Policy
Añadiendo proyecto de Firebase a nuestra App
Añadiendo React Developer Tool
Creando un proyecto nuevo en Firebase
Añadiendo fichero SASS al nuestra app
Creando sistema de variables con SASS
Instalando React Router Dom para crear sistema de rutas
Instalando Semantic UI React
Sistema de Login y Registro de usuarios
Control de usuarios logeado o no logeados
1/2 - Página para seleccionar Login o Registro de usuario
2/2 - Página para seleccionar Login o Registro de usuario
Añadiendo el los botones de Login y Registro
1/2 - Creando el formulario de Registro de usuarios
2/2 - Creando el formulario de Registro de usuarios
Guardando los valores del formulario en un estado
Funcionalidad para mostrar o ocultar la contraseña
Validando formulario de Registro de Usuarios
Registrado usuario en Firebase
Creando Toast para notificar al usuario
Actualizando el nombre del usuario al darse de alta
Sistema de verificación de cuenta por email
Creando el formulario de Login
Funcionalidad para mostrar o ocultar la contraseña
Guardando datos del formulario de login en un estado
Validando formulario de login
1/2 - Realizando login y avisando si el usuario no tiene la cuenta verificada
2/2 - Realizando login y avisando si el usuario no tiene la cuenta verificada
Añadir Loading al botón de Iniciar sesión
Panel usuario logeado
Creando el Layout para usuario logeados
Creando sistemas de rutas con React Router Dom
Menu Lateral
Creando la estructura del menu lateral
Añadiendo Links al menu
Sistema para mostrar el menu activo en todo momento
Sistema de permisos para mostrar los botones de añadir Canción y Artista
Componente BasicModal
Sistema de modal para añadir artistas y canciones
TopBar de Usuario
Estructura de la barra superior
Desactivar menú activo al entrar en la cuenta del usuario
Funcionalidad para ir atras
Funcionalidad para cerrar sesión
Página de configuración de usuario
Creando el componente Settings
Estructura del cambio de avatar
Logica para subir el avatar
Subiendo Avatar a Firebase y actualizando usuario
Actualizando avatar del TopBar al subir un nuevo avatar
Estructura para actualizar el nombre del usuario
Abriendo un modal para actualizar el nombre del usuario
Creando el formulario para actualizar el nombre del usuario
Lógica para actualizar el nombre del usuario en Firebase
Interface para actualizar el email del usuario
Creando formulario para cambiar email y abriéndolo en el modal
Mostrando y ocultando contraseña con el icono
Guardando el email y la password en un estado
Reautenticando usuario para poder cambiar el email
Función para controlar los errores de Firebase
Actualizando email firebase y seguridad antirrobo de cuentas
Interface para actualizar la contraseña del usuario
Creando formulario para cambiar la contraseña y abriéndolo en el modal
Funcionalidad para mostrar y ocultar todas las contraseñas
Guardando la información del formulario en un estado
Validando formulario antes de cambiar la contraseña
Reautenticando usuario para poder cambiar la contraseña
Actualizando contraseña en Firebase
Sistema de Artistas
Creando formulario para crear un nuevo artista
Habilitando la subida de imágenes para el artista
Mostrando la imagen subida en el banner y en el avatar
Guardando los datos del formulario en un estado
Validando formulario
Subiendo la imagen del artista al Storage de Firebase
Subiendo los datos de artista a Firebase
Añadiendo banner principal en la home
Obteniendo todos los artistas de Firebase
Creando un slider con React Slick
Pintando los artistas dentro del slider
Añadiendo el evento de click a cada artista para ir a su página
Obteniendo la información del artista seleccionado
1/2 - Pintando el banner con la información del artista
2/2 - Pintando el banner con la información del artista
Creando la página de artistas
Obteniendo todos los artistas de Firebase
Obteniendo las imágenes de todos los artistas
Mostrando todos los artistas en la aplicación
Sistema de Álbumes
Formulario para añadir nuevo Álbum
Añadiendo useDropzone para el avatar el album
Añadiendo Artistas disponibles al Dropdown
Guardando toda la información del formulario en un estado
Validando formulario
Subiendo imagen del álbum al Storage
Subiendo álbum a Firestore
Obteniendo todos los álbumes de Firebase en la home
Pintando el slider de álbumes
Creando la página de Álbumes y añadiéndola al menú lateral
Obteniendo los datos de todos los álbumes
Creando el Grid de álbumes
Obteniendo todas las imágenes de los álbumes
Pintando el listado de álbumes
Creando la página de Álbum y añadiendola a las rutas
Obteniendo toda la información el álbum seleccionado
Obteniendo la URL de la imagen del álbum
Obteniendo la información del artista del álbum
Renderizando todos los datos en la página
Obteniendo Albumes del artista en su perfil
Pintando todos los álbumes del artista
Reproductor de música
Creando el componente Player e instalando react-player
Creando la estructura del player
Mostrando la canción que se esta reproduciendo
Controles de música y linea de tiempo
Añadiendo el sistema de volumen
Añadiendo React Player
Pruebas sobre el Player
Sistema de Canciones
Creando el componente AddSongForm para subir música
Estructura del formulario
Obteniendo todos los álbumes y usandolos en el Dropdown
Añadiendo una zona para subir la música
Guardando toda la información del formulario en un estado
Validando formulario
Subiendo canción al Storage de Firebase
Subiendo todos los datos a firestore
Obteniendo 10 canciones subidas a firebase en al home
Componente para renderizar un slider de canciones
Creando el slider de canciones
Obteniendo la imagen del Álbum al que pertenece la canción
Estructura para mostrar todas las canciones
Añadiendo la funcionalidad de reproducción canción
Obteniendo todas las canciones de un artista
Pintando un slider con todas las canciones obtenidas
Obteniendo todas las canciones de un álbum
Creando el componente ListSongs
Creando la estructura de la lista de canciones
Renderizando todas las canciones obtenidas
Añadiendo la funcionalidad de reproducción de canciones a la lista
Configuración de Electron
Configurando el Ancho y el Alto
Bloquear o no bloquear el resizable de la ventana
App Modo Kiosko
Cambiando titulo de la app
Añadiendo botones de Maximizar, Minimizar y Cerrar la interfaz de nuestra app
Cambiar icono
Compilando nuestra app
Configurando nuestra App para poder compilar
Creando el .dmg para MacOs
Creando el .exe para Windows
Despedida
Repositorio de la aplicación
Clase Extra