Scribd
Cargar
6 vistas6 páginas

Evaluación Front

Cargado por

Kevin
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
6 vistas6 páginas

Evaluación Front

Cargado por

Kevin
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 6

Proyecto de Evaluación

Este proyecto envuelve el uso de React para construir una aplicación utilizando el
Framework de Next.js o la librería de React con VIte siempre utilizando Typescript como
lenguaje de programación, para realizar una aplicación de “Lista de Usuarios”. La
aplicación permitirá a los usuarios realizar un CRUD. Crear, mostrar una lista de usuarios,
el detalle, actualizar y eliminar. La aplicación de Frontend es una Aplicación web hecha
con Next.Js o Vite. La aplicación web consiste en consumir una Api de tipo Rest.

Aquí hay algunos puntos para recordar al acerca del proyecto:

• La aplicación deberá realizarse utilizando Node v20


• La aplicación puedes utilizar Next.Js o Vite
• La aplicación deberá utilizar Axios
• La aplicación deberá utilizar Redux
• La aplicación deberá utilizar ReactRouterDom v6
• La aplicación deberá utilizar Tailwind CSS para darle estilo a los componentes
• La aplicación deberá utilizar Preprocesadores CSS: SASS (scss) para casos
excepcionales en que Tailwind no sea suficiente
• Debe de tener una funcionalidad muy similar al Mockup mostrado más adelante
• Debe ser Responsivo
• Debe de tener una propuesta de Diseño y colores
• Deberá utilizar las mejores prácticas de programación, optimización y reutilización
de código

Api Rest
Gorest.co consiste en una api de terceros que es libre y se encuentra en la siguiente url:
https://gorest.co.in/
Esta api Rest no proveerá los endpoints necesarios para realizar nuestra aplicación.

POST /public/v2/users

GET /public/v2/users/

GET /public/v2/users/6940112

PUT|PATCH /public/v2/users/6940112

DELETE /public/v2/users/6940112
Estructura de archivos en un proyecto
Por cada componente que necesitemos se creará una carpeta por cada componente,
misma que estará estructurada de la siguiente forma:

• NombreDelComponente/: La carpeta que representa al componente. Ésta debe de


utilizar PascalCase para nombrarse si es un componente vamos a guardarlos
dentro de una carpeta llamada components y si es una página deberá guardarse
dentro de pages.
o index.tsx: Es el archivo de entrada del componente. Debe ser un
componente funcional, exportado como un named export (Ej. export const
MyComponent = () => {…}).

o utils.ts: (Opcional) Es el archivo donde existirán aquellas funciones o


constantes que sean requeridas dentro del componente. Por ejemplo, si es
necesario crear llamadas a REST APIs, éstas deben ir aquí.

o types.ts: (Opcional) Es el archivo donde existirán las interfaces o tipos de


TypeScript que sean requeridos por el componente.

o styles.scss: (Opcional) Este archivo debe ser creado únicamente cuando


TailwindCSS, por algún motivo, carezca de las herramientas necesarias para
estilizar el componente como queremos. Contiene los estilos del
componente en cuestión.
Ejemplo de la estructura

Repositorio github
El proyecto, debe estar dentro de un repositorio de github público, configurando su
archivo .gitignore

Trabajo Opcional
Puedes utilizar opcionalmente gitflow con las ramas main, develop y features
• La rama main debera tener la versión de proyecto final y solo debe de ser una
• En la rama develop llevara los cambios que estemos que vendrán de las feature
• Las ramas feature son 5 una por cada característica que vayamos a desarrollar
o feature-lista-de-usuarios
o feature-crear-usuarios
o feature-ver-usuario
o feature-editar-usuario
o feature-eliminar-usuario
El Proyecto
• Debemos de crear un enum para las opciones de géneros y los estatus
• Debemos de crear una interface para modelar el objeto usuario
• La lista de usuarios no estará guardada en un hook de estado deberá
estar guardad en un estado con Redux y cada que se cree o elimine un
usuario debe de ejecutarse un dispatch que actualizará dicha lista
• Deberá tener las validaciones correspondientes de que no haya textos
vacíos, correo entre otros.

Demostración del proyecto


Las pantallas que se muestran a continuación son ilustrativas, se considerara la
propuesta de diseño y mejoras que realicen para mejorar la UX/UI.

Pantalla de lista de usuarios donde se cree un botón de crear nuevo usuario y una tabla de
usuarios, y las acciones de ver Ver, Editar y Eliminar
Modal de Crear Usuario

Ver detalles de usuario


Editar usuario

Eliminar Usuario

También podría gustarte