Web Personal MERN Full Stack: MongoDB, Express, React y Node

Introducción9 clases

Introducción

Repositorio de la aplicación

Una charla antes de empezar

¿Que es el Stack MERN, MongoDB, ExpressJS, ReactJS y NodeJS?

¿Por que usamos React JS?

¿Por que usamos Node JS?

¿Por que usamos Express JS?

¿Por que usamos MongoDB?

¿Por que usamos el ODM Mongoose?

Entorno de desarrollo6 clases

Seleccionando el Navegador

Instalando Insomnia Cliente API

Seleccionando el Editor de Código

Instalando las Extensiones en Visual Studio Code

Instalando Node JS

Instalando YARN

Conceptos básicos de React JS15 clases

¿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

Inicializando el proyecto - BACKEND8 clases

Creando el proyecto

Creando un cluster Mongo Atlas

Mongoose conectando la app con la base de datos

Creando el servidor HTTP con express

Recargando el servidor automaticamente

Configurando Body Parse

Configurando carpeta de estáticos

Configurando las CORS

Sistema de autenticación - BACKEND6 clases

Creando nuestro primer endpoint

Modelo del usuario

Registrado usuario

AccessToken y RefreshToken

Refrescando el AccessToken

Sistema de usuarios - BACKEND8 clases

Estructura api user

Middleware de autenticación

Obtener los datos del usuario logeado

Obtener todos los usuario

Creando usuarios

Procesando imagen

Actualizando usuario

Eliminando usuario

Sistema de menus - BACKEND6 clases

Modelo menu

Estructura api menu

Creando menu

Obteniendo menus

Actualizando menu

Eliminando el menu

Sistema de cursos - BACKEND7 clases

Modelo cursos

Estructura api curso

Creación del curso

Obtener cursos

Paginación de cursos

Actualizando cursos

Eliminar cursos

Sistema del blog - BACKEND7 clases

Modelo el post para el blog

Estructura api blog

Creación de post

Obtención y paginación de los posts

Actualización de los posts

Eliminar post

Obtener un post por su path

Sistema del newsletter - BACKEND5 clases

Modelo newsletter

Estructura api newsletter

Registrar email en la newsletter

Obtener todos los email con paginación

Eliminar un registro por el email

Inicializando el proyecto - FRONTEND7 clases

Creando el proyecto de React

Instalando SASS

Instalando Semantic UI React

Instalando Lodash

Instalando Formik y Yup

Variables de SASS

Assets

Sistema de rutas - FRONTEND7 clases

Instalando React Router Dom

Separando Zona Admin de la Web

Añadiendo layouts a las rutas

Separando Auth del AdminPanel

Una pagina dos paths

Creando las páginas del admin

Creando las páginas de la web

Sistema de autenticación - FRONTEND8 clases

Zona de login y registro

Formulario de registro

Controlando formulario con formik

Validando formulario con Yup

Registrando usuario

Formulario para login

Validando formulario

Realizando login

Sistema de sesión - FRONTEND7 clases

Contexto y hook para la sesión

Generando la sesión

Obteniendo los datos del usuario

Guardando y obteniendo token del localstorage

Recuperando sesión del usuario

Recuperando la sesión completa

Cerrar sesión

Panel de administración - FRONTEND5 clases

Estructura del panel

Admin Menu

Activando menu activo

Permisos para los menus

Logout

Sistema de usuarios - FRONTEND13 clases

Estructura de la página

Modal para poder mostrar formularios

Formulario para crear usuarios

Controlando y validando formulario

Controlando la imagen del usuario

Creando el usuario

Obteniendo los usuarios activos e inactivos

Renderizando los usuarios

Recargando usuarios al crear uno

Formulario para actualizar usuario

Actualizando el usuario

Desactivando y activando usuarios

Eliminando usuario

Sistema del menu - FRONTEND9 clases

Estructura de la página

Obteniendo menus activo e inactivos

Listando menus

Formulario para crear menus

Controlando y validando el formulario

Creando el menu

Actualizando el menu

Activar y desactivar menu

Eliminar menu

Sistema de cursos - FRONTEND10 clases

Estructura de la página

Obteniendo todos los cursos

Listando los cursos

Añadiendo paginación

Formulario para crear cursos

Controlando la imagen

Controlando y validando el formulario

Creando el curso

Actualizando curso

Eliminar un curso

Sistema newsletter - FRONT5 clases

Estructura de la página

Obteniendo todos los emails

Listando emails

Añadiendo paginación

Eliminando un registro

Sistema del blog - FRONTEND10 clases

Estructura de la página

Obteniendo posts

Listando posts

Añadiendo paginación

Formulario para crear post

Añadiendo editor TinyMCE

Controlando y validando formulario

Creando un nuevo post

Actualizando post

Eliminando post

Client Layout - FRONTEND5 clases

Estructura del layout

TopBar

Footer - Info

Footer - Menu

Footer - Newsletter

Página principal - FORNTEND4 clases

Banner

Ultimos cursos

HowMyCoursesWork

Reviews

Pagina de los cursos - FRONTEND4 clases

Obtener todos los cursos

Estructura de la pagina

Renderizando cursos

Creando paginación

Página del blog - FRONTEND7 clases

Obteniendo los posts

Estructura del listado de posts

Renderizando posts

Paginando posts

Paginación persistente

Obteniendo el post visitado

Renderizando post

Desplegando aplicación3 clases

Cambiando el favicon

Subiendo Servidor a Heroku

Subiendo Cliente a Netlify

Web Personal MERN Full Stack: MongoDB, Express, React y Node

Contenido del curso

Comentarios de los estudiantes

Valoraciones

Este curso incluye:

Instructor del curso