Este proyecto es una prueba técnica construida con React, que incluye autenticación, control de roles (admin/usuario), rutas protegidas, contexto global, mocks con msw y diseño responsivo.
- Login / Registro con control de sesión
- Acceso protegido a rutas por rol (
adminousuario) - Vistas condicionales para usuarios y administradores
- Simulación de API con MSW (Mock Service Worker)
- Diseño adaptable a dispositivos móviles
- Composición con Context API para autenticación y alertas
# Clona el repositorio
git clone https://github.com/xtian7489/react-technical-test
cd react-technical-test
# Instala las dependencias
npm install
# Inicia el proyecto en modo desarrollo
npm run devCrea un archivo .env en la raíz del proyecto y copia las siguientes variables:
VITE_JWT_SECRET=my_secret_key
VITE_USE_AUTH=true
VITE_DB_KEY=test_api
VITE_USE_MOCKS=truePuedes definirlas también en
.env.productionpara el entorno de producción.
Nota: Los datos de la aplicación se almacenan en el navegador utilizando localStorage bajo el nombre especificado en la variable VITE_DB_KEY.
npm run build
npm run previewEsto compila el proyecto y lo sirve en modo producción. Si VITE_USE_MOCKS=true, entonces MSW interceptará las peticiones y usará los handlers definidos en src/mocks.
Los roles están simulados en el backend falso. Puedes ingresar con estos datos para probar la app:
Email: admin@site.com
Contraseña: 123456Email: user@site.com
Contraseña: 123456src/
├— context/ # Contextos de autenticación y alertas
├— mocks/ # MSW handlers para mocking de APIs
├— pages/
├— components/ # Componentes reutilizables
└— App.jsx # Definición de rutasCristian Valdez Desarrollador Full Stack & Dramaturgo
El software se encuentra licenciado bajo GPL-v3. Creemos en la importancia del código abierto