Antes de empezar a usar la aplicación, se debe correr este comando: npm install
Una vez se haya hecho esto, se puede iniciar la app: npm start
Con la app corriendo, ingresar a la siguiente ruta: http://localhost:3000/login
Para el desarrollo de la aplicación, primero se identificaron las vistas necesarias; estas son 3: login, home y detalles. Siendo así, se crea un componente para cada vista. Para el componente de login, como hay 2 subvistas (correo y constraseña), se tomó la decisión de trabajar con booleanos para definir si se está en modo correo o modo contraseña. En este mismo componente se realizan las validaciones usando expresiones regulares. Cuando tanto el correo como la contraseña hayan sido validados, se loggea en la consola los valores ingresados en el formulario + un rol de usuario aleatorio (pseudo-POST). Es importante mencionar que este componente es hijo de App, quien define el rol y lo pasa como props a tanto el componente de login como de detalles. Una vez el usuario ingresa, lo que se muestra es el componente de home. Aquí se hace fetch a los datos y se mappean para ser mostrados como tarjetas (usando flex y flex-wrap para que se vea más organizado). Estas tarjetas son clickleables para permitir la navegación hacia el componente de detalles. Ya en la vista de detalles, una vez se haya hecho fetch al carro seleccionado, se desplega la información como una tabla. Esta tabla, similar a las subvistas del login, maneja el rol de usuario como booleano (True = Admin) para definir si los detalles son editables o no.
- App -> Define un rol de usuario aleatorio y las rutas.
- Access (login) -> Realiza el login del usuario, verifica que los campos cumplan las condiciones y hace un POST.
- Cars (home) -> Hace fetch a todos los carros (GET) y se muestran como tarjetas.
- Car (detalles) -> Hace fetch a un carro (GET) y muestra sus detalles. Estos detalles son editables si el rol de usuario lo permite.
Los elementos de React usados fueron:
- Route -> Utilizado para definir las rutas (/login, /home, /home/:carModel)
- Form -> Utilizado para definir los formularios de correo y contraseña.
- FormattedMessage -> Utilizado para la i18n.
- Card -> Utilizado para las tarjetas de carros de la vista /home.
- Col -> Importado desde Bootstrap, utilizado para definir columnas.
La app selecciona el idioma automáticamente (entre EN y ES) según el idioma del navegador. Si se está usando Chrome, ir a configuración -> idiomas y mover inglés o español al principio de la pila. Si por alguna razón la app no puede reconocer el idioma o se está en otro diferente a español o inglés, se selecciona automáticamente inglés.
