@hern_n/devdashboard

v0.3.2

Published

3 months ago

Dashboard de proyectos locales vía web

0High
0Medium
0Low

DevDashboard

Dashboard web para gestionar y visualizar todos tus proyectos de desarrollo local. Escanea automáticamente tus directorios, detecta tecnologías, y presenta una interfaz moderna con 26 temas de color, búsqueda, filtros, y acciones directas para abrir proyectos en tu editor, terminal o explorador de archivos.

100% local, cero telemetría, sin dependencias externas.

Índice

Características

Escaneo automático — Detecta proyectos por archivos emblemáticos (package.json, Cargo.toml, go.mod, pyproject.toml, etc.)
Dashboard web — Listado completo con búsqueda por nombre y filtro por tecnología
Detalle de proyecto — Metadatos completos + README renderizado con syntax highlighting y botones de copia
Acciones directas — Abre cualquier proyecto en tu editor, terminal, explorador de archivos, o todo a la vez
26 temas de color — 13 familias con variante claro y oscuro, incluyendo Nord, Dracula, Catppuccin, Tokyo Night, Solarized, Gruvbox, Rose Pine y más
Configuración persistente — Directorios de escaneo, editor preferido, puerto del servidor, tema
Metadatos editables — Cada proyecto tiene un .project.yaml auto-generado con name, description, author, technologies, tags, etc.
Sin telemetría — 100% local, no envía datos a ningún servidor externo

Instalación

npm install -g @hern_n/devdashboard

O desde el repositorio (el postinstall instala automáticamente las dependencias del dashboard):

git clone https://github.com/hern-n/devdashboard.git
cd devdashboard
npm install
npm run build
npm install -g .

Uso

# Escanea, inicia servidor y abre el navegador
devdashboard web

# Solo inicia el servidor (http://localhost:3456)
devdashboard serve

# Actualiza la fecha de última modificación de todos los proyectos
devdashboard scan

Sin argumentos muestra la ayuda con todos los comandos disponibles.

Configuración

El archivo de configuración se encuentra en ~/.config/devdashboard/config.json.

{
  "theme": "sistema",
  "editor": "code",
  "port": 3456,
  "scanDirectories": [
    "~/projects",
    "~/work"
  ]
}

| Campo | Tipo | Default | Descripción | |-------|------|---------|-------------| | scanDirectories | string[] | [] | Directorios a escanear en busca de proyectos | | editor | string | "code" | Comando para abrir el editor (VS Code, cursor, idea, etc.) | | port | number | 3456 | Puerto del servidor web (1024–65535) | | theme | string | "sistema" | Tema del dashboard |

Dashboard web

Vista principal (`/`)

Lista de todos los proyectos escaneados con nombre, tecnologías, descripción y tiempo desde última modificación
Barra de búsqueda para filtrar por nombre
Filtro por tecnología (píldoras con conteo de proyectos)
4 acciones por proyecto: abrir todo, editor, terminal, explorador
Estado de carga con skeleton cards animados
Estados vacío y error manejados

Detalle de proyecto (`/project/:nombre`)

Metadatos completos: descripción, autor, versión, tecnologías, tags, repositorio, homepage, licencia
README.md renderizado con highlight.js (13 lenguajes registrados)
Botón de copia de código en cada bloque
Botón "volver arriba" al hacer scroll

Temas (`/themes`)

Galería completa con vista previa de cada tema
Temas agrupados por familia (claro + oscuro)
Preview del dashboard y preview de código
Aplicación con persistencia inmediata

Configuración

Panel lateral deslizable
Gestionar directorios de escaneo (añadir/eliminar)
Configurar comando del editor
Configurar puerto del servidor
Seleccionar tema
Guardar/Cancelar cambios

API REST

| Método | Ruta | Descripción | |--------|------|-------------| | GET | /api/projects | Lista todos los proyectos escaneados | | GET | /api/projects/:id/readme | Contenido raw del README.md | | POST | /api/projects/:id/open | Abre editor + terminal del proyecto | | POST | /api/projects/:id/open-editor | Abre solo el editor | | POST | /api/projects/:id/open-terminal | Abre solo la terminal | | POST | /api/projects/:id/open-explorer | Abre el explorador de archivos | | GET | /api/config | Obtiene la configuración actual | | PUT | /api/config | Actualiza la configuración |

:id es el path del proyecto codificado con encodeURIComponent.

Temas disponibles

| Familia | Claro | Oscuro | |---------|-------|--------| | Sistema | sistema | sistema-oscuro | | Claro | claro | — | | Oscuro | — | oscuro | | Sepia | sepia | sepia-oscuro | | Nord | nord | nord-oscuro | | Dracula | dracula | dracula-oscuro | | Catppuccin | catppuccin | catppuccin-oscuro | | Tokyo Night | tokyo-night | tokyo-night-oscuro | | Solarized | solarized | solarized-oscuro | | Gruvbox | gruvbox | gruvbox-oscuro | | One Dark | one-dark | one-dark-oscuro | | Everforest | everforest | everforest-oscuro | | Rose Pine | rose-pine | rose-pine-oscuro |

Detección de tecnologías

El scanner identifica tecnologías mediante archivos emblemáticos en la raíz del proyecto:

| Archivo | Tecnología | |---------|-----------| | package.json | Node.js | | Cargo.toml | Rust | | pyproject.toml | Python | | go.mod | Go | | Gemfile | Ruby | | CMakeLists.txt | C / C++ | | pom.xml | Java / Maven | | composer.json | PHP | | deno.json / deno.jsonc | Deno | | .git | (marca como proyecto) |

Si un directorio contiene .git o cualquiera de estos archivos pero no tiene .project.yaml, el scanner lo crea automáticamente con los datos detectados. El scanner es read-only en cualquier otro aspecto.

Formato de metadatos (`.project.yaml`)

name: 'mi-proyecto'
description: 'Una descripción corta del proyecto'
author: 'Ana López'
version: '1.0.0'
technologies:
  - Node.js
  - React
  - TypeScript
repository: 'https://github.com/usuario/mi-proyecto'
homepage: 'https://mi-proyecto.example.com'
license: 'MIT'
tags:
  - web
  - frontend
lastModified: '2026-06-30T18:00:00.000Z'

El archivo se puede editar manualmente — el scanner respeta los valores existentes y solo actualiza technologies y lastModified.

Arquitectura

devdashboard/
├── src/
│   ├── cli/              # Entry point (Commander) — serve, web, scan
│   ├── server/           # Express 5 — API REST + static files
│   ├── scanner/          # Escaneo de directorios y detección de tecnologías
│   ├── config/           # Configuración persistente (~/.config/devdashboard/)
│   ├── utils/            # Utilidades multi-OS (abrir navegador, editor, terminal)
│   ├── dashboard/        # Sub-paquete npm independiente (React 18 + Vite 5)
│   └── types.ts          # Interfaces compartidas Project y UserConfig
├── spec/                 # Especificaciones (spec-driven development)
│   ├── constitution/     # Misión, roadmap, tech-stack
│   └── features/         # 10 features documentadas (spec → plan → tasks)
└── spec_template/        # Template reusable para nuevas features

Stack técnico

| Capa | Tecnología | |------|-----------| | Lenguaje | TypeScript 5.8 (strict mode, ES2022, ESM) | | Servidor | Express 5 | | Frontend | React 18 + React Router v7 | | Build frontend | Vite 5 | | CLI | Commander 13 | | YAML | js-yaml 4 | | Markdown | marked + highlight.js | | Estilos | Inline React.CSSProperties + CSS custom properties | | Fuente | JetBrainsMono Nerd Font | | Runtime dev | tsx (watch mode) | | Lint | Solo tsc --noEmit |

Convenciones

Código fuente: inglés. UI visible: español.
Imports con extensión .js (ESM).
Estilos inline en React. Sin CSS Modules, Tailwind, o librerías de componentes.
Tema vía data-theme en <html>, con variables CSS globales.
OS-sensitive en src/utils/platform.ts.
Sin tests aún (vitest en dependencias, sin configurar).

Desarrollo

Requisitos

Node.js >= 18
npm >= 9

Setup

git clone <repo>
cd devdashboard
npm install    # el postinstall instala automáticamente src/dashboard

Comandos disponibles

| Comando | Descripción | |---------|-------------| | npm run build | Build completo (servidor + dashboard) | | npm run build:server | Solo servidor → dist/cli/ | | npm run build:dashboard | Solo dashboard → dist/dashboard/ | | npm run dev | Servidor hot-reload + abre navegador | | npm run dev:server | Servidor hot-reload sin navegador | | npm run lint | TypeScript check (tsc --noEmit) | | npm start | Ejecuta binario compilado |

Desarrollo frontend con HMR

# Terminal 1: servidor backend
npm run dev:server

# Terminal 2: frontend con hot-reload
cd src/dashboard && npm run dev
# Vite en http://localhost:5173 con proxy /api → localhost:3456

Metodología

Este proyecto sigue Spec-Driven Development (SDD). Cada feature comienza con:

spec.md — especificación
plan.md — plan de implementación
tasks.md — lista de tareas

Ver spec/features/ para ejemplos y spec_template/ para la plantilla.

Roadmap

Implementado

[x] Escáner de proyectos con detección de tecnologías
[x] Dashboard web con listado, búsqueda y filtro
[x] Apertura en editor, terminal y explorador
[x] Configuración y temas de color
[x] Footer del dashboard
[x] Página de detalle con README renderizado
[x] Galería de 26 temas con vista previa
[x] Metadatos .project.yaml auto-generados

[ ] Comando scan completado (CLI)
[ ] Fuentes personalizadas (JetBrainsMono)
[ ] Watch de sistema de archivos para auto-escaneo
[ ] Estadísticas del dashboard (conteo, tecnologías principales)

Backlog

[ ] Sincronización con GitHub (estadísticas, commits)
[ ] Sincronización con Vercel (deployments)
[ ] Tests automatizados

Galería

Dashboard Capture_1 Capture_2 Capture_3 Capture_4 Capture_5

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

DevDashboard

Índice

Características

Instalación

Uso

Configuración

Dashboard web

Vista principal (/)

Detalle de proyecto (/project/:nombre)

Temas (/themes)

Configuración

API REST

Temas disponibles

Detección de tecnologías

Formato de metadatos (.project.yaml)

Arquitectura

Stack técnico

Convenciones

Desarrollo

Requisitos

Setup

Comandos disponibles

Desarrollo frontend con HMR

Metodología

Roadmap

Implementado

Próximo

Backlog

Galería

Licencia

Vista principal (`/`)

Detalle de proyecto (`/project/:nombre`)

Temas (`/themes`)

Formato de metadatos (`.project.yaml`)