{"id":28761495,"url":"https://github.com/antgom/todo-controlado-pro","last_synced_at":"2026-04-12T00:35:33.097Z","repository":{"id":299119020,"uuid":"982170579","full_name":"AntGom/Todo-Controlado-Pro","owner":"AntGom","description":"Proyecto 3ª Evaluavión. Organizador/Task Planner Con sección de noticias, clima, calendario y chat en tiempo real","archived":false,"fork":false,"pushed_at":"2025-06-15T16:03:03.000Z","size":534,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-05T19:43:35.884Z","etag":null,"topics":["bcrypt","cache-control","cors","css3","express-js","fetch-api","helmet","html5","javascript-vanilla","jwt","mongoose","multer-storage","node-js","nodemailer","responsive-design","socket-io"],"latest_commit_sha":null,"homepage":"https://todo-controlado-pro.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AntGom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-12T13:31:05.000Z","updated_at":"2025-06-15T16:03:06.000Z","dependencies_parsed_at":"2025-06-14T20:05:38.957Z","dependency_job_id":"2bfbc6eb-956e-4852-bcf3-88da0a1e6a8e","html_url":"https://github.com/AntGom/Todo-Controlado-Pro","commit_stats":null,"previous_names":["antgom/todo-controlado-pro"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AntGom/Todo-Controlado-Pro","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AntGom%2FTodo-Controlado-Pro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AntGom%2FTodo-Controlado-Pro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AntGom%2FTodo-Controlado-Pro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AntGom%2FTodo-Controlado-Pro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AntGom","download_url":"https://codeload.github.com/AntGom/Todo-Controlado-Pro/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AntGom%2FTodo-Controlado-Pro/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31700605,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T21:17:31.016Z","status":"ssl_error","status_checked_at":"2026-04-11T21:17:24.556Z","response_time":54,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bcrypt","cache-control","cors","css3","express-js","fetch-api","helmet","html5","javascript-vanilla","jwt","mongoose","multer-storage","node-js","nodemailer","responsive-design","socket-io"],"created_at":"2025-06-17T07:06:24.711Z","updated_at":"2026-04-12T00:35:33.059Z","avatar_url":"https://github.com/AntGom.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ¡TODO CONTROLADO!\n\nUna aplicación full-stack para la gestión de tareas, eventos, calendario y comunicación en tiempo real.\n\n## 📝 Descripción\n\n¡TODO CONTROLADO! es una aplicación web completa que permite a los usuarios gestionar sus tareas diarias, programar eventos, consultar el calendario, chatear con otros usuarios y mantenerse informados con noticias y datos del clima.\n\n## 🚀 Funcionalidades\n\n- **Gestión de tareas**: Crear, editar, eliminar y filtrar tareas con diferentes estados (pendiente, en progreso, completada)\n- **Gestión de eventos**: Programar eventos con fecha, hora y ubicación\n- **Calendario**: Visualiza tus tareas y eventos para tener una perspectiva clara de tu agenda\n- **Chat en tiempo real**: Comunicación con otros usuarios a través de una sala general o chats privados\n- **Información meteorológica***: Consulta del clima de cualquier ciudad\n- **Noticias**:  Mantente informado con noticias de diferentes fuentes (El País, El Mundo, Fórmula 1, MotoGP)\n- **Autenticación**: Sistema completo con registro, inicio de sesión y recuperación de contraseña\n- **Perfiles de Usuario**: Gestión de información personal y contraseñas\n\n## 🛠️ Tecnologías Utilizadas\n\n### Frontend\n- HTML5: Estructura semántica con etiquetas modernas\n- CSS3: Sistema de estilos personalizado con variables CSS\n- JavaScript (ES6+): Programación modular orientada a objetos\n- Socket.io para comunicación en tiempo real\n- Font Awesome para iconografía\n- Comunicación con APIs: Consumo de servicios externos (clima y noticias)\n- CSS modular y diseño responsive\n\n### Backend\n- Node.js y Express\n- MongoDB con Mongoose\n- Socket.io para WebSockets\n- JWT para autenticación\n- Multer para carga de archivos\n- Nodemailer para envío de correos\n- bcrypt para encriptación de contraseñas\n\n## 🏗️ Estructura del Proyecto\n\n```\n/\n├── client/               # Frontend de la aplicación\n│   ├── css/              # Estilos modulares\n│   ├── img/              # Imágenes y recursos\n│   ├── js/               # Código JavaScript\n│   │   ├── api/          # Comunicación con API\n│   │   ├── auth/         # Autenticación\n│   │   ├── features/     # Funcionalidades principales\n│   │   ├── pages/        # Controladores de páginas\n│   │   ├── services/     # Servicios externos\n│   │   └── utils/        # Utilidades\n│   └── *.html            # Páginas HTML\n│\n├── server/               # Backend de la aplicación\n│   ├── config/           # Configuración\n│   ├── controllers/      # Controladores\n│   ├── middleware/       # Middleware\n│   ├── models/           # Modelos de datos\n│   └── routes/           # Rutas API\n│\n├── uploads/              # Archivos subidos por los usuarios\n└── .env                  # Variables de entorno\n```\n\n## 💾 Modelos de Datos\n\n- **User**: Usuarios de la aplicación con roles y autenticación\n- **Task**: Tareas con título, descripción, fecha límite, estado y fotos\n- **Event**: Eventos con título, detalles, fecha y ubicación\n- **Message**: Mensajes para el sistema de chat con sala, lectura y soft-delete\n\n## 🔁 Flujo de Datos\n\nEl flujo de datos en la aplicación sigue un patrón claro:\n\n1. **Cliente a Servidor**: \n   - El cliente hace peticiones HTTP a la API REST del servidor\n   - Para datos en tiempo real, se utiliza Socket.io para comunicación bidireccional\n\n2. **Servidor a Base de Datos**:\n   - Los controladores procesan las peticiones y se comunican con la base de datos MongoDB\n   - Los modelos de Mongoose definen la estructura y validación de los datos\n\n3. **Sistema de Caché**:\n   - Las respuestas se almacenan en caché en el cliente para reducir peticiones\n   - La caché se invalida cuando hay cambios relevantes en los datos\n\n4. **Flujo de Autenticación**:\n   - Las credenciales se envían al servidor\n   - El servidor verifica y genera un token JWT\n   - El token se almacena en una cookie HTTP-only\n   - Las peticiones subsiguientes incluyen la cookie para autenticación\n\n5. **Flujo de Mensajes en Tiempo Real**:\n   - Los mensajes se envían mediante WebSockets al servidor\n   - El servidor persiste los mensajes en la base de datos\n   - El servidor notifica a los clientes correspondientes\n   - Los clientes actualizan su interfaz con los nuevos mensajes\n\n## 🔐 Autenticación y Seguridad\n\n- Tokens JWT almacenados en cookies HTTP-only\n- Encriptación de contraseñas con bcrypt\n- Middleware de autenticación para proteger rutas\n- Sistema de roles (usuario/admin)\n- Protección CORS y políticas de seguridad\n- Sanitización de entradas con express-validator y mongo-sanitize\n- Configuraciones de seguridad con Helmet\n\n## 👥 Roles de Usuario\n\nLa aplicación implementa dos roles principales con diferentes niveles de acceso:\n\n### 1. Usuario Estándar (role: 'user')\n- Puede gestionar solo sus propias tareas y eventos\n- Puede participar en chats y enviar mensajes\n- Puede modificar su propio perfil\n- No puede ver tareas o eventos de otros usuarios\n- Puede eliminar solo sus propios mensajes en el chat\n\n### 2. Administrador (role: 'admin')\n- Tiene acceso completo a todas las tareas y eventos de todos los usuarios\n- Puede moderar el chat (eliminar cualquier mensaje)\n- Tiene acceso a funciones de administración avanzadas\n- Recibe una identificación visual especial en la interfaz (etiqueta de \"ADMIN\")\n\nLa distinción de roles se implementa tanto en el backend (middleware de autorización) como en el frontend (UI condicional).\n\n## 📢 Comunicación en Tiempo Real\n\nLa comunicación en tiempo real se implementa mediante Socket.io, permitiendo:\n\n- Actualizaciones instantáneas en el chat\n- Notificación de usuarios conectados/desconectados\n- Chats privados entre usuarios\n- Sistema de mensajes no leídos\n- Soft-delete de mensajes\n\n## 📸 Sistema de Archivos\n\nSe utiliza Multer para gestionar la subida de archivos:\n\n- Configuración de almacenamiento en disco\n- Filtrado por tipo de archivo (solo imágenes)\n- Límites de tamaño (1MB)\n- Nombres de archivo únicos con timestamp\n- Asociación de fotos a tareas específicas\n\n## 📱 Diseño Responsive\n\nLa aplicación está diseñada para funcionar en dispositivos de diferentes tamaños:\n\n- Layout flexible usando Flexbox\n- Media queries para adaptarse a diferentes tamaños de pantalla\n- Optimización de la interfaz para móviles, tablets y escritorio\n\n## 🎨 Sistema de Iconografía\n\nPara proporcionar una experiencia visual detallada y coherente, se utiliza Font Awesome como sistema de iconografía:\n\n- Amplia biblioteca de iconos para diferentes contextos\n- Fácil implementación y personalización mediante clases CSS\n- Iconos vectoriales escalables sin pérdida de calidad\n- Categorización visual de elementos (tareas, eventos, alertas, acciones)\n- Mejora la usabilidad proporcionando pistas visuales\n\n## ⚙️ Decisiones Técnicas\n\n### Arquitectura Cliente-Servidor\nSe optó por separar completamente el frontend y backend para permitir escalabilidad y mejor mantenimiento. El cliente se comunica con el servidor mediante una API RESTful.\n\n### Módulo de Cacheo\nSe implementó un sistema de caché en el cliente para reducir peticiones al servidor y mejorar la experiencia del usuario, especialmente en conexiones lentas.\n\n### Soft-Delete para Mensajes\nLos mensajes no se eliminan físicamente de la base de datos, sino que se marcan como eliminados, permitiendo auditoría y recuperación si fuera necesario.\n\n### Uso de Mongoose\nMongoose proporciona validación, casting y lógica de negocio para MongoDB, facilitando el desarrollo y mantenimiento.\n\n### WebSockets con Socket.io\nSe eligió Socket.io por su robustez en conexiones inestables y sus características avanzadas como rooms, namespaces y reconexión automática.\n\n### Sistema de Autenticación\nJWT en cookies HTTP-only ofrece un balance óptimo entre seguridad y experiencia de usuario, evitando problemas de XSS y simplificando la autenticación en WebSockets.\n\n### Multer para Archivos\nMulter ofrece un control granular sobre la subida de archivos, permitiendo validación, limitación y transformación de los mismos antes de guardarlos.\n\n## 🔧 Instalación y Configuración\n\n1. Clonar el repositorio\n2. Crear archivo `.env` con las variables necesarias (ver `.env.example`)\n3. Instalar dependencias del Backend:\n   ```\n   npm install\n   ```\n4. Iniciar el servidor del Backend:\n   ```\n   npm run dev\n\n5. Entrar en la carpeta del cliente\n   ```\n   cd client\n\n6. Instalar dependencias del Fontend:\n   ```\n   npm install\n   ```\n7. Iniciar el servidor:\n   ```\n   npm run dev\n   ```\n\n## 📋 Variables de Entorno Requeridas\n\n```\n# Servidor\nPORT=5000\nNODE_ENV=development\n\n# MongoDB\nMONGO_URI=mongodb+srv://...\n\n# JWT\nJWT_SECRET=tu_clave_jwt\nJWT_EXPIRE=7d\nJWT_COOKIE_EXPIRE=7\n\n# Email\nEMAIL_HOST=smtp.ejemplo.com\nEMAIL_PORT=587\nEMAIL_USER=tu_email\nEMAIL_PASS=tu_password\nFROM_NAME=TodoControlado\nFROM_EMAIL=noreply@example.com\n\n# Frontend\nFRONTEND_URL=http://localhost:5173\n```\n## 🌐 APIs utilizadas\n\n- **Clima**: API de wttr.in para obtener información meteorológica en formato compacto\n- **Noticias**: APIs RSS de El País, El Mundo, y contenido deportivo de Marca (convertidas a JSON mediante api.rss2json.com)\n\n## 🔗 Enlaces útiles\n\n- [Servicio wttr.in](https://github.com/chubin/wttr.in)\n- [Font Awesome](https://fontawesome.com/)\n\n\n## 👤 Autor\n\nDesarrollado por Antonio Gómez © 2025. Desde Andalucía, con ❤.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantgom%2Ftodo-controlado-pro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantgom%2Ftodo-controlado-pro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantgom%2Ftodo-controlado-pro/lists"}