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

Introducción2 clases

Resultado final de la aplicación

Repositorio de la aplicación

Preparación del entorno de desarrollo6 clases

Navegador

Instalación de Node

Instalación de Yarn

Editor de Código

Extensiones para Visual Studio

Instalando Robo 3T

Introducción a 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

Creando el servidor6 clases

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 usuarios8 clases

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 JS4 clases

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 usuarios15 clases

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ón5 clases

Instalando React Router Dom

Creando todas las paginas de nuestra aplicación

Creando el sistema de navegación

Rutas dinámicas

Sistema de Layouts

Header3 clases

Estructura del header

Opciones del header

Navegando al perfil del usuario logeado

Panel de usuario5 clases

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 usuario22 clases

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 perfil17 clases

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 información 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 usuarios5 clases

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 Followers17 clases

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 publicaciones14 clases

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 comentarios11 clases

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 Likes12 clases

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 App10 clases

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

Despliegue5 clases

Cambiando el favicon

Cambiando el titulo

Desplegando el server

Desplegando client

Fix Reload Page Not Found

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

Contenido del curso

Comentarios de los estudiantes

Valoraciones

Este curso incluye:

Instructor del curso