Desarrollo Web Full Stack con React

El curso puede se puede desarrollar en ambiente Linux, para un máximo aprovechamiento.

Introducción
 Arquitectura de la aplicación

Configurar entorno de Desarrollo
 Instalar Java, NodeJS, GIT, VSC.
 Instalar Lombok en VSC
 Crear Proyecto de Spring
 Crear primer controlador
 Instalar MySQL y crear base de datos
 Conectar Spring con la base de datos

Autenticación en nuestro sistema
 Modelo entidad relación
 Crear nuestra primera Entity
 Crear modelo para crear el usuario
 Validar el modelo
 Resolver la excepción cuando hay errores de validación
 Hacer el usuario persistente en la base de datos
 Retornar un modelo después de crear el usuario

Spring boot security
 Spring boot security
 Agregar Spring boot security al proyecto
 Crear clase de seguridad
 Crear authentication filter para security
 Encriptar password del usuario
 Finalizar el authetication filter
 Probar que se esté generando el token
 Acceder a variables de configuración desde el código
 Devolver el token en la response
 Crear Authorization Filter para security
 Crear endpoint para retornar el usuario
 Crear anotación para validar email único

Tests para autenticación
 Configurar entorno para testear la aplicación
 Escribir nuestro primer test
 Escribir tests para probar el inicio de sesión
 Escribir tests para probar el registro
 Finalizando tests para el registro
 Escribir tests para el endpoint del usuario

React
 Crear aplicación de React
 Estructurar aplicación de React
 Crear página para crear una cuenta
 Enviar formulario al backend
 Solucionar error de CORS y crear usuario
 Establecer el idioma en axios
 Crear página de inicio de sesión

State
 Como vamos a utilizar el state en nuestra app
 Crear el state para autenticación
 Crear contexto para el state de autenticación
 Probando que toda la configuración funcione

React router
 Instalar react-router-dom
 Crear rutas de la aplicación
 Crear menú de navegación
 Corregir warnings
 Enviar cambios al repositorio local

Crear encuestas
 Como vamos a estructurar el formulario dinámico
 Definir entidades para las encuestas
 Crear PollController
 Definir modelos para crear una encuesta
 Probar que se haga el mapeo de la petición al modelo
 Crear anotación para validar Enum
 Crear encuesta en la base de datos
 Retornar modelo al crear encuesta

Test para crear encuestas
 Testear PollController I
 Testear PollController II
 Finalizar tests de PollController

Crear encuestas
 Crear el state para el formulario de la encuesta
 Crear el contexto para el formulario de la encuesta
 Crear página para crear encuesta
 Construir formulario dinámico
 Construir formulario dinámico parte 2
 Construir formulario dinámico parte 3
 Construir formulario dinámico parte 4
 Crear componente para crear respuestas
 Crear y eliminar respuestas del state
 Eliminar preguntas del state
 Añadir react-tooltip al proyecto
 Ordenar preguntas arrastrando y soltando
 Crear función para ordenar preguntas
 Refactorizar formulario dinámico
 Enviar formulario al backend
 Mostrar un toast al crear la encuesta
 Últimos retoques al formulario de crear encuesta
 Refactorizar código en el frontend

Resolver encuestas
 Como vamos a almacenar las respuestas del usuario
 Estructura de los datos para responder una encuesta
 Creando entities para guardar respuestas de la encuesta
 Crear endpoint para retornar encuesta con preguntas
 Hacer que el endpoint no requiera autenticación
 Manejar el resto de las excepciones
 Definir modelos para enviar respuesta
 Almacenar respuesta en la base de datos
 Probar que se este guardando la respuesta
 Validando el modelo
 Refactorizar el código en el backend

Test para resolver encuestas
 Escribir tests para el endpoint de getPoll
 Crear clase para testear el endpoint de crear respuesta
 Escribir tests para el endpoint de crear respuesta

Resolver encuestas
 Crear página para responder encuesta
 Crear formulario para responder encuesta
 Renderizar preguntas en el formulario
 Notificar al padre cuando se hagan cambios en el formulario
 Crear state para guardar respuestas
 Formatear datos para enviarlos al backend
 Enviar formulario al backend
 Últimos detalles a la página para responder encuesta
 Refactorizar código

Tabla de encuestas
 Crear endpoint para devolver encuestas paginadas
 Finalizar endpoint de las encuestas paginadas
 Crear endpoint para activar y desactivar encuesta
 Crear endpoint para eliminar la encuesta

Test para tabla de encuestas
 Testear endpoint de getPolls
 Testear endpoints para eliminar y activar encuesta

Tabla de encuestas
 Comenzar a crear el panel del usuario
 Crear tabla con encuestas
 Activar y desactivar encuesta en el frontend
 Paginar tabla de encuestas
 Eliminar encuesta
 Mostrar una ventana de confirmación antes de eliminar
 Últimos detalles a la tabla de encuestas

Mostrar resultados
 Crear consulta para calcular resultados
 Crear consulta nativa con JPA y retornar resultados
 Crear endpoint para obtener resultados de una encuesta
 Transformar datos de los resultados
 Refactorizar endpoint de resultados

Test para modulo de mostrar resultados
 Testear endpoint para obtener resultados

Mostrar resultados
 Crear página para ver resultados
 Comenzar a graficar los datos
 Renderizar la gráfica
 Crear opción para seleccionar tipo de gráfica
 Refactorizar gráficas
 Últimos detalles a la página de resultados
 Crear página de NotFound

Lanzar aplicación
 Crear base de datos
 Generar archivo de producción
 Lanzar aplicación de Java
 Solucionar errores
 Crear bucket para lanzar app de React
 Lanzar app de React
 Fin del curso