Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación
Dificultad
beginnerRepositorio
Clic para abrirVideo
No disponible
Demo en vivo
No disponible
Duración promedio
3 hrs
Tecnologías
Casi todos los sitios web en el mundo tienen autenticación de usuarios, en este proyecto debes realizar una aplicación web implementando la autenticación de usuarios usando Python y el framework Flask para construir un back-end de REST API y React.js, y sessionStorage API para el Front-end.
El uso de esta plantilla/boilerplate es recomendada para comenzar el desarrollo, ya viene preparada con todas las condiciones e instalaciones para comenzar a programar en un minuto.
Implementa un sistema de autenticación en las siguientes partes:
Al menos las siguientes páginas y componentes de react deben ser implementados en el proyecto:
Ruta | Componente | Funcionalidad |
---|---|---|
/signup | <Signup> | Renderizar formulario de registro |
/login | <Login> | Renderizar formulario de Inicio de sesión |
/private | <Private> | Validar que solo ingresen usuarios autenticados y renderizar este componente |
No clones este repositorio porque vamos a usar una plantilla diferente.
Recomendamos abrir el React.js + Flask API boilerplate
usando una herramienta de aprovisionamiento como Codespaces (recomendado) o Gitpod. Alternativamente, puedes clonarlo en tu computadora local usando el comando git clone
.
Este es el repositorio que necesitas abrir o clonar:
https://github.com/4GeeksAcademy/react-flask-hello
👉 Por favor sigue estos pasos cómo comenzar un proyecto de codificación.
💡 Importante: Recuerda guardar y subir tu código a GitHub creando un nuevo repositorio, actualizando el remoto (git remote set-url origin <your new url>
) y subiendo el código a tu nuevo repositorio usando los comandos add
, commit
y push
desde la terminal de git.
Usualmente un sistema de autenticación es implementado en 4 partes:
Al principio de cada aplicación no hay usuario o tokens, así que el primer paso que hace sentido es crear un registro de usuario.
/signup
./signup
y realizará emparejado con el correspondiente componente de página de React.js, esta página se encargará de representar el HTML del registro.POST /token
con el email y contraseña en el body payload.Esta parte del proceso ocurre solo cuando los nuevos tokens fueron generados.
/login
y realizará un emparejado con el correspondiente componente de página de React.js, esta página se encargará de renderizar el formulario de inicio de sesión.token
./private
.Este proceso ocurre cuando el usuario desea cerrar la sesión.
Cualquier usuario puede solo tipear /private
para intentar visitar una página privada, por eso es que se necesita implementar una validación, para prevenir que usuarios anonimos vean el contenido de la página privada, y debemos redirigir al usuario a la ruta /login
o a otra página pública. Asi es como usualmente es el proceso:
/private
y realizara un emparejado con el correspondiente componente de página de React.js que se encargará de renderizar el HTML./private
es cargado.Este y otros proyectos son usados para aprender a programar por parte de los alumnos de 4Geeks Academy Coding Bootcamp realizado por Alejandro Sánchez y muchos otros contribuyentes. Conoce más sobre nuestros Curso de Programación para convertirte en Full Stack Developer, o nuestro Data Science Bootcamp.
Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación
Dificultad
beginnerRepositorio
Clic para abrirVideo
No disponible
Demo en vivo
No disponible
Duración promedio
3 hrs
Tecnologías