¡Bienvenido a la prueba técnica para desarrolladores FullStack de Flexxus!
En este proyecto, te desafiamos a construir un CRUD de usuarios utilizando React.
Sigue las instrucciones a continuación para comenzar.
Haz un fork de este repositorio haciendo clic en el botón "Fork" en la esquina superior derecha de esta página. Esto creará una copia del repositorio en tu cuenta de GitHub.
Luego deberás seguir las instrucciones de github, para clonar el repositorio en tu maquina de manera local.
Entra al directorio del proyecto, dentro del repositorio tendrás dos carpetas:
En esta carpeta encontrarás ejercicios de algoritmos y estructuras de datos en JavaScript, con sus respectivos test, también tendrás un readme.md con las instrucciones del mismo.
Además tendrás tendrás una lista de consultas SQLque deberás resolver.
Tendras disponible un json-server con una lista de usuarios ficticios.
Si nunca lo utilizaste te dejamos la documentación en la sección de recursos.
Para inicializar el servidor deberas ejecutar los siguientes comandos:
cd ./api
npm install
npm run serverPor defecto se inicializará en el puerto 4000.
Dentro del repositorio deberas crear una carpeta llamada client.
Dentro de la misma deberá estar el frontend en React. Podrás usar el comando que prefieras para inicializar el proyecto.
Te dejamos una sugerencia.
npx create-react-app client
npm startTambien podrás usar otras alternativas como vite o similares. (opcional)
Deberas instalar la librería antd, donde tendrás muchos de los componentes que necesitaras para realizar el CRUD. Si nunca la utilizaste podes consultar la documentación que dejamos en la sección de recursos.
npm install antdDesarrolla la aplicación siguiendo las especificaciones proporcionadas. Asegúrate de seguir las siguientes normas de desarrollo:
- Utiliza React para construir la interfaz de usuario.
- La aplicación debe ser un CRUD completo, permitiendo crear, leer, actualizar y eliminar usuarios.
- Implementa validaciones en los formularios para garantizar la integridad de los datos.
- Utiliza componentes funcionales y hooks siempre que sea posible.
- Escribe código limpio y legible. Utiliza nombres de variables descriptivos y sigue las convenciones de estilo de código de JavaScript y React.
- Gestiona el estado de la aplicación de manera eficiente y evita el uso excesivo de prop drilling.
- Comenta tu código cuando sea necesario para explicar partes complejas o importantes del mismo.
- Utiliza React Context o Redux para el estado global de la aplicación.
- Recomendamos utilizar UUID para la generación de indentificadores únicos de los registros de los usuarios.
- Se debe respetar el diseño en Figma que se les adjunto en la sección de recursos.
- Se debe utilizar la librería antd y css/less/sass en caso de ser necesario.
- Recomendamos reutilizar la mayor cantidad de componentes posibles, y evitar el codigo repetitivo.
A continuación listaremos los requerimientos del software a desarrollar. Es necesario simular un tiempo de carga entre las peticiones con un setTimeOut, y mostrar un Loader en los componentes afectados.
- Listar usuarios.
- Crear usuarios.
- Editar usuarios.
- Eliminar usuarios.
- Buscar por nombre o apellido por coincidencia.
- Filtrar por el estado del usuario (active/inactive).
- Paginado de registros utilizando limit & offset.
Cuando hayas terminado el desarrollo y estés satisfecho con el resultado, sube tus cambios a un repositorio remoto utilizando los comandos de git:
git add .
git commit -m "[Mensaje del commit]"
git push origin main¡Eso es todo! Esperamos que disfrutes trabajando en este proyecto y estamos ansiosos por ver tu solución. Si tienes alguna pregunta o necesitas ayuda, no dudes en contactarnos.
Este proyecto está bajo la Licencia MIT. Consulta el archivo LICENSE para obtener más detalles.