R
Raul Gutierrez Vega
El instructor explica con mucha claridad.
PRECIO DE LANZAMIENTO
Full Stack: Node.js, React, TypeScript, NestJS y Next.js
4.4762
(21)
|
410 Estudiantes
|
Certificación internacional
Acceso de por vida
Acceso multiplataforma
Info
USD 300.00
USD 300.00
USD 50.00
Descripcion
Conviertete en desarrollador Full Stack moderno: construye proyectos reales con Node.js, React, TypeScript, NestJS y Next.js, del frontend al backend.
Lo que aprenderas:
- Frontend moderno con React y Next.js
- TypeScript aplicado a frontend y backend
- APIs robustas con Node.js y NestJS
- Bases de datos, autenticacion y despliegue
- Proyectos full-stack de principio a fin
Contenido del Curso
Introduccion al Curso - Proyectos que Construiremos
Proyecto 1 - DevTree - Express, TypeScript, MongoDB, React con Vite
Proyecto 2 - CashTrackr - Express, Node, TypeScript, PostgreSQL y Next.js
Proyecto 3 - Point of Sale (POS) - NestJS, TypeScript, PostgreSQL y Next.js
Introduccion a Node.js
Que es Node.js
Instalar Node en Windows
Instalar Node en Mac
Frameworks de Node.js
Que es Express y sus ventajas
DEVTREE - Primeros Pasos
DevTree - Proyecto que vamos a construir - Demo (Codigo final aqui)
Ejecutando Codigo de Node y Creando el proyecto
Creando nuestro Servidor en Express
Habilitando Modo watch en node de forma nativa o con nodemon
Habilitando sintaxis de ESM en proyectos Node.js
DEVTREE - Introduccion a TypeScript
Que es TypeScript y como anadirlo a nuestro proyecto
Compilar codigo de TypeScript a JavaScript
Separando la creacion del servidor en su propio archivo
Creando un archivo de Routing
DEVTREE - Primeros pasos con Routing
Creando el Routing para Autenticacion
Enviar distinto tipo de Peticiones con Postman o ThunderClient
Habilitar la lectura de datos enviados al servidor
DEVTREE - Anadiendo una base de datos y ORM
Que es un ORM y sus ventajas
Obteniendo una instancia de MongoDB y que es Mongoose
Conectar a nuestra base de datos con nuestro codigo
Introduccion a variables de entorno
Anadiendo Colors para Colores en la Terminal
DEVTREE - Registro de Usuarios
Creando un Schema para la base de datos
Inferencia y Primitive Types en TypeScript
Types e Interfaces en TypeScript
Utility Types en TypeScript, Herencia y mas
Finalizando nuestro Modelo
Registro nuestro primer usuario en la base de datos
Retornar mensajes de respuesta cuando un usuario se registra
Moviendo el codigo para registrar usuarios a una funcion
Anadiendo Types al Routing de Express
Evitar Usuarios Duplicados
Dependencias para Hashear Passwords y como elegir
Hashear passwords de usuarios
Anadiendo el Handle para las cuentas
Validacion con Express Validator - Primeros Pasos
Anadiendo el resto de validacion al Registro de Usuarios
DEVTREE - Autenticacion de Usuarios
Crear Colecciones en Postman y ThunderClient para agrupar nuestros Request
Primeros pasos con la Autenticacion
Revisar si el usuario que intenta autenticar existe
Revisar si el password ingresado es correcto
Que es el Middleware
DEVTREE - Creando el Frontend con React
Que es el MERN stack y creando el proyecto
Instalando Tailwindcss
Configurando React Router para multiples rutas
Navegando entre paginas con React Router
DEVTREE - Registro de Usuarios en React
Creando el Layout Principal para Autenticacion (descarga materiales aqui)
Agregando Estilos a la Navegacion
Anadiendo el Formulario de Registro e instalando React Hook Form
Anadiendo Eventos de React Hook Form y Validacion
Mostrando los Errores de validacion en el Formulario
Creando un Componente para mostrar errores
Anadiendo Reglas adicionales de Validacion
Leyendo los valores ingresados en el Formulario
Enviando la Peticion para registrar usuario
Que son los CORS
Habilitando CORS desde el backend
Anadiendo Variables de Entorno en el Cliente
Mostrando los mensajes del Backend en un Toast
Creando un Cliente de Axios para realizar peticiones a la misma URL
DEVTREE - Autenticacion de Usuarios en React
Anadiendo el Formulario y useForm
Mostrando los mensajes desde el backend
DEVTREE - Autenticacion con JSON Web Tokens
Que son los JSON Web Tokens (JWT)
Ajustando el Backend para permitir peticiones desde React, ThunderClient, Postma
Generando el JWT
Donde almacenar el JWT Cookies o LocalStorage
DEVTREE - Creando el admin de DevTree
Creando el Layout de Administracion
Anadiendo una Navegacion para Perfil y Links
DEVTREE - Panel para Administrar Perfil
Creando el Formulario y Diferencias entre Autenticacion y Autorizacion
Creando un Endpoint en el backend para obtener el usuario Autenticado
Identificando el Usuario autenticado por el JWT
Protegiendo el Endpoint de usuario para que solo usuarios autenticados accedan
Que es React Query o TanStack Query
Primeros pasos con React Query
Utilizando el Hook useQuery
Propiedades de useQuery data, isLoading, error, isError y mas
Enviando la peticion con el JWT en React Query
Anadiendo el JWT en un Interceptor de Axios
Proteger el Panel de Administracion si un usuario no esta autenticado
Obteniendo la informacion del usuario y mostrandola en el componente
Trabajando con el Formulario de Edicion de Perfil
Llenando el Formulario y reutilizando consultas con React Query
Validacion en el Formulario de Editar Perfil
Creando el Endpoint en el Backend para actualizar el perfil
Permitir al usuario cambiar su handle
Escribiendo la Funcion en React que actualizara el Usuario
Actualizando la informacion y mostrando un Toast
Invalidar los datos cacheados y hacer un re-fetch con React Query
DEVTREE - Subir Imagenes de Perfil
Primeros Pasos y Crear Cuenta en Cloudinary
Agregando las credenciales de Cloudinary en el backend
Leyendo Imagenes con Formidable
Subiendo imagenes en Cloudinary
Asignando la Imagen al Usuario Autenticado
Leyendo El archivo que se sube en React
Enviando la imagen con Axios y React Query
Mostrando la Informacion del Perfil e Imagen
Actualizaciones Optimistas con React Query
DEVTREE - Creando el Area de Enlaces para DevTree
Agregando el Array de Redes Sociales
Mostrando el Formulario de Redes Sociales
Anadiendo un Switch para Habilitar y Deshabilitar Redes Sociales
Identificando la red social en la que estamos escribiendo
Almacenando los enlaces en las redes sociales
Habilitando Deshabilitando enlaces de nuestro Tree
Detectando si una URL es valida antes de habilitarla
Anadiendo links a nuestro modelo de usuarios
Almacenando los Enlaces en la base de datos
Recuperando los enlaces de la base de datos y llenando el Formulario
Mostrando los enlaces habilitados en nuestro perfil
Anadiendo CSS a los Enlaces habilitados de nuestro perfil
Live Preview de Redes Sociales Habilitadas Deshabilitadas
DEVTREE - Anadiendo Orden a tus Enlaces
Veamos como anadir el orden a nuestros enlaces de DevTree para anadir DragNDrop
Anadiendo un Orden a cada Enlace
Actualizando el Orden al habilitar y deshabilitar redes sociales
Evitar ID's duplicados
Finalizando la logica del Orden
DEVTREE - Drag N Drop a tus enlaces de DevTree
Instalando la dependencia
Anadiendo los Componentes Principales
Anadiendo la funcionalidad de Drag
Anadiendo la funcionalidad de Drop
Actualizando el Orden al soltar
DEVTREE - Creando el Enlace para Compartir tu DevTree
Creando la pagina para Compartir tus enlaces
Registrando la ruta en el backend
Consultando la base de datos y mostrando la informacion
Consultando el Tree con React Query
Creando una pagina 404
Creando los Types para la pagina de Handle
Mostrando Handle, Imagen y Descripcion
Mostrando los enlaces activos del Usuario
DEVTREE - Finalizando el Proyecto Creando la pagina Principal
Creando la pagina principal y Navegaciones
Creando un Componente re-utilizable para el Logo y Navegaciones
Primeros pasos con la pagina principal
Anadiendo la imagen de fondo en el inicio
Anadir buscador de Handles en la pagina principal
Generando Slug en el buscador de Handles
Creando la ruta para revisar si el handle esta tomado o disponible
Anadiendo funcionalidad para ir al registro
Llenar el Handle desde el Home si esta disponible
Cerrando sesion del usuario
Ultimos ajustes
DEVTREE - Deployment del Proyecto
Deployment Frontend
Deployment Backend
CASHTRACKR - SaaS de Administrador de Presupuestos (Express y Next.js)
El Proyecto que vamos a construir (Codigo Final Aqui)
Comenzando el Proyecto
Arquitectura Model View Controller (MVC)
Que es Sequelize Y creando una base de datos PostgreSQL
Conectando nuestra base de datos con nuestra aplicacion
CASHTRACKR - Presupuestos - CRUD, Router, Validacion y mucho mas
Creando el Modelo de Presupuestos
Introduccion a REST API's
Creando el Router de Presupuestos
Creando el Controlador de Presupuestos
Agregando todas las Rutas y Metodos de Controlador
Creacion de Presupuestos
Agregando validacion a la creacion de Presupuestos
Obtener los Presupuestos y Filtrados en Sequelize
Obtener un Presupuesto por su ID
Actualizar un Presupuesto por su ID
Eliminar un Presupuesto por su ID
Simplificando el Codigo con Middlewares
Verificar que un Presupuesto exista con Middleware
Aplicando los Middleware a edicion
Utilizando el Middleware para eliminar
Llamando los Middleware automaticamente con Params
Creando Middleware para validar la creacion de Presupuestos
CASHTRACKR - Gastos - CRUD, Router, Controllers, Validacion y mucho mas
Creando el Modelo de Gastos
Agregando las rutas y metodos de Controlador
Creando Gastos y asignandoles un Presupuesto
Mostrando los gastos que pertenecen a un presupuesto
Creando un Middleware para validar el ID de gastos
Creando un Middleware para validar que un Gasto Exista
Actualizacion y eliminacion de Gastos
CASHTRACKR - Autenticacion - Registro de Usuarios
La base de datos de CashTrackr y Creando el Modelo de Usuarios
Relacionando Usuarios con Presupuestos
Creando Router y Controlador para Autenticacion
Validacion en el Registro de Usuarios
Registrando Usuarios
Revisar que un usuario exista antes de registrarlo
Hashear los passwords de los usuarios
Generando un Token para confirmar la cuenta
Mailtrap y Nodemailer para enviar emails
Configurando Mailtrap en nuestro proyecto
Creando el Archivo para enviar emails y pasando informacion desde el Controller
Enviando el Email de Confirmacion de Cuenta
CASHTRACKR - Autenticacion - Confirmar cuenta
Creando la ruta y Metodo para confirmar la cuenta
Validando que el Token exista y Confirmando la cuenta
Rate Limiting a las peticiones
CASHTRACKR - Autenticacion - Iniciar sesion
Creando Routing y Metodo de Controlador para autenticar usuarios
Revisar que el usuario exista
Revisar si el usuario ya confirmo su cuenta
Revisar si el password ingresado por el usuario es correcto
Generando un JSON Web Token (JWT) si la autenticacion fue correcta
Aplicando Limiter de forma global a la autenticacion
CASHTRACKR - Autenticacion - Reestablecer Password en caso de olvidarlo
Primeros pasos con Reestablecer Password
Validar que el usuario exista, generar Token y enviar email
Validando el Token del Usuario
Reescribir el nuevo password y limpiar el Token
CASHTRACKR - Autenticacion - Obtener Usuario Autenticado con JWT
Creando el Routing y Metodo de Controlador para el usuario
Enviar y Validar el JWT por Headers
Obtener los detalles del usuario con el JWT
Moviendo el Codigo hacia un Middleware
CASHTRACKR - Autenticacion - Modificar Password de Usuario Autenticado
Agregando Router y Metodo de Controlador
Revisando si el password actual es correcto
Almacenando el nuevo password del usuario
Creando un Endpoint para revisar el password del usuario
CASHTRACKR - Presupuestos y Usuarios - Seguridad
Asignando el Usuario al Presupuesto creado
Obtener Presupuestos del Usuario Autenticado
Evitar que un usuario acceda a un presupuesto de otro usuario
Evitar que un usuario actualice presupuestos de otros usuarios
CASHTRACKR - Testing - Unit Testing o Pruebas Unitarias
Que es el Testing y Tipos de Testing
Instalando Jest y primeros pasos
Terminos en Jest - describe, it y test
Terminos en Jest - expect
CASHTRACKR - Testing a Obtener Presupuestos
Anadiendo Presupuestos para Testing
Generando un Mock
Agregando un Mock al Controlador de Gastos
Testing a filtrar gastos por Usuario y su ID
Anadiendo Testing para los otros usuarios
BeforeEach para ejecutar codigo antes de cada prueba
Testeando los posibles errores
CASHTRACKR - Testing a Crear Presupuestos
Testing a la funcion create
Testing a los errores en la creacion de presupuestos
CASHTRACKR - Testing a obtener presupuesto por ID, actualizar y Eliminar
Testing a Obtener por ID
Testing a Actualizar por ID
Testing a Eliminar por ID
CASHTRACKR - Testing a los middleware de Presupuestos
Mostrando error cuando un presupuesto no existe
Testing al middleware que valida si un presupuesto existe
Testing a errores en la validacion del Presupuesto
Testing al Middleware que revisa si un usuario tiene acceso a un presupuesto
Testing cuando un usuario intenta acceder a un presupuesto que no tiene acceso
CASHTRACKR - Testing a Crear Gastos
Testing al metodo de create
Testing a Errores en la creacion de Gastos
CASHTRACKR - Testing a Obtener por ID, Actualizar y Eliminar
Testing a Obtener por ID
Testing a Actualizar por ID
Testing a Eliminar por ID
CASHTRACKR - Testing a los Middleware de Gastos
Creando el archivo de pruebas
Testing a un gasto que no existe
Testing cuando un gasto existe
Testing a errores al obtener un gasto
Testing a Evitar que un usuario anada gastos si no tiene acceso
CASHTRACKR - Testing a Registro de Usuarios
Creando el Archivo y Testing a Usuarios Duplicados
Testing para Crear un Usuario
Testing a las Funciones que son parte del Registro de usuarios
Anadiendo mas asserts al registro de usuarios
CASHTRACKR - Testing a Inicio de Sesion
Testing cuando un usuario no existe
Testing cuando una cuenta no ha sido confirmada
Testing cuando un password es incorrecto
Testing cuando la autenticacion es correcta
Medidas de Testing - Code Coverage
CASHTRACKR - Integration Testing
Que es el Integration Testing
Instalando y configurando Supertest
Escribiendo nuestras primeras pruebas
CASHTRACKR - Integration Testing al Registro de Usuarios
Testing a la validacion
Creando un Mock para revisar si el controller es ejecutado
Mostrando mensajes cuando el email no es valido
Testing a la extension de Password en el registro
Testing cuando todo es correcto y un usuario se registra
Anadiendo un pretest para limpiar la base de datos despues de las pruebas
Testing para evitar usuarios duplicados
CASHTRACKR - Integration Testing a la Confirmacion de Cuentas
Validando si el token se envia vacio
Incrementando el rate-liming para desarrollo
Testing cuando el Token no es valido
Testing para Confirmar una cuenta
CASHTRACKR - Integration Testing para Autenticacion de Usuarios o Login
Validando el Formulario cuando se envia vacio
Validando el codigo de error cuando el e-mail es no valido
Testing cuando el usuario no existe
Testing cuando una cuenta no ha sido confirmada
Segunda forma de probar cuando una cuenta no ha sido confirmada
Testing cuando el password es incorrecto
Testing a un login exitoso y validar el JWT
CASHTRACKR - Integration Testing para Presupuestos
Testing cuando un usuario intenta acceder a presupuestos sin estar autenticado
Obtener el JWT para poder realizar las pruebas en budgets
Testing para acceder a presupuestos con JWT valido
Testing cuando el usuario tiene un token pero no es valido
CASHTRACKR - Integration Testing para Creacion de Presupuestos
Moviendo el Codigo para Autenticar al Usuario en cada prueba
Testing cuando el usuario envia el formulario vacio
CASHTRACKR - Integration Testing para Obtener Presupuesto por ID, Actualizar etc
Testing cuando un usuario sin JWT intenta acceder a un presupuesto
Testing al middleware de Presupuesto ID
Testing cuando un presupuesto no existe
Testing para obtener un presupuesto del usuario por su ID
Testing para Actualizar un Presupuesto
Testing para eliminar un presupuesto
CASHTRACKR - Frontend con Next.js TypeScript Tailwindcss y mas
Que es Next.js
Creando el Proyecto de Next.js
Archivos reservados en Next.js
Sistema de Rutas basado en Archivos de Next.js
Layouts en Next.js
Otros archivos incluidos en Next.js (descarga materiales aqui)
CASHTRACKR - Next.js y Autenticacion - Creando las Paginas Principales
Creando la pagina y Formulario de registro de usuarios
Rendering en Next.js (Client y Server Components)
Moviendo el Formulario hacia un Client Component
Anadiendo Metadata a las paginas
Creando la pagina de Login
Creando la pagina de Olvidaste tu contrasena
Creando el Layout para la autenticacion
Anadiendo el Logotipo al Layout
El Componente de Image en Next.js
Anadiendo un grafico al layout de Autenticacion con Tailwind
Routing en Next.js
Anadiendo Routing entre Login y Registro
Anadiendo routing hacia olvide mi password y finalizando las rutas
CASHTRACKR - Next.js y Autenticacion - Registro de Usuarios desde Next.js
Que son los Server Actions
Creando y ejecutando el primer Server Action
Recuperar los datos del Formulario en el Server Action
Creando un objeto para enviar hacia el backend
Creando un Objeto de validacion en ZOD
Obteniendo los errores de validacion
Creando variables de Entorno para Server Actions
Enviando la peticion con Fetch hacia el Backend
Comunicar un Server Action con useActionState o useFormState
Mostrando los mensajes de error de validacion
Mostrar el mensaje de registro exitoso desde el backend
Creando un Schema de error o success
Limpiar el Formulario despues de un registro exitoso
Ajustando el Email para que lleve al usuario a confirmar cuenta en Next.js
CASHTRACKR - Next.js y Autenticacion - Confirmar la Cuenta de Usuario
Creando el Formulario para ingresar el Token
Almacenando el Token en el State
Creando el Server Action para Confirmar la cuenta
Enviando datos adicionales al server action
Schema de validacion del Token
Enviando la peticion hacia el Backend
Mostrando los mensajes de error en un Toast
Mostrando el mensaje de Cuenta confirmada en un Toast
CASHTRACKR - Next.js y Autenticacion - Inicio de Sesion de Usuarios
Creando el Server Action de Autenticacion
Mostrando los errores de validacion
Enviando la peticion hacia el Backend
Mostrando los errores al tratar de iniciar sesion
Almacenando el JWT en Cookies
CASHTRACKR - Panel de Administracion - Primeros Pasos
Creando la pagina y Layout de Admin
Generando un Data Access Layer (DAL) para identificar el usuario autenticado
Obtener el JWT desde Cookies
Verificar el JWT
Anadiendo un Menu de Opciones en Admin
Cerrar sesion
CASHTRACKR - Next.js y Autenticacion - Olvidaste tu Contrasena
Creando el Server Action y Validacion
Enviar la Peticion hacia el backend
CASHTRACKR - Next.js y Autenticacion - Reestablecer Password
Creando los Formularios para ingresar token y nuevo password
Generando el Server Action para validar el Token
Enviando la peticion hacia el Backend
Mostrando el Formulario de Nuevo Password si el token es valido
Generando el Server Action para resetear el Password
Recuperando el Token para enviarlo en la peticion
Almacenando el nuevo password
CASHTRACKR - Panel de Administracion - Crear Presupuestos
Creando la pagina y Formularios para nuevo presupuesto
Creando el Server Action de Crear Presupuesto
Enviando la peticion y creando presupuesto desde Next.js
CASHTRACKR - Panel de Administracion - Mostrar Presupuestos
Obteniendo los presupuestos del usuario autenticado
Creando una funcion para obtener el token
Listando los Presupuestos
Mostrando la fecha de ultima actualizacion
Mostrando Menu de Opciones para presupuestos
CASHTRACKR - Panel de Administracion - Routing Dinamico para Editar
Que es el Routing Dinamico en Next.js
Obtener el ID del gasto a editar
Consultar la API para obtener el presupuesto
La funcion notFound() de Next.js
Validando el Presupuesto con un schema de ZOD y pagina de editar
CASHTRACKR - Panel de Administracion - Editar Presupuestos
Re-utilizando el Formulario de Crear Presupuesto en la edicion
Llenando los campos del Formulario en edicion
Creando el Server Action para editar presupuestos
Anadiendo Validacion al formulario de editar presupuesto
Enviando la peticion hacia la API
RevalidatePath y revalidateTag en Next.js
Generar los Metadatos de forma dinamica
Evitar consultas dobles con cache
Moviendo la funcion hacia un archivo aparte
CASHTRACKR - Panel de Administracion - Eliminar Presupuestos
Anadiendo un Modal para Elimnar presupuestos
Agregando un Formulario para confirmar la eliminacion y obtener ID
Creando el Server Action para Eliminar
Enviar la peticion para comprobar el password antes de eliminar
Eliminando el Presupuesto
Mostrando el mensaje de exito, redireccion y revalidacion de datos
CASHTRACKR - Panel de Administracion - Mostrar Presupuesto y Crear Gastos
Routing y Obteniendo el Presupuesto
Ajustando el Diseno para la pagina 404
Agregando el Presupuesto ID en la URL
Mostrar y Ocutar Modal
Generando un Component Map
Mostrando el Formulario para agregar gastos
Creando el server action para crear presupuestos
Validando el formulario de crear presupuestos
Enviando la peticion y creando el gasto en el presupuesto
CASHTRACKR - Panel de Administracion - Mostrando Gastos del Presupuesto
Validando los datos con Zod
Mostrando los gastos
Ajustando los schemas
Agregando el Menu para Administrar los gastos
CASHTRACKR - Panel de Administracion - Edicion de Gastos
Mostrando el Formulario
Generando en Endpoint de API para obtener el presupuesto
Consultando la API para obtener el presupuesto (API Route)
Consultando la API para obtener el presupuesto (Modal)
Llenando el Formulario con el gasto a editar
Creando el Server Action para editar
Actualizando el Gasto
CASHTRACKR - Panel de Administracion - Eliminar Gastos
Creando el Modal
Generando el Server Action
Eliminando el Gasto, Cerrando Modal y revalidando datos
Revisar que un gasto pertenezca a un presupuesto
CASHTRACKR - Panel de Administracion - Graficando Porcentaje gastado
Mostrando las cantidades de Presupuesto, Gastado y Disponible
Mostrando el Total Gastado y Disponible
Agregando la grafica
Personalizando la grafica
CASHTRACKR - Panel de Administracion - Preferencias del Usuario
Creando Layout y Routing para las preferencias del usuario
Anadiendo el Formulario para cambiar el password
Modificando el password del usuario
Actualizar Perfil y Reto
SOLUCION RETO - Creando el Endpoint para Actualizar Usuario
SOLUCION RETO - Evitar cambiar el email por el de otro usuario
SOLUCION RETO - Cambiar el Email del usuario
SOLUCION RETO -Mostrar la informacion del Usuario en los Formularios
SOLUCION RETO - Server Action y Validacion en Next.js
SOLUCION RETO - Actualizar desde Next.js
CASHTRACKR - Finalizando el Proyecto
Vamos a finalizar nuestro proyecto!
Deployment del Backend
Deployment del Frontend
POS - NestJS - Introduccion
El Proyecto que vamos a construir (Codigo final aqui)
Que es Nest.JS y Creando el primer proyecto
Los archivos ya incluidos en NestJS cuando creas un proyecto
POS - NestJS - Fundamentos
Que son los Modulos o Modules
Que son los Controladores o Controllers
Que son los Providers y Services
Inyeccion de Dependencias
Decoradores en NestJS
POS - NestJS - Creando Modules, Controllers y Providers
Creando el Module para Categorias
Creando el Controller para Categorias
Creando el Service para Categorias
POS - NestJS - Primeros pasos con Categorias
Creando un Resource para Categorias
Que son los Data Transfer Objects (DTO)
Anadiendo validacion en el DTO
Personalizando la Validacion del DTO
POS - NestJS - Anadiendo TypeORM, Entities y mucho mas
Que es TypeORM
Instalando TypeORM y primeros pasos
Creando una base de datos PostgreSQL
Agregando las credenciales en variables de Entorno
Finalizando la configuracion de la BD y TypeORM
Que son los Entities y Creando el Entity de Categorias
Registrando las Entidades en TypeORM
Registrando el Repositorio en el Service
Amacenando Categorias en la Base de datos
Obtener todas las categorias
Obtener Categoria por ID
Excepciones en NestJS
Pipes en NestJS
Generando un Pipe de Validacion
Actualizando Categorias
Eliminar una Categoria
POS - NestJS - PRODUCTOS - CRUD, Module, Controller, DTO y mas
Creando el entity de Productos
Relacionar Entities en TypeORM
Anadiendo Validacion a Productos
Injectando el Repositorio en el Service de Productos y Categorias
Revisando si la categoria existe
Almacenando los Productos con Categoria
Obtener todos los Productos
Obtener el Total de Productos existentes
Aceptando parametros para filtrar productos por URL
Filtrando Productos por categoria
Adaptando el codigo para evitar repeticion
Limitar la cantidad de Productos con take
Saltar cantidad de registros con skip
Obtener Productos por su ID
Actualizar Productos
Eliminar Productos
POS - NestJS - VENTAS - CRUD, Module, Controller, DTO y mas
Diagrama de Ventas y Creando el Resource
Creando la Entidad con los contenidos de la transaccion
Anadiendo la validacion
Anadiendo los Repositorios y Almacenando las Ventas
Almacenando los Productos que son parte de la venta
Evitar Comprar mas productos de los que hay disponibles
Que son las Transacciones en Bases de Datos
Generando una Transaccion para las ventas
Retornando los errores en un array
Calculando el Total a pagar
Obtener todas las ventas
Anadir parametro para filtrar ventas por dia
Obtener las fechas por dia
Obtener una Venta por su ID
Eliminar ventas por su ID
Restablecer el Stock si una venta es eliminada
POS - NestJS - CUPONES - CRUD, Module, Controller, DTO y mas
Generando el Resource de Cupones y definiendo la entidad
Anadiendo Validacion
Anadiendo fecha de expiracion
Registrando el Repositorio y Almacenando los Cupones
Obtener todos los cupones
Obtener cupon por su ID
Actualizar cupon
Eliminar cupones
Creando un Endpoint para canjear cupones
Revisar si el cupon no ha expirado
Registrando el cupon en el DTO de Ventas
Revisar si el cupon es valido en la venta
Calculando el descuento del total del carrito y porcentaje
POS - NestJS - Seeding a la Base de Datos con Productos
Generando un Module para Seeder
Registrando Repositorios e Inyectando datos de forma masiva
Limpiar la base de datos con Lifecycle Events
Acceder a Imagenes Locales en NestJS (descarga materiales aqui)
POS - Next.js - Comenzando el Proyecto
Creando el Proyecto en Next 16
Limpieza y Primeros Ajustes en el Proyecto
POS - Next.js - Creando la Pagina Principal de la Tienda
Creando el page.tsx de la tienda
Obteniendo la categoria actual
Ajustando el Endpoint de categorias para traer los productos relacionados
Consultando la API por categoria
Generando un Schema de Zod para validar la respuesta de la API
Primeros pasos mostrando los Productos
Formateando los Precios de los Productos
Mostrando las imagenes de los Productos
Creando el Layout de la tienda
Consultando las categorias para la navegacion
Mostrando las categorias y anadiendo Routing
POS - Next.js - Carrito de compras con Zustand
Creando el Store
Agregando Productos y pasandolos al Store
Generando el Schema de Carrito
Anadiendo Productos al carrito
Primeros pasos mostrando los contenidos del carrito en el Sidebar
Mostrando Imagen del articulo seleccionado
Generando Select de Cantidades en base al inventario
Actualizando la cantidad de articulos desde el Select
Eliminar elementos del carrito
Mostrando el carrito solo si hay contenidos
Calculando el Total a Pagar
Mostrando el Total a Pagar
POS - Next.js - Aplicar Cupon de Descuento
Creando el Formulario para ingresar el cupon
Pasando el nombre del cupon hacia el store
Generando un API Route para comunicarnos con NestJS
Validando las respuestas desde el Store
Mostrando sl el cupon fue valido o no
Asignando el Descuento en base al cupon y total de carrito
Mostrando el Descuento
Agregando una funcion para limpiar el carrito
POS - Next.js - Almacenar las Ventas
Creando el Formulario
Creando el Server Action para almacenar las ordenes
Schema de Zod para las ordenes
Enviando la peticion y almacenando las ordenes
Mostrando el mensaje desde el backend con Toast
Limpiar el carrito despues de una venta
Revalidar los datos despues de una venta
Ordenar los Productos desde el backend
POS - Next.js - Panel de Administracion - Listar las Ventas
Creando el Layout de Administracion
Primeros pasos con la pagina que mostrara las ventas
Anadiendo el Calendario para filtrar por fecha
Formateando la fecha como ISO
Configurando React Query en Next.js
Anadiendo un Prefetch a las ventas
Obteniendo las ventas desde el API Route
Consultando las ventas desde Next.js
Realizando la consulta desde la pagina de ventas
Primeros pasos mostrando los contenidos de las ventas
Mostrando imagen y contenido de la venta
Calculando el Total vendido en el dia
Solucionando errores de rendering en cliente y servidor
POS - Next.js - Panel de Administracion - CRUD de Productos, Paginacion y mas
Obteniendo los Productos
Mostrando los Productos en una tabla
Validando desde la URL para anadir paginacion
Primeros pasos creando una paginacion
Agregando botones de Siguiente y Anterior
Routing para Agregar Producto
Agregando el Formulario para crear productos
Creando el Server Action y agregando validacion
Enviando la peticion para nuevos productos
Primeros pasos con la edicion de productos
Consultando la API para obtener el Producto a Editar
Mostrando la informacion del Producto en el Formulario
Creando el Server Action y Actualizando el Producto
Eliminar productos
POS - Next.js - Panel de Administracion - Subida de Archivos NestJS y Next.js
Obtener API Key en Cloudinary
Creando el Provider de Imagenes en NestJS
Creando la funcion que subira los archivos
Importando el Modulo en Productos, Decoradores para Subir archivos y mas
Instalando y Primeros pasos de react-dropzone en Next.js
Creando un FormData para los archivos
Creando el Server Action para subir imagenes
Mostrar la imagen que se sube en el formulario
Anadiendo la Imagen en el Schema de Validacion y DTO
Creando una funcion para resolver imagenes locales o en Cloudinary
Ocultar la imagen actual si hay una nueva en edicion
Mostrando las imagenes en Tienda y Resumen de Ventas
Deshabilitando agregar al carrito si un producto esta agotado
Deployment del Proyecto
Deployment del Backend
Deployment del Frontend
Requisitos
- Conocimientos basicos de HTML, CSS y JavaScript
- Computadora con conexion a Internet estable
- Node.js instalado (se guia la instalacion)
Reseñas generales
4.4762 de 5
21 Puntuaciones
5 star
67%
4 star
14%
3 star
19%
2 star
0%
1 star
0%
Reseñas destacadas
J
Jose Hernandez Reyes
Una gran inversion para mi carrera.
S
SAPTotal Soporte
Explicaciones simples para temas complejos.
M
Miguel Venegas Yañez
Muy buena relacion calidad-precio.
M
Maribel Gòmez Florez
Contenido claro, ordenado y muy aplicable.
N
Naymary Aguilar Guerra
Los proyectos con Node y React son muy completos.
E
Emely Valencia
Excelente para volverse full-stack con MERN.
A
Andrea Lopez Mendoza
Justo lo que necesitaba para mi trabajo.
W
Willy Mestanza Vigo
De cero a aplicarlo en proyectos reales.
W
Wilton Payano
Profesores con experiencia real, se nota.
D
Daniel Jesus Valqui Moya
La calidad del material es excelente.
J
Jorge Espinoza Lara
Buen nivel y ejemplos muy concretos.
G
GONZALO SEGUNDO AGUILERA BASTIAS
Supero mis expectativas, lo recomiendo.
M
Mario V Rojas
Contenido practico y bien estructurado.
J
JAVIER IGNACIO ROZAS GUTIERREZ
Cumplio todo lo que prometia y mas.
N
Natalia Cardenas Paz
Muy completo, con practicas que realmente sirven.
C
Christian Capilla Rodriguez
Por fin entendi React y los Hooks a fondo.
J
Jans Plinio Dávalos Román
Muy buen ritmo y explicaciones claras.
S
Sandra Silva
Bien organizado y al grano.
S
Sergio Campos Rivera
Excelente para quienes empiezan desde cero.
S
Sandra Isabel Silva Miranda
Muy didactico, ideal para autoestudio.
USD 300.00
USD 50.00
PARA MAS INFORMACION
INGRESA TUS DATOS
Completa tus datos solo si estas evaluando inscribirte en este programa.
Parte de una ruta de especialización
Especialización en Desarrollo Web Full Stack Moderna
Inversion
USD 50.00
Duracion46 Horas
EvaluacionSi
CertificadoSi
WebinarsSi
IdiomaEspañol
Aprobacion89%