Udemy

Platform

Español

Language

Web Development

Category

Crea un Instagram con React, GraphQL, Apollo, MongoDB y AWS

Crea tu aplicación completa con React, GraphQL, Apollo Server, Apollo Client, MongoDB, Amazon AWS S3, y Formik.

4.67 (110 reviews)

Students

21.5 hours

Content

May 2021

Last Update
Regular Price

EXCLUSIVE OFFER
Exclusive  Offer
Unlimited access to 30 000 Premium SkillShare courses
30-DAY FREE TRIAL

What you will learn

React JS en profundidad y el uso de Hooks.

Crear aplicaciones completas con React, Apollo y GraphQL.

Como usar de Apollo Client y Apollo Server.

GraphQL, Mutation, Squemas, Resolvers, Query, etc...

Aprenderemos a hacer RealTime con Apollo, React y GrphQL

Formularios con Formik y Yup

Como conectar los S3 de Amazon al servidor y al cliente.

Creamos un S3 Bucket en AWS para guardar todas las imágenes del servidor.

Subiremos desde nuestra app todas las publicaciones a Amazon.

Usaremos MongoDB y Mongoose para guardar los datos.

Aprendemos a usar SASS en un proyecto de React JS.

Veremos como usar variables de entorno.

Aprendemos a usar la biblioteca Semantic UI React para crear nuestra web.

Veremos como crear componentes reutilizables.

Crear aplicaciones FullStack desde el frontend hasta el backend con JavaScript.


Description

Gracias a este curso aprenderás desde los conceptos básicos de React, GraphQL, MongoDB, AWS, hasta lo más avanzado para crear una APP completa desde cero **como un Instagram**._

Una vez terminado el curso serás capaz de crear cualquier tipo de aplicación conectada a una base de datos con GraphQL sin necesidad de ayuda.

También veremos como implementar los S3 de Amazon AWS al proyecto y RealTime.


Que veremos en el curso

  • React JS en profundidad y el uso de Hooks.

  • Crear aplicaciones completas con React, Apollo y GraphQL.

  • Como usar de Apollo Client y Apollo Server.

  • GraphQL, Mutation, Squemas, Resolvers, Query, etc.

  • Aprenderemos a hacer RealTime con Apollo, React y GrphQL

  • Formularios con Formik y Yup

  • Como conectar los S3 de Amazon al servidor y al cliente.

  • Creamos un S3 Bucket en AWS para guardar todas las imágenes del servidor.

  • Subiremos desde nuestra app todas las publicaciones a Amazon.

  • Usaremos MongoDB y Mongoose para guardar los datos.

  • Aprendemos a usar SASS en un proyecto de React JS.

  • Veremos como usar variables de entorno.

  • Aprendemos a usar la biblioteca Semantic UI React para crear nuestra web.

  • Veremos como crear componentes reutilizables.

  • Crear aplicaciones FullStack desde el frontend hasta el backend con JavaScript.




Screenshots

Crea un Instagram con React, GraphQL, Apollo, MongoDB y AWS
Crea un Instagram con React, GraphQL, Apollo, MongoDB y AWS
Crea un Instagram con React, GraphQL, Apollo, MongoDB y AWS
Crea un Instagram con React, GraphQL, Apollo, MongoDB y AWS

Content

Introducción

Resultado final de la aplicación

Repositorio de la aplicación

Preparación del entorno de desarrollo

Navegador

Instalación de Node

Instalación de Yarn

Editor de Código

Extensiones para Visual Studio

Instalando Robo 3T

Creando el servidor

Inicializando el proyecto

Configurando MongoDB

Conectando Mongo Atlas a Robo 3T

Conectando el Server con MongoDB

Creando el servidor de GraphQL con Apollo Server

Explorando Playground

Registro y login de usuarios

Creando el modelo User

Creando el Mutation para registrar usuarios

Guardando el usuario en la base de datos

Encriptando contraseña del usuario

Refactorizando las funciones del resolver

Recargando el servidor al guardar

Creando mutation para el login

Realizando el login y creando el token

Creando la aplicación con React JS

Iniciando nuestra app cliente

Añadiendo Semantic UI React

Añadiendo SASS al proyecto

Conectando la app con el servidor usando Apollo Client

Formularios de registro y login de usuarios

Separando zonas de auth y invitados

Pintando la página de Auth

Creando el formulario de registro

Control de datos del formulario con Formik

Añadiendo el sistema de reset del formulario

Validando formulario con Yup

Registrando usuario en la base de datos

Toast y redirecionando formulario

Creando formulario de login

Añadiendo formik al formulario

Validaciones del formulario de login

Generando el token del login

Guardando el token en el localStorage

API Context para guardar el usuario

Extrayendo los datos del token y guardándoos en el estado

Sistema de Navegación

Instalando React Router Dom

Creando todas las paginas de nuestra aplicación

Creando el sistema de navegación

Rutas dinámicas

Sistema de Layouts

Header

Estructura del header

Opciones del header

Navegando al perfil del usuario logeado

Panel de usuario

Query para obtener los datos de un usuario

Obteniendo los datos del usuario

Solucionando el flash del login al cargar la web

Estructura del perfil del usuario

Usuario no encontrado

Avatar del usuario

BasicModal

Opciones de la actualización del avatar

Abriendo buscador de ficheros

Creando el mutation para actualizar el avatar

Creando una cuenta en Amazon AWS

Creando un Bucket S3 en AWS

Política de bucket para ser publico

AWS Credenciales

Configurando AWS en el servidor

Función para subir imágenes a nuestro S3

Habilitando el envío de ficheros de cliente a servidor

Controlador para subir el avatar del usuario

Obteniendo el Context en el server

Enviando token del cliente al server

Añadiendo el ID del usuario al nombre del avatar

Actualizando avatar en la base de datos

Añadiendo un Spinner y cerrando el modal al completar la subida del avatar

Moviendo de lugar el componente Profile

Mostrando el avatar en el perfil

Actualizando el avatar del menu

Mutation para eliminar el avatar

Eliminando le avatar con el botón

Opciones del perfil

Estructura del header profile

Abriendo el modal con el botón de ajustes

Creando el menu de ajustes

Funcionalidad para cerrar sesión

Cambiando la informacion del modal

Formulario para cambiar contraseña

Añadiendo formik y yup al formulario de cambiar contraseña

Mutation para actualizar datos del usuario

Actualizando contraseña

Formulario para cambiar el email

Añadiendo formik y yup al formulario de email

Actualizando el email del usuario

Ejecutando refetch del useMutation

Formulario para cambiar descripción

Actualizando la descripción del usuario

Formulario para actualizar la página web

Actualizando el sitio web

Buscador de usuarios

Query para buscar usuarios

Creando el buscador

Ejecutando la query en el buscador

Mostrando resultado de la búsqueda

Customizando el componente de resultado

Sistema de Followers

Schema Follow

Mutation para seguir a usuarios

Query para saber si seguimos a un usuario

Mutation para dejar de seguir usuario

Botón Follow o UnFollow

Botón para seguir usuarios

Botón para dejar de seguir usuarios

Componente Followers

Query para obtener todos los seguidores

Mostrando el total de seguidores que tiene el usuario

Actualizar seguidores en tiempo real

Abriendo modal al hacer click a los seguidores

Lista de seguidores

Evento para ir al perfil de un usuario de la lista

Query para obtener los usuarios seguidos

Obteniendo usuarios que seguimos

Mostrando la lista de usuarios que seguimos

Sistema de publicaciones

Abriendo un modal para publicar

Añadiendo React DropZone al modal

Mostrando la imagen que se quiere publicar

Mostrando botón para publicar

Modelo de la colección de publicaciones

Mutation para crear publicaciones

Ejecutando el mutation publish en el cliente

Función publish en el server

Creando un loading mientras se crea la publicación

Query para obtener las publicaciones de un usuario

Contando total de publicaciones

Componente Publications

Pintando cada una de las publicaciones

Actualizando la lista de publicaciones

Sistema de comentarios

Modal para las publicaciones

Mostrando la imagen en el modal

Creando el formulario para enviar comentarios

Modelo de los comentarios

Mutation para añadir comentarios

Validando formulario de comentarios

Aplicando el mutation en el formulario de comentarios

Query para obtener los comentarios de una publicaciones

Ejecutando la query en el cliente

Listando todos los comentarios

Actualizando la lista de comentarios

Sistema de Likes

Modelo para los likes

Mutation para añadir likes

Mutation para eliminar un like

Query para comprobar si un usuario ha dado like

Query para contar cuentos like tiene una publicación

Añadiendo el botón de like

Añadiendo la funcionalidad de like

Comprobando si el usuario ha dado like

Refrescando el componente action al ejecutar un like

Función para eliminar likes

Añadiendo el contador de likes

Evitando que un usuario de varios likes seguidos

Home App

Estructura de la home

Query para obtener el feed de publicaciones

Obteniendo el feed de publicaciones

Pintado el header del feed de publicaciones

Pintado la publicación, la caja para like y comentarios

Abriendo las publicaciones

Publicaciones en RealTime

Query para obtener usuario que no seguimos

Componente UsersNotFolloweds

Listando todos los usuarios

Despliegue

Cambiando el favicon

Cambiando el titulo

Desplegando el server

Desplegando client

Fix Reload Page Not Found

Despedida

Despedida

Clase Extra


Reviews

D
Daniel2 June 2021

Me a gustado como explica cada una de las cosas que hace, siempre intentando hacer que nosotros como estudiantes entendamos cada cosa

A
Antonio29 April 2021

Las versión actualizada de las dependencias del proyecto genera errores, entiendo que deberían corregirse o añadir notas explicativas en los recursos

L
Leandro15 April 2021

Estoy empezando el curso pero se nota que el instructor sabe mucho del tema y me gustaria incluir este proyecto en mi portfolio.

A
Alan11 April 2021

Te la volaste Agustin! Yo soy de México y tus cursos me encantaron porque explicas muy bien las cosas y para cada cosa que tengo duda en como quedara en el Console.log() lo haces y rápido, a lo cual, quitas todas las dudas que uno tiene. Te felicito por tu trabajo. Algo que me ha servido bastante, es descargar el codigo, para no tener que repetir escribiendo cosas como CSS y algunos modulos que ya entendí, y seguir tu video viendo el codigo final. Seguire tus cursos, y espero hagas alguna version con typescript. Gracias!

M
Matías16 March 2021

Excelente curso, se podría mejorar el tema de Graphql con Subscriptions pero por lo demás es todo de primer nivel... Lo recomiendo.

V
Victoria23 February 2021

Muy completo y bien explicado, todavía no lo termino, pero me sirvió para debuggear cosas de un proyecto personal.

S
Steven18 January 2021

Aprendí mucho, recomendable si quieres aprender a usar Amazon s3, Apollo y Graphql. Me decepcionó un poco el real time por eso no doy 5 estrellas pues, pensé que iba a ser una conexión activa activa, es decir, full duplex, pero con lo que me encontré fue con una conexión con setInterval entre el server y el client. Por lo demás estuvo muy bueno

i
iParking26 December 2020

Excelentes contenidos hasta ahora! Muy buen diseño de Agustín para esta app. Lo único que le falta es un poco de teoría sobre las funcionalidades que va implementando. Algunas cosas necesitan una pequeña introducción para entenderse mejor! De todos modos, es un excelente curso!

C
Carlos18 December 2020

Me gustan los cursos donde se puede realizar un proyecto que puedes agregar a tu portafolio. Lo recomiendo ampliamente.

S
Salvador18 November 2020

Aprendí muchas cosas de React a pesar de que ya sabia una base, siempre hay cosas nuevas que aprender, estoy muy contento con este curso, seguiremos aprendiendo

J
Juan22 September 2020

Cumple con las expectativas y el profesor esta atento a las preguntas, hubiera sido genial si la parte del realtime la hubiera echo con subscriptions por lo demás esta perfecto.

J
Juan22 September 2020

Gracias Agustín por este maravilloso curso. Todo se entiende a la perfección y aprendes muy buenas practicas. Recomendado 100%.

V
Vicente28 July 2020

Voy 1/4 del curso y hasta ahora me ha parecido excelente, está explicado paso a paso, que buen curso, ojala haya más así :)

V
Victor28 July 2020

Excelente curso y muy buen instructor, llevo aproximadamente 4 horas del curso y no eh parado de aprender en cada clase, ademas de que se enseñan muy buenas practicas

M
Miguel25 July 2020

Excelente curso, el instructor explica a detalle, se nota su experiencia ya tiene mucha soltura a la hora de expresarse no deja pie a dudas, hace lo complicado simple, me gusta este curso por que va directo al grano.


Coupons

DateDiscountStatus
9/1/202050% OFFExpired
10/16/202050% OFFExpired
11/5/202050% OFFExpired
12/23/202050% OFFExpired
1/5/202150% OFFExpired
1/19/202150% OFFExpired
3/13/202150% OFFExpired
5/3/202150% OFFExpired
6/15/202150% OFFExpired

3242446

Udemy ID

6/16/2020

Course created date

7/24/2020

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram