Portal Izanagi
& Kanban Board
Ecosistema de herramientas de productividad desarrolladas íntegramente desde cero. Sin frameworks, sin librerías externas. Stack completamente nativo con Node.js, HTML5, CSS3 y JavaScript puro.
Introducción & Propósito
El Portal Izanagi es un ecosistema de herramientas propias nacido de una necesidad concreta: tener un panel de control centralizado para los servicios del homelab y un gestor de tareas adaptado a mi flujo de trabajo real, sin depender de Jira, Notion ni ninguna plataforma de terceros.
La decisión de construirlo con stack nativo (sin React, sin Vue, sin jQuery) fue deliberada. El objetivo era demostrar que con HTML, CSS y JavaScript vanilla, más un backend Node.js ligero, se puede construir una herramienta funcional, rápida y mantenible, replicando la experiencia de herramientas de producción como Jira o Trello.
Este proyecto demuestra comprensión profunda de los fundamentos web: DOM manipulation, event handling, localStorage, fetch API y arquitectura cliente-servidor desde cero.
Stack Técnico
Backend — Node.js
Servidor HTTP nativo que expone una API REST para leer métricas del sistema (CPU, RAM) y servir los archivos estáticos. Sin Express, sin frameworks.
Frontend — JS Vanilla
Toda la interactividad implementada con JavaScript puro: drag & drop, modales, persistencia en localStorage y actualizaciones del DOM sin ningún framework.
Diseño — CSS3 + Variables
Sistema de diseño propio basado en CSS custom properties (variables). Tema claro/oscuro conmutable, glassmorphism y diseño responsive sin frameworks CSS.
Persistencia — localStorage
Los servicios del dashboard y las tareas del Kanban se persisten en localStorage del navegador. Los datos sobreviven recargas sin necesitar base de datos.
izanagi/
├── server.js # Backend Node.js — API métricas + servidor estático
├── index.html # Portal / Dashboard principal
├── tareas.html # Kanban Board
├── style.css # Estilos compartidos del portal
├── style_tareas.css # Estilos específicos del Kanban
├── script.js # Lógica del dashboard
└── script_tareas.js # Lógica del Kanban (drag & drop, CRUD)
Portal / Dashboard
El portal es la página de inicio del ecosistema Izanagi. Centraliza el acceso a todos los servicios del homelab en una cuadrícula de tarjetas visuales, con métricas del servidor en tiempo real en la barra superior.
Métricas en tiempo real
La barra superior muestra CPU% y RAM% del servidor actualizados cada 5 segundos mediante peticiones a la API del backend Node.js.
Gestión de servicios
Añade, edita o elimina servicios del panel mediante un modal. Cada servicio tiene nombre, URL y un icono SVG personalizable. Todo persiste en localStorage.
Tema claro / oscuro
Toggle de tema conmutable con un botón. La preferencia se guarda en localStorage y se aplica en el siguiente acceso automáticamente.
Acceso directo
Cada tarjeta de servicio abre directamente la URL del servicio en una nueva pestaña. Un clic = acceso inmediato a cualquier herramienta del homelab.
async function fetchMetrics() {
const res = await fetch('/api/metrics');
const data = await res.json();
document.getElementById('cpu-metric').textContent = `CPU: ${data.cpu}%`;
document.getElementById('ram-metric').textContent = `RAM: ${data.ram}%`;
}
setInterval(fetchMetrics, 5000);
// Persistencia de servicios en localStorage
function saveServices(services) {
localStorage.setItem('izanagi-services', JSON.stringify(services));
}
Kanban Board
El Kanban Board es un gestor de tareas con 5 columnas adaptadas al flujo de trabajo real de proyectos técnicos y de infraestructura. Las tarjetas se pueden arrastrar entre columnas con drag & drop nativo.
Por hacer
Tareas pendientes de iniciar. Backlog de proyectos e ideas.
En curso
Tareas activas en progreso actualmente.
Pausado
Tareas bloqueadas temporalmente a la espera de recursos o decisiones.
Documentación
Columna exclusiva para tareas de redacción, documentación técnica y writeups.
Finalizado
Tareas completadas. Historial de trabajo realizado.
El drag & drop se implementó con la API nativa HTML5 Drag and Drop, sin librerías externas. Las tarjetas son draggables y cada columna es un drop target que actualiza el estado de la tarea:
function allowDrop(event) { event.preventDefault(); }
function drop(event) {
event.preventDefault();
const taskId = event.dataTransfer.getData('text/plain');
const targetColumn = event.currentTarget.dataset.status;
updateTaskStatus(taskId, targetColumn);
renderBoard();
}
// CRUD completo persistido en localStorage
function saveTask(task) {
const tasks = getTasks();
const idx = tasks.findIndex(t => t.id === task.id);
idx >= 0 ? tasks[idx] = task : tasks.push(task);
localStorage.setItem('kanban-tasks', JSON.stringify(tasks));
}
El Kanban es completamente responsive. En pantallas pequeñas las columnas se apilan verticalmente para mantener la usabilidad en móvil.
Capturas de Pantalla
El portal y el Kanban en funcionamiento real sobre el homelab, accedidos desde la red local en http://izanagi.local:
Portal / Dashboard — servicios del homelab
Kanban Board — gestión de tareas
Próximas Mejoras
El ecosistema Izanagi evoluciona con nuevas ideas. Estas son las mejoras planificadas: