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

Seleccionaremos un navegador con el cual estaremos desarrollando la aplicación

Instalando Node en el equipo.

Instalaremos el gestor de dependencias Yarn.

Seleccionando un editor de código.

Instalaremos todas las extensiones que usaremos para mejorar nuestra codificación.

Buscaremos una app para poder gestionar nuestra base de datos de MongoDB desde el escritorio.

Una explicación de todo lo que vamos a ver en esta sección de Conceptos básicos sobre React JS.

Veremos que es el JSX de React y por que nos facilita mucho a la hora de programar.

Veremos los conceptos básicos que tiene React para entender mejor como funciona.

Crearemos nuestra primera app con el comando create-react-app.

Veremos toda la estructura de una aplicación de React JS.

Crearemos nuestro primer componente y veremos todas sus partes.

Veremos una explicación de que son los PROPS de React y como funcionan.

Pasaremos props básicos de una componente a otro para crear componentes reutilizables.

Pasaremos variables y objetos por los props de nuestros componentes.

Vamos a aprender como podemos pasar funciones completas entre componentes usando los props de React JS.

Vamos a aprender como podemos pasar funciones completas entre componentes usando los props de React JS.

Podemos definir en nuestros componentes props por defecto en el caso de que no le pasemos ninguno.

Veremos que el Template Strings y como nos puede ayudar a mostrar las variables en los componentes.

Veremos que es la herramienta React Developer Tools y como nos puede ayudar en el desarrollo de aplicaciones.

Veremos el uso del hook de estado useState de React.

Veremos el uso del hook de efecto useEffect de React.

Inicializaremos nuestra app server.

Vamos a crear una cuenta en Mongo Atlas y nos crearemos nuestra base de datos.

Vamos a conectar el Clusters creando en Mongo Atlas a nuestra app de Robo 3T.

Vamos a ver que es Playground y que nos proporciona.

Vamos a crear el modelo User para especificar que datos tienen los usuarios.

Vamos a crear el mutation para poder crear usuarios.

Guardaremos los datos del nuevo usuario en la base de datos.

Vamos a coger la contraseña del usuario y la vamos a encriptar antes de registrarlo.

Vamos a extraer las funciones del Resolver en otros ficheros.

Vamos a instalar nodemon para que el servidor se recargar cuando un fichero sufra cualquier cambio.

Vamos a crear un nuevo mutation para que los usuarios puedan realizar login.

Vamos a realizar el login, generaremos un token y lo devolveremos.

Creando e iniciando nuestra app de React JS

Vamos a instalar la Semantic UI React para reutilizar componentes y estilos.

Instalaremos @apollo/client y graphql para conectar nuestro cliente al servidor.

Vamos a separar la zona de usuarios no logeados de los usuarios logeados.

Vamos a pintar la página Auth y crear el sistema de formularios

Creando el formulario de registro de usuario con los componentes de Semantic UI React.

Vamos a ver como se le puede aplicar un reset al formulario con formik.

Vamos a usar YUP para validar nuestro formulario de una manera sencilla y rápida.

Vamos a enviar los datos del usuario al servidor para realizar el registro correctamente.

Vamos a crear la estructura del formulario de login con Semantic UI.

Añadiremos formik al formulario para controlar los datos.

Vamos a crear las validaciones del formulario de login usando Yup.

Vamos a ejecutar el login contra el servidor y obtendremos el token.

Después de hacer login guardaremos el token en el localStorage para mantener una sesión.

Vamos a detectar cuando el usuario realiza un login correctamente recargaremos el componente y extraeremos los datos del token para guardarlos en nuestro Context y tener acceso a esos datos desde cualquier parte de nuestra app.

Vamos a extraer los datos del token y los guardaremos en el estado del Context para tener acceso a esos datos desde cualquier parte de nuestra app.

Instalando y explicando React Router Dom.

Vamos a crear todas las páginas por las que está compuesta nuestra app.

Vamos a crear las rutas con las páginas que hemos creado.

Vamos a crear rutas dinámicas para renderizar todos los usuarios usando solo una única ruta.

Vamos a implementar dentro del sistema de navegación un sistema de layouts.

Vamos a crear la estructura del header de nuestra app.

Vamos a añadir las opciones del menú que tendrá disponible el usuario.

Vamos a añadirle la ruta del usuario logeado al avatar para ir al perfil.

Creando una query en el servidor para poder obtener los datos de los usuarios mediante el ID o el username.

Vamos a usar la query getUser para obtener los datos del usuario al entrar en su perfil.

Vamos a ver como podemos solucionar el flash del login cuando recargamos la web.

Vamos a definir la estructura del perfil del usuario.

Componente que se mostrara cuando no encunetre un usuario.