Abre la mayoría de las plantillas de «panel SaaS» y lo que obtienes es una captura de pantalla bonita: una barra lateral que no se contrae, una tabla que no se ordena, un botón de «crear tarea» que no hace nada. Projectly es diferente: es un producto completo e interconectado por el que puedes navegar de principio a fin. Crea una tarea y mírala aparecer al instante en el panel, en la página de detalle del proyecto y en los gráficos de analítica, porque todo lee del mismo almacén de datos. Selecciona veinte tareas a la vez y cambia su estado con un solo clic. Invita a un miembro del equipo, cambia su rol y filtra el directorio del equipo por estado. Abre el menú de comandos ⌘K y salta a cualquier sitio o lanza una acción rápida sin tocar el ratón. Así debería sentirse tu producto desde el primer día, no como una maqueta que tienes que terminar de construir para que sea honesta.

https://neural-dashboardproject.netlify.app/

Por dentro es una superficie de producto genuina, no una sola página. El Dashboard muestra métricas derivadas en vivo, un gráfico de tendencia de tareas completadas, un resumen de carga de trabajo, tareas prioritarias, próximos plazos y un aviso de tareas vencidas para que lo más urgente nunca quede enterrado. Projects es una cuadrícula de tarjetas con búsqueda y filtro por estado, con un modal de creación/edición y una página de detalle con pestañas para tareas y actividad. Tasks es una tabla de datos ordenable, filtrable y paginada, con selección de filas, actualizaciones de estado en bloque, eliminación en bloque, un formulario de creación/edición con validación y un panel lateral de detalle, y en móvil se transforma en tarjetas táctiles en lugar de obligarte a desplazarte en horizontal. Team, Analytics, Notifications y Settings (perfil, espacio de trabajo, preferencias de notificaciones, tema claro/oscuro/del sistema) completan un producto que se siente terminado y no a medio construir.

Nada de esto requiere un backend para probarlo. Toda la aplicación funciona sobre una capa de servicios simulados con tipos y datos semilla realistas: sin claves de API, sin base de datos, sin variables de entorno. Pero no es un callejón sin salida: cada servicio (tareas, proyectos, equipo, analítica, notificaciones) está detrás de una sola interfaz y de un único archivo de composición, así que sustituirlo por tu API real consiste en implementar esa interfaz y cambiar una sola importación, sin tocar el código de ninguna funcionalidad. El cambio de marca es igual de contenido: un único archivo de tokens CSS controla todos los colores de la aplicación (incluidos los gráficos), el nombre del producto está en unos pocos puntos claramente documentados, y añadir una página nueva, un elemento de navegación o una columna de tabla sigue un patrón documentado y repetible en lugar de obligarte a rastrear todo el código.

Creado con React 19, TypeScript, Vite, Tailwind CSS, Radix UI (mediante una pequeña capa de componentes al estilo shadcn), React Router, Framer Motion, Recharts, TanStack Table, React Hook Form y Zod: todas las dependencias son gratuitas y de código abierto, con todas las atribuciones incluidas. La calidad no fue una ocurrencia tardía: temas claro y oscuro (oscuro por defecto), un diseño adaptable que prioriza el móvil hasta el ancho de un teléfono, animaciones que respetan el ajuste «reducir movimiento» del sistema operativo y una revisión de accesibilidad específica que corrigió fallos de contraste WCAG AA, un salto en la jerarquía de encabezados y la restauración del foco en cada diálogo y panel lateral de la aplicación. Lo que obtienes: el código fuente completo, siete archivos de documentación (instalación, arquitectura, personalización, componentes, servicios simulados, despliegue y resolución de problemas) y un registro de cambios que muestra la historia real de pulido que hay detrás.