Docs · ES

Documentación web de DevFast Manager

Guía práctica escrita desde cero a partir del contenido técnico del repositorio: instalación, uso, configuración, desarrollo, API y arquitectura.

10secciones curadasNode 20+Fastify · React · Prisma

Visión general Montaje Primer uso Módulos Configuración Producción Desarrollo API Arquitectura Problemas comunes

Producto

Qué es DevFast Manager

DevFast Manager es una plataforma de gestión empresarial para equipos pequeños y startups. Centraliza proyectos, infraestructura, finanzas, tareas, bugs, equipo, chat interno, notificaciones y configuración de empresa desde una sola aplicación web.

BackendNode.js · Fastify · Prisma · TypeScriptFrontendReact · Vite · Tailwind · RechartsDatosSQLite por defecto; MySQL/PostgreSQL soportados vía PrismaTiempo realChat interno por WebSocket con fallback HTTP

Instalación local

Montaje rápido

Clona el repositorio

git clone https://github.com/UserZero075/Business-Management-Dashboard.git
cd Business-Management-Dashboard

Backend

cd backend
npm install
npx prisma generate
npx prisma db push
npm run dev

Frontend

cd frontend
npm install
VITE_API_URL=http://localhost:3001 npm run dev

Requisitos: Node.js 20 o superior y npm 9 o superior. Backend corre en 3001; frontend en 5173.

Primer uso

Registro inicial y acceso

Abre http://localhost:5173.
En login, entra en Registrarse.
Solicita el OTP por correo. Si SMTP no está configurado, el código aparece en la consola del backend en desarrollo.
Introduce el código de 6 dígitos, nombre y contraseña.
El primer usuario registrado queda como administrador.

Operación diaria

Módulos principales

Dashboard

Resumen de ingresos, gastos, beneficios, proyectos activos, servidores, costos, alertas y tendencia financiera.

Proyectos

CRUD de proyectos, estados ACTIVE/RENTABLE/PAUSED/ABANDONED/EXPERIMENTAL, responsables, miembros, métricas de usuarios y URL pública.

Infraestructura

Gestión de VPS, proveedores, dominios, certificados, bases de datos y reparto porcentual de costos por proyecto.

Finanzas

Ingresos y gastos en USD, EUR, CUP, USDT y MLC. Tasas desde El Toque cada 24h o carga manual.

Tareas y bugs

Tareas con prioridad y estado; bugs con severidad low/medium/high/critical y flujo abierto/en progreso/resuelto/cerrado.

Equipo

Miembros, roles, proyectos asignados y perfiles públicos con avatar, bio, color y enlaces personales.

Chat

Canal Empresa, Cofundadores y privados. Mensajes persistentes en tiempo real vía WebSocket.

Empresa

Nombre, objetivo y logo de la organización, visibles en login, header y UI general.

Variables

Configuración del sistema

Base de datos

DATABASE_URL="file:./devfast.db"
DATABASE_URL="mysql://user:password@localhost:3306/devfast"
DATABASE_URL="postgresql://user:password@localhost:5432/devfast"

Servidor y auth

PORT=3001
HOST=0.0.0.0
JWT_SECRET="clave-larga-segura"
NODE_ENV=production

SMTP para OTP

SMTP_HOST="smtp.gmail.com"
SMTP_PORT=587
SMTP_USER="tu-email@gmail.com"
SMTP_PASS="app-password"
SMTP_FROM="tu-email@gmail.com"
SMTP_SECURE=false

Frontend

VITE_API_URL=http://TU_IP:3001 npm run build

En producción cambia siempre JWT_SECRET, usa contraseña de aplicación para SMTP y limita puertos con firewall.

Producción

Despliegue en VPS

Automático

chmod +x deploy.sh
./deploy.sh

El script detecta el sistema, instala Node si falta, instala dependencias, compila, prepara Prisma y pregunta si iniciar en background.

Manual

cd backend
npm install
npx prisma db push
npm run build
HOST=0.0.0.0 PORT=3001 npm run start

cd ../frontend
npm install
VITE_API_URL=http://TU_IP:3001 npm run build
npm run preview -- --host --port 80

Si usas Tailscale, permite solo la red 100.64.0.0/10 al puerto 3001.

Para developers

Desarrollo y extensión

Estructura backend

backend/src/routes contiene auth, projects, vps, finance, tasks, dashboard, chat, activity y settings. services contiene bootstrap, email, exchangeRates y logging.

Estructura frontend

frontend/src/pages contiene Login, Dashboard, Projects, Infrastructure, Finances, Tasks, Team, Chat, Notifications, Profile, Settings y UserProfile.

Agregar ruta API

import nuevaRuta from './routes/nuevaRuta.js'
await fastify.register(nuevaRuta, { prefix: '/api/nueva' })

Agregar página

import NuevaPagina from './pages/NuevaPagina'
<Route path="/nueva" element={<NuevaPagina />} />

Prisma

Edita backend/prisma/schema.prisma, luego ejecuta npx prisma db push y npx prisma generate.

Validación

cd backend && npm run build
cd frontend && npm run build
npm run lint

REST API

Referencia práctica

Endpoints principales agrupados por dominio. Las rutas autenticadas usan Authorization: Bearer <token>.

Auth

POST/api/auth/request-otp

Solicita OTP de registro.

{
  "email": "usuario@ejemplo.com"
}

POST/api/auth/register

Registra usuario y devuelve token.

{
  "email": "usuario@ejemplo.com",
  "password": "contraseña123",
  "name": "Nombre",
  "otp": "123456"
}

POST/api/auth/login

Inicia sesión.

GET/api/auth/me

Usuario actual.

PUT/api/auth/me

Actualiza perfil.

GET/api/auth/users

Lista usuarios.

GET/api/auth/roles

Lista roles.

Projects

GET/api/projects

Lista proyectos.

GET/api/projects/:id

Proyecto específico.

POST/api/projects

Crea proyecto.

{
  "name": "Mi Proyecto",
  "description": "Descripción",
  "status": "ACTIVE",
  "publicUrl": "https://..."
}

POST/api/projects/:id/metrics

Agrega métricas de usuarios.

Infrastructure

GET/api/vps/providers

Proveedores.

POST/api/vps/providers

Crea proveedor.

GET/api/vps/servers

Lista VPS.

POST/api/vps/servers

Crea VPS.

POST/api/vps/servers/:id/link

Vincula VPS a proyecto con porcentaje de costo.

GET/api/vps/items

Items de infraestructura.

GET/api/vps/costs

Resumen mensual de costos.

Finance

GET/api/finance/transactions

Transacciones filtrables por proyecto, tipo y fecha.

POST/api/finance/transactions

Crea ingreso o gasto.

GET/api/finance/summary

Resumen financiero.

GET/api/finance/rates/latest

Tasas actuales.

POST/api/finance/rates

Carga tasa manual.

Tasks / Bugs

GET/api/tasks/tasks

Lista tareas.

POST/api/tasks/tasks

Crea tarea.

GET/api/tasks/bugs

Lista bugs.

POST/api/tasks/bugs

Reporta bug.

GET/api/tasks/overview

Resumen de tareas y bugs.

Dashboard / Chat / Settings

GET/api/dashboard

Overview general.

GET/api/dashboard/alerts

Alertas.

GET/api/dashboard/charts/income-expense

Gráfico ingresos/gastos.

GET/api/chat/channels

Canales.

POST/api/chat/channels/:id/messages

Envía mensaje.

WS/api/chat/ws?token=<jwt_token>

Chat en tiempo real.

GET/api/settings/company

Configuración empresa.

Códigos comunes400 Solicitud inválida401 No autorizado403 Prohibido404 No encontrado500 Error del servidor

Arquitectura

Cómo está construido

React + Vite + Tailwind + RechartsHTTP / WebSocketFastify + TypeScript + Prisma + JWTORMSQLite / MySQL / PostgreSQL

Backend

Fastify recibe la solicitud, valida CORS, verifica JWT cuando aplica, valida entrada con Zod, ejecuta lógica con servicios y Prisma, y devuelve JSON.

Autenticación

JWT con token en localStorage. El frontend lo envía en Authorization: Bearer <token>. Contraseñas con bcrypt.

Servicios

bootstrap crea roles/settings base; email gestiona SMTP con fallback; exchangeRates actualiza tasas cada 24h.

Pendientes conocidos

Tests, rate limiting, push notifications, CSV import, uploads de archivos, métricas históricas y dashboards más interactivos.

Soporte

Problemas comunes

Cannot find module

Ejecuta npm install en backend o frontend según corresponda.

Error de base de datos

Sincroniza Prisma con npx prisma db push.

Puerto ocupado

Localiza el proceso con lsof -i :3001 o lsof -i :5173 y termina el PID.

CORS

Verifica que el backend escuche en 0.0.0.0 y que VITE_API_URL apunte al backend correcto.

OTP no llega

Revisa SMTP. En desarrollo, el código aparece en la consola del backend.