Este proyecto combina una API con un sistema completo de CRUD para usuarios y una aplicación web construida en React. La API gestiona el registro, inicio de sesión y administración de usuarios, mientras que la web permite interactuar con la API a través de un formulario que utiliza React Hook Form para la validación.
- Descripción
- Características
- Instalación
- Uso
- Estructura del Proyecto
- Rutas de la API
- Componente de Registro
- Contribuciones
- Licencia
Este proyecto incluye dos componentes principales:
- API: Una API RESTful para la gestión de usuarios, que incluye registro, inicio de sesión, actualización y eliminación. Utiliza una base de datos MongoDB y tiene autenticación protegida para ciertas rutas.
- Web: Una aplicación web construida con React que incluye un formulario de registro de usuarios. Utiliza
React Hook Formpara la validación de datos y se comunica con la API para crear usuarios.
-
API:
- Registro de usuarios.
- Inicio de sesión de usuarios.
- Actualización y eliminación de usuarios.
- Protección de rutas mediante autenticación.
- Conexión a una base de datos MongoDB.
-
Web:
- Formulario de registro de usuarios con validación.
- Manejo de errores de entrada de datos.
- Interacción con la API para crear usuarios.
- Node.js y npm instalados.
- MongoDB en funcionamiento.
-
Clonar el repositorio:
git clone https://github.com/tu-usuario/tu-repo.git
-
Navegar al directorio de la API:
cd tu-repo/api -
Instalar dependencias:
npm install
-
Configurar las variables de entorno. Crea un archivo
.enven el directorio raíz de la API y añade las variables necesarias, como la URI de MongoDB. -
Iniciar el servidor de la API:
npm start
- Navegar al directorio de la web:
cd ../web - Instalar dependencias:
npm install
- Iniciar el servidor de desarrollo:
npm start
La API proporciona las siguientes rutas:
-
Registro de Usuario:
POST /api/user- Cuerpo de la solicitud:
{ "email": "user@example.com", "password": "pass1234" }
-
Inicio de Sesión:
POST /api/login- Cuerpo de la solicitud:
{ "email": "user@example.com", "password": "pass1234" }
-
Obtener Perfil:
GET /api/profile- Requiere autenticación.
-
Actualizar Perfil:
PATCH /api/profile- Requiere autenticación.
- Cuerpo de la solicitud:
{ "email": "newemail@example.com", "password": "newpass1234" }
-
Eliminar Usuario:
DELETE /api/user- Requiere autenticación.
- Abre tu navegador y ve a
http://localhost:3000. - Usa el formulario de registro para crear nuevos usuarios. Los errores en los datos se mostrarán en el formulario si los datos ingresados son incorrectos.
Las rutas de la API están definidas en api/routes/user.routes.js y gestionan las siguientes operaciones:
POST /api/user: Crea un nuevo usuario.GET /api/profile: Obtiene el perfil del usuario autenticado.POST /api/login: Inicia sesión con las credenciales del usuario.PATCH /api/profile: Actualiza el perfil del usuario autenticado.DELETE /api/user: Elimina el usuario autenticado.
La autenticación se maneja mediante middleware en api/middlewares/auth.middleware.js, que protege las rutas que requieren autenticación.
El componente de registro en React está definido en web/src/components/RegisterForm.js y utiliza React Hook Form para gestionar y validar el formulario de registro.
Este proyecto está licenciado bajo la Licencia MIT - consulta el archivo LICENSE para más detalles.
Gracias a todos los contribuyentes y desarrolladores que han ayudado a hacer posible este proyecto. Si encuentras algún error o tienes sugerencias de mejora, no dudes en abrir un issue en el repositorio.
Para cualquier pregunta o comentario, puedes contactar con el mantenedor del proyecto en marcosalvarezcalabria@gmail.com o a través de (https://github.com/marcosAlvarezCalabria).