Caso de estudio · Full-stack
App de checklist
Aplicación full-stack de tareas/checklist: front-end con React + Vite + Tailwind y API con Express + MongoDB. La mejor prueba de código full-stack listo para producción.
- Rol
- Full-stack — diseño y construcción, en solitario
- Front-end
- React 18, Vite, Tailwind v4
- Back-end
- Express, MongoDB, Mongoose
- Contexto
- Harvard Extension — Desarrollo de apps web
Demo pública — los datos de ejemplo se restablecen periódicamente y el servidor gratuito puede tardar ~30–50s en despertar en la primera carga.
Qué es
Un gestor de checklists pulido donde creas listas codificadas por color, añades ítems con prioridades y fechas de entrega, los reordenas arrastrando y ves una barra de progreso llenarse a medida que marcas cosas. Diseñé y construí todo de principio a fin — la interfaz en React, la API REST y el modelo de datos de MongoDB — para aprender el stack MERN entregando algo real en lugar de un juguete.
Cómo está construido
Una separación limpia entre una app de página única en React y una API REST de Express respaldada por MongoDB. El estado vive en un único store de Zustand que habla con la API a través de una capa de servicio con Axios; el servidor sigue una estructura MVC (rutas → controladores → modelos) con validación y manejo de errores centralizado.
Cliente React
SPA con Vite · store de Zustand · actualizaciones optimistas · dnd-kit · Framer Motion
API Express
REST · rutas → controladores → modelos · express-validator · middleware de errores
MongoDB
Esquema de Mongoose · checklists con un arreglo de subdocumentos de ítems embebido
Flujo de la petición: acción en la UI → Zustand → Axios → ruta de Express → controlador → Mongoose → MongoDB, y de vuelta — con la UI actualizándose de forma optimista y revirtiendo ante cualquier error.
Cosas de las que estoy orgulloso
Reordenamiento por arrastrar y soltar
Los ítems se reordenan con @dnd-kit; el nuevo orden se persiste en MongoDB para que sobreviva a una recarga.
UI optimista
Marcar, eliminar, reordenar y limpiar completados se actualiza al instante en un store de Zustand y revierte automáticamente si la llamada a la API falla.
Prioridades y fechas de entrega
Cada ítem lleva una prioridad (baja/media/alta) y una fecha de entrega opcional, con insignias codificadas por color.
Progreso de un vistazo
Una barra de progreso en vivo refleja cuánto de cada checklist está completo a medida que se marcan los ítems.
Movimiento bien pensado
Framer Motion maneja las transiciones de página, la entrada de la lista y una animación de resorte en el checkbox — pulido, no ruido.
API validada y resiliente
Una API REST con validación de entradas vía express-validator, manejo de errores centralizado y apagado controlado.
Stack
Front-end
- React 18
- Vite
- React Router
- Zustand
- Tailwind CSS v4
- Framer Motion
- @dnd-kit
- Axios
Back-end
- Node.js
- Express
- MongoDB
- Mongoose
- express-validator
Contexto honesto
Esto comenzó como un proyecto para mi micro-certificado de Desarrollo de Aplicaciones Web de Harvard Extension — mi experiencia con MERN es, por ahora, académica. Lo incluyo porque es código full-stack real y funcional que diseñé y construí en solitario, y porque muestra cómo aprendo: yendo más allá de la tarea para entregar algo pulido. Con más tiempo, los siguientes pasos naturales son autenticación, pruebas automatizadas y paginación — y disfrutaría construyéndolos.