project-manager

Aplicacion full stack para gestion de proyectos y tareas con tableros estilo Trello, autenticacion, colaboracion por equipos, comentarios, checklist y gestion de perfil.

Autor

Desarrollado por Ricardo Navarrete.

Descripcion

project-manager es una plataforma para organizar proyectos, tareas y colaboracion de equipo en una interfaz moderna inspirada en tableros Kanban. La aplicacion permite crear proyectos, mover tareas por estado, agregar comentarios, gestionar integrantes y mantener un flujo de trabajo claro desde autenticacion hasta seguimiento diario.

Caracteristicas Principales

• Registro, confirmacion de cuenta e inicio de sesion.
• Recuperacion y cambio de contraseña.
• Creacion, edicion y eliminacion de proyectos.
• Tablero de tareas por estados:
  • Pendiente
  • En espera
  • En proceso
  • En revision
  • Completado
• Drag and drop de tareas entre columnas.
• Detalle de tarea en modal con:
  • titulo editable
  • descripcion editable
  • estado
  • checklist persistente
  • comentarios
  • actividad reciente
• Gestion de equipo por proyecto.
• Perfil de usuario con avatar persistente.

Tecnologias Utilizadas

Frontend

• React
• TypeScript
• Vite
• Tailwind CSS
• React Router DOM
• React Hook Form
• TanStack Query
• Headless UI
• DnD Kit
• React Toastify
• Zod

Backend

• Node.js
• Express
• TypeScript
• MongoDB
• Mongoose
• JWT
• Nodemailer
• Express Rate Limit
• Helmet
• Morgan

Arquitectura

El repositorio contiene dos aplicaciones separadas dentro del mismo proyecto:

• uptask_frontend/: interfaz cliente en React.
• uptask_backend/: API REST en Express con MongoDB.

Flujo general

1. El frontend consume la API REST del backend.
2. La autenticacion usa JWT enviado como bearer token.
3. El backend protege rutas sensibles con middleware de autenticacion y autorizacion.
4. Los proyectos contienen tareas, las tareas contienen checklist y notas/comentarios.
5. El frontend sincroniza estado remoto con TanStack Query.

Estructura del Proyecto

project-manager/
  uptask_frontend/
  uptask_backend/

Variables de Entorno

Frontend

Crear uptask_frontend/.env.local basado en uptask_frontend/.env.example.

Backend

Crear uptask_backend/.env basado en uptask_backend/.env.example.

Como Ejecutarlo en Local

1. Instalar dependencias

Frontend:

cd uptask_frontend
npm install

Backend:

cd uptask_backend
npm install

2. Configurar variables de entorno

• uptask_frontend/.env.local
• uptask_backend/.env

3. Levantar el backend

cd uptask_backend
npm run dev

4. Levantar el frontend

cd uptask_frontend
npm run dev

Scripts Utiles

Frontend

cd uptask_frontend
npm run dev
npm run build
npm run lint

Backend

cd uptask_backend
npm run dev
npm run build

Proximas Mejoras

• Fechas limite y recordatorios por tarea.
• Etiquetas y prioridades visuales.
• Edicion inline de items del checklist.
• Mejoras de accesibilidad y teclado.
• Scroll interno por columna tipo board completo.
• Adjuntos por tarea.
• Mejoras de observabilidad y logs.
• Docker y docker-compose para entorno local.
• Estrategia de despliegue frontend/backend.

Estado del Proyecto

• Frontend compila correctamente.
• Backend compila correctamente.
• La base actual ya incluye flujo de proyectos, tareas, comentarios, checklist y perfil.

Licencia

Uso educativo y de portafolio.