En este proyecto, cada comisión desarrollará una aplicación web interactiva utilizando React en el frontend y una API propia en el backend. El objetivo es que los alumnos comprendan y apliquen el modelo cliente-servidor, reforzando conceptos clave del desarrollo web. La aplicación deberá cumplir con una estructura común definida en este enunciado, pero permitirá cierto grado de personalización para que cada comisión tenga un enfoque único.
La aplicación debe contar con un diseño atractivo y una interfaz intuitiva para mejorar la experiencia del usuario. Se evaluará tanto la estética como la claridad en la navegación. Además, el código desarrollado será analizado para garantizar buenas prácticas y un funcionamiento adecuado. Para darle mayor realismo, la aplicación deberá simular un producto profesional, asociado a una empresa o institución (real o ficticia), incluyendo un nombre y un logotipo representativo.
✅ Frontend en React → Debe ser una SPA con componentes reutilizables.
✅ Backend con API propia (Node.js/Express) → El frontend debe consumir esta API.
✅ Consumo de API con Fetch/Axios → Para la comunicación entre frontend y backend.
✅ Datos almacenados en memoria o archivos JSON → No hay base de datos, los datos se pierden al reiniciar el servidor.
✅ Interactividad básica → La aplicación debe permitir crear, leer, actualizar y eliminar (CRUD) los datos.
✅ Estilos bien trabajados → Se recomienda el uso de un framework de estilos como Tailwind CSS, Chakra UI o Bootstrap.
❌ No se permite autenticación → No hay login ni gestión de usuarios.
❌ No debe usarse una base de datos → Los datos son temporales.
❌ No se permite usar un carrito de compras → Esa mecánica quedará para el segundo proyecto.
Cada comisión podrá elegir el enfoque de su aplicación, siempre respetando los requisitos y restricciones. Algunas opciones recomendadas:
- Gestor de tareas → Aplicación para agregar, editar y eliminar tareas.
- Mini blog → Permitir crear y visualizar publicaciones con comentarios.
- Agenda de eventos → Manejo de eventos con fechas y descripciones.
- Catálogo de productos ficticio → Mostrar productos con detalles y filtros de búsqueda.
Cada comisión puede proponer otras ideas siempre que cumplan con la estructura general del proyecto.
- Código fuente del proyecto en el repositorio de GitHub creado al momento de aceptar este proyecto.
- Link a la aplicación desplegada en Render en el archivo
Readme.mddel repositorio.
- El proyecto se realizará en comisiones de a 2 alumnos
- La cátedra le asignará un ayudante el cual será el encargado del seguimiento y la corrección del proyecto.
- Será necesario al menos un punto de control con el ayudante asignado, el cual debe ser coordinado informalmente en el aula o via mensaje en la plataforma Moodle.
- El objetivo del punto de control es explicar la idea a realizar del proyecto y el grado de avance en el momento de realizar el control.
-
La fecha de entrega del proyecto es el día Jueves 15 de Mayo a las 23:59 hs.
-
Se debe subir al branch main todos los cambios realizados para el desarrollo del proyecto.
-
Se recomienda trabajar en uno o mas branchs de main y mezclar los cambios de manera gradual o todos juntos al final.
-
Este archivo debe incluir un link al deploy funcional de Render: https://react-express-giacomodonato-kreczmer.onrender.com/
-
Además, se puede incluir cualquier nota que sea requerida al final de este archivo.
-
El no cumplimiento de alguno de los puntos anteriores invalida la entrega por completo del proyecto.
- Se asignará un horario a cada comisión para la defensa del proyecto el día 20 o 22 de Mayo, de 20 minutos.
- En dicha defensa deberán explicar el funcionamiento de su proyecto y responder consultas de la cátedra respecto a la implementación del mismo
- Completitud: Cumplimiento de todos los requerimientos listados.
- Funcionalidad: Correcto funcionamiento de todas las características implementadas.
- Calidad del Código: Organización, legibilidad y uso de buenas prácticas de programación.
- Diseño y UX: Atractivo visual y facilidad de uso de la aplicación.
La estructura de este repositorio dado como ejemplo fue tomado del siguiente repositorio:
Simple Monorepo Setup With React.js (Vite) And Express.js y este post.
Puede utilizarse de esta manera o pueden eliminarlo por completo y aplicar su propia estructura de carpetas y organización del proyecto deseada.