React Avanzado: Fullstack Next.js, Apollo, MongoDB y GraphQL
- Descripción
- Currículum
- FAQ
- Reseñas
ACTUALIZADO 2020 con React Hooks y Apollo Hooks!
¿Quieres aprender React y GraphQL en un mismo curso? No busques más!! en este curso crearemos una aplicación completa sin tener conocimientos previos de GraphQL, además aprenderás Apollo Client y Server para crear increibles Aplicaciones Web.
Si ya tienes experiencia con React, lleva tus bases hacia el siguiente nivel con un backend hecho con Apollo Server, GraphQL y MongoDB.
Si no estas seguro que es GraphQL, en este curso aprenderás sin conocimientos previos.
Además aprenderás:
-
Queries, Mutations, Resolvers y Schema de GraphQL, que son y crear los tuyos.
-
Integración de GraphQL con React
-
Autenticación JWT con React y GraphQL
-
Apollo Client y Server con Hooks
-
Next.js y Tailwind para el front end de nuestra aplicación
-
Recharts para crear gráficas interactivas
-
Almacenar datos en una base de datos de MongoDB
GraphQL es bastante divertido y fácil de utilizar, junto a Apollo podremos crear aplicaciones web fullstack muy rápido y que sean fáciles de mantener y actualizar con tecnologías modernas.
Este curso es FullStack, por lo tanto crearemos tanto el frontend como el backend.
Sino estas muy seguro que es GraphQL, aprenderás lo siguiente:
-
Crear y definir un Schema y relacionar objetos.
-
Utilizar GraphQL para el Backend y Front End de tus aplicaciones.
-
Aprenderás las distintas etapas y tecnologías, así como sus diferencias: GraphQL, Apollo Client y Server, MongoDB, React y Next.js
-
Crearemos una aplicación completa para administrar clientes, pedidos y productos.
-
Aprenderás a autenticar Usuarios con React y JWT en GraphQL y Apollo
Aprender una tecnología nueva no debe ser algo frustrante! y en este curso iremos paso a paso construyendo una aplicación completa, las herramientas (stack) utilizadas son:
-
GraphQL para Queries, Resolvers, Mutations y Schema.
-
MongoDB y mongoose para almacenar datos en la Base de datos
-
React
-
Next.js y Tailwind para el frontend del sitio web.
-
Formik para validación de Formularios
-
Recharts para graficas
-
Apollo Client y Server con Hooks para conectar nuestra base de datos (MongoDB y nuestro cliente React)
y mucho más!!
-
2
Qué es GraphQL?En este video veamos que es GraphQL
-
3
GraphQL y REST
Veamos algunas diferencias entre GraphQL y REST!
-
4
GraphQL y SQL
En este video veremos algunas diferencias entre GraphQL y SQL
-
5
GraphQL y Apollo
Veamos como se relacionan GraphQL y Apollo
-
6
El código final
En este video puedes descargar el código final
-
7
Obtener Ayuda cuando tu código no funciona
-
10
Creando un servidor de Apollo
Vamos a comenzar con nuestro servidor de Apollo
-
11
Query en GraphQL
Veamos que son los Query en GraphQL
-
12
Mutation en GraphQL
En este video veamos que son los Mutation
-
13
Schema en GraphQL
En este video veremos que es el Schema en GraphQL
-
14
Resolvers en GraphQL
Veamos que son los Resolvers en GraphQL
-
15
Agregando Types y Resolvers en el código
Vamos a añadir Types y Resolvers en nuestro código
-
16
Agregando un segundo Resolver
Veamos como harias para tener un segundo Resolver
-
17
Moviendo los Types y Resolvers hacia su propio archivo
Veamos como ver los Type y Resolvers a su propio archivo
-
18
Inputs o Argumentos para los Resolvers
Veamos como pasar Argumentos hacia tus resolvers!
-
19
Variables en GraphQL
Veamos que son y como se utilizan las variables en GraphQL
-
20
El Context en GraphQL
En este video veremos que es el Context en GraphQL
-
23
Definiendo el Modelo
Vamos a definir el Modelo de Usuarios!
-
24
Creando el Type de Usuarios
Vamos a crear el Type de Usuarios
-
25
Creando el Input de Usuarios
Vamos a crear el Input para la creación de usuarios
-
26
Insertando Usuarios en la base de datos
Veamos como insertar un usuario a la base de datos desde playground
-
27
Hasheando los Passwords
Es importante por seguridad hashear tus passwords, veamos como hacerlo
-
31
Creando el Modelo de Producto
Vamos a comenzar con los Productos de nuestro CRM
-
32
Creando Type, Input y Resolver en el Schema
Ene ste video vamos a crear el Type, Input y Resolver de Productos
-
33
Creando el Resolver para insertar nuevos productos
Vamos a crear el resto del resolver para nuevos productos
-
38
Definiendo el Modelo de Clientes
Vamos a definir el modelo para los clientes
-
39
Definiendo Mutation, Input y Type en el Schema
Vamos a continuar con el Mutation e Input para los Clientes
-
40
Creando el Resolver
Veamos como crear el Resolver para nuevos Clientes
-
41
Asignando Vendedor a Cliente
Veamos como agregar el Vendedor al cliente
-
42
Obtener todos los clientes
Veamos como obtener todos los clientes
-
43
Obtener los clientes asignados a un vendedor
Veamos como obtener los clientes de un vendedor en especifico
-
44
Obtener un Cliente en Especifico
Veamos como obtener un cliente en especifico por su ID
-
45
Actualizar un cliente
En este video veamos como actualizar un cliente
-
46
Eliminar un Cliente
Veamos como eliminar un cliente
-
47
Definiendo el Modelo de Pedidos
Veamos como definir el Modelo de los pedidos
-
48
Definiendo el Pedido en el Schema: Inputs, types y Enums
Veamos como definir el Pedido en nuestro Schema
-
49
Creando el Mutation para nuevos Pedidos
Vamos a crear el Mutation para nuevos clientes
-
50
Revisar que haya articulos en existencia antes de Crear el Pedido
Veamos como revisar si hay la suficiente cantidad de articulos disponibles
-
51
Finalizando el Resolver de Creación de Pedidos
Veamos como finalizar este Resolver
-
52
Obtener todos los Pedidos
En este video veamos como obtener todos los pedidos!
-
53
Obtener los Pedidos por Vendedor
Veamos como obtener los pedidos del vendedor autenticado
-
54
Obtener un Pedido en Especifico
Veamos como obtener un pedido por su ID
-
55
Actualizar un Pedido
Veamos como actualizar un pedido
-
56
Eliminar un Pedido
En este video veamos como eliminar un Pedido
-
57
Obteniendo los Pedidos por su estado
Veamos como obtener los pedidos por su ID
-
61
Creando el Proyecto y SSR de Next.js
Vamos a movernos hacia el Cliente, estaremos creando un proyecto con React, Next.js, Tailwind junto a lo que ya hemos aprendido con GraphQL, Apollo y MongoDB
-
62
Modificando el Head del Proyecto y agregando Tailwind
Veamos como cargar algunas hojas de estilos
-
63
Creando el Sidebar del Proyecto
Veamos como crear el sidebar del proyecto
-
64
Creando el área de contenido principal
Veamos como crear el HTML del área de contenido principal
-
65
Routing en Next.js y creando el Menú de Navegación
En este video veamos sobre el routing de Next.js
-
66
Destacando la página actual en Next.js y Tailwind
Veamos como decirle al usuario en que página se encuentra
-
67
Mostrar un diseño de forma condicional
Veamos como mostrar un diseño de forma condicional
-
68
Creando el Formulario para Login con Next y Tailwind
Vamos a comenzar con los formularios de Login y Nueva Cuenta
-
69
Creando el Formulario para Crear Nueva Cuenta
Ahora veamos como crear el Formulario para Crear una Cuenta
-
70
Añadiendo Formik para el manejo de los formularios
En este video veamos como añadir Formik a nuestro proyecto
-
71
Agregando Yup para la validación
Ahora veamos como añadir YUP para validación
-
72
Agregando el Resto de las validaciones
Vamos a añadir el resto de las validaciones
-
73
Configurando Apollo Client
En este video veamos como configurar Apollo Client
-
74
Instalando y Configurando Apollo Dev Tools
Veamos como instalar y configurar Apollo Dev Tools
-
75
Realizando una consulta de prueba para confirmar que todo funciona
Vamos a probar que todo funcione con una consulta de Prueba
-
76
Creando un Usuario desde el formulario
Vamos ahora si, a insertar un usuario desde el formulario
-
77
Mostrando un mensaje si el usuario ya esta registrado
Veamos como mostrar nuestros mensajes desde el servidor
-
78
Finalizando la creación de Usuarios
Vamos a finalizar con la creación de usuarios desde React
-
79
Trabajando con el Login y Formik
Veamos como trabajar con el Login y formik
-
80
Enviando la petición al servidor con useMutation
Veamos como enviar una petición hacia el servidor con las credenciales de autenticación
-
81
Almacenando el Token en Storage
Veamos como guardar el Token en el Storage
