Una aplicación Kanban moderna construida con Web Components nativos y cero dependencias
Agent App es una aplicación web de gestión de tareas tipo Trello que implementa un tablero Kanban completamente funcional. Diseñada para usuarios individuales y equipos pequeños, permite organizar tareas en columnas por estado, asignarles prioridades, etiquetas y descripciones enriquecidas.
- 📊 Tablero Kanban dinámico - Organiza tareas por estados con drag & drop
- 🏷️ Sistema de etiquetas - Crea y reutiliza etiquetas con colores personalizados
- 👥 Asignación de personas - Asigna tareas a miembros del equipo
- 📝 Descripciones enriquecidas - Soporte completo para Markdown
- 🎨 Tema claro/oscuro - Interfaz adaptable a preferencias del usuario
- 💾 Persistencia local - Todos los datos se guardan en IndexedDB
- 📱 Diseño responsivo - Funciona en desktop, tablet y móvil
- 🔍 Búsqueda y filtros - Encuentra tareas rápidamente
- 📊 Múltiples proyectos - Organiza diferentes tableros por proyecto
Esta aplicación sigue el principio Zero Dependencies - todo el código de producción se ejecuta sobre Web APIs nativas del navegador.
| Tecnología | Versión | Propósito |
|---|---|---|
| TypeScript | 5.x | Lógica de la aplicación y tipado |
| Web Components | Nativo | Arquitectura de componentes sin framework |
| Shadow DOM | v1 | Encapsulamiento de estilos |
| IndexedDB | Nativo | Base de datos local |
| CSS3 | Custom Properties, Grid, Flexbox | Estilos y animaciones |
| HTML5 | Living Standard | Estructura y templates |
┌─────────────────────────────────────────────────────────────┐
│ LO QUE CORRE EN EL NAVEGADOR │
│ │
│ HTML5 + CSS3 + TypeScript→JS + Web APIs nativas │
│ │
│ ✗ React ✗ Vue ✗ Tailwind ✗ idb ✗ DOMPurify │
└─────────────────────────────────────────────────────────────┘
- Node.js 16+ (para TypeScript)
- Python 3 (para servidor local)
# 1. Clonar el repositorio
git clone https://github.com/Code-Dojo-Labs/agent-app.git
cd agent-app
# 2. Instalar dependencias de desarrollo
npm install
# 3. Compilar TypeScript y servir la aplicación
npm run devLa aplicación estará disponible en http://localhost:3000
npm run build # Compilar para producción
npm run watch # Compilar en modo watch
npm run serve # Servir archivos compilados
npm run dev # Desarrollo (watch + serve)| Documento | Descripción |
|---|---|
| 📖 COOKBOOK | Guía de desarrollo y patrones |
| 📋 Requerimientos | Especificaciones funcionales |
| 📊 Modelo de Datos | Esquema de IndexedDB |
| 🎨 UI/UX | Guía de diseño |
| 📖 Historias de Usuario | Casos de uso detallados |
Este proyecto ha sido desarrollado usando un enfoque innovador de desarrollo dirigido por agentes IA, donde diferentes agentes especializados colaboran:
- 🏗️ Builder - Implementación de componentes y funcionalidades
- 👁️ Reviewer - Auditoría de código, seguridad y calidad
- 📝 Documentalista - Creación de documentación
- 🔧 gitjmz - Gestión de Git y despliegue
📖 Ver modelo completo → - Análisis detallado del proceso colaborativo, métricas de efectividad y metodologías aplicadas
- ✅ Tablero Kanban con drag & drop
- ✅ Gestión completa de tareas (crear, editar, eliminar)
- ✅ Sistema de etiquetas con colores personalizados
- ✅ Asignación de personas a tareas
- ✅ Descripciones con Markdown
- ✅ Filtros y búsqueda avanzada
- ✅ Múltiples proyectos/tableros
- ✅ Tema claro y oscuro
- ✅ Persistencia local (IndexedDB)
- ✅ Diseño responsivo
- ✅ PWA (Progressive Web App)
Este proyecto es de código abierto y está disponible bajo licencia MIT.
¡Las contribuciones son bienvenidas! Por favor:
- Fork del repositorio
- Crear una rama feature (
git checkout -b feature/AmazingFeature) - Commit de cambios (
git commit -m 'Add some AmazingFeature') - Push a la rama (
git push origin feature/AmazingFeature) - Abrir un Pull Request