Izanagi Portal
& Kanban Board
Productivity tool ecosystem built entirely from scratch. No frameworks, no external libraries. Completely native stack with Node.js, HTML5, CSS3, and vanilla JavaScript.
Introduction & Purpose
The Izanagi Portal is an own-tools ecosystem born from a concrete need: a centralised control panel for homelab services and a task manager adapted to a real technical workflow, without depending on Jira, Notion, or any third-party platform.
The decision to build it with a native stack (no React, no Vue, no jQuery) was deliberate. The goal was to demonstrate that with vanilla HTML, CSS, and JavaScript, plus a lightweight Node.js backend, it is possible to build a functional, fast, and maintainable tool that replicates the experience of production tools like Jira or Trello.
This project demonstrates deep understanding of web fundamentals: DOM manipulation, event handling, localStorage, fetch API, and client-server architecture from scratch.
Tech Stack
Backend — Node.js
Native HTTP server that exposes a REST API for reading system metrics (CPU, RAM) and serving static files. No Express, no frameworks.
Frontend — Vanilla JS
All interactivity implemented in pure JavaScript: drag & drop, modals, localStorage persistence, and DOM updates without any framework.
Design — CSS3 + Variables
Own design system based on CSS custom properties. Switchable light/dark theme, glassmorphism, and responsive design without CSS frameworks.
Persistence — localStorage
Dashboard services and Kanban tasks are persisted in browser localStorage. Data survives page reloads without needing a database.
izanagi/
├── server.js # Node.js backend — metrics API + static server
├── index.html # Main portal / dashboard
├── tareas.html # Kanban Board
├── style.css # Shared portal styles
├── style_tareas.css # Kanban-specific styles
├── script.js # Dashboard logic
└── script_tareas.js # Kanban logic (drag & drop, CRUD)
Portal / Dashboard
The portal is the home page of the Izanagi ecosystem. It centralises access to all homelab services in a visual card grid, with real-time server metrics displayed in the top bar.
Real-time metrics
The top bar displays CPU% and RAM% updated every 5 seconds via requests to the Node.js backend API.
Service management
Add, edit, or remove services via a modal. Each service has a name, URL, and customisable SVG icon. Everything persists in localStorage.
Light / dark theme
Switchable theme toggle with a button. The preference is saved in localStorage and applied automatically on the next visit.
Direct access
Each service card opens the service URL directly in a new tab. One click = immediate access to any homelab tool.
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);
// Persist services to localStorage
function saveServices(services) {
localStorage.setItem('izanagi-services', JSON.stringify(services));
}
Kanban Board
The Kanban Board is a task manager with 5 columns adapted to the real workflow of technical and infrastructure projects. Cards can be dragged between columns using native drag & drop.
To Do
Pending tasks yet to be started. Project and idea backlog.
In Progress
Active tasks currently being worked on.
Paused
Temporarily blocked tasks waiting for resources or decisions.
Documentation
Exclusive column for writing tasks, technical documentation, and writeups.
Done
Completed tasks. History of finished work.
Drag & drop was implemented using the native HTML5 Drag and Drop API, without external libraries. Cards are draggable and each column is a drop target that updates the task status:
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();
}
// Full CRUD persisted in 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));
}
The Kanban is fully responsive. On small screens, columns stack vertically to maintain mobile usability.
Screenshots
The portal and Kanban running live on the homelab, accessed from the local network at http://izanagi.local:
Portal / Dashboard — homelab services
Kanban Board — task management
Upcoming Features
The Izanagi ecosystem evolves with new ideas. Here are the planned improvements: