Gráficos Prototipos.
Concentric Analytics Prototype is a multi-tenant analytics dashboard built as an assignment for Infinite Locus, showcasing modern web development practices with Next.js and TypeScript. It features multi-tenant routing, seamless localization powered by intlayer, static data visualizations, and a polished login page. The project demonstrates a clean, scalable architecture suited for real-world analytics applications.
Concentric Analytics Prototype es un panel de control de análisis con todas las funciones, desarrollado como una tarea técnica para Infinite Locus. Construido con Next.js y TypeScript, este proyecto sirve como una prueba de concepto para una plataforma de análisis escalable y multiinquilino, demostrando cómo se pueden combinar tecnologías web modernas para ofrecer una experiencia de usuario limpia y lista para producción.
Características principales.
- Enrutamiento multiinquilino:La aplicación admite el enrutamiento aislado por cliente, lo que permite una única implementación para atender a múltiples organizaciones con contextos de datos y espacios de nombres de URL distintos.
- Localización con intlayer:La internacionalización se gestiona mediante intlayer, lo que proporciona un enfoque estructurado y seguro en cuanto a tipos para administrar las traducciones y el contenido adaptado a diferentes regiones dentro del panel de control.
- Gráficos estáticos:El panel incluye visualizaciones de datos predefinidas que ilustran métricas clave de análisis, ofreciendo una visión clara e inmediata del rendimiento empresarial.
- Página de inicio de sesión:Un punto de acceso de autenticación dedicado ofrece una experiencia de inicio de sesión pulida y fácil de usar, que se mantiene coherente con el lenguaje de diseño general de la aplicación.
Pila tecnológica.
El prototipo está construido sobre...Next.jsaprovechando su App Router para un sistema de enrutamiento flexible basado en archivos y capacidades de renderizado del lado del servidor.TypeScriptse utiliza en todo el código base para garantizar la seguridad de tipos y mejorar la experiencia del desarrollador, mientras queintlayerse encarga de todas las cuestiones de localización de una manera estructurada y fácil de mantener.
En general, el prototipo de Concentric Analytics refleja un compromiso con una arquitectura limpia, la ergonomía del desarrollador y una experiencia de usuario bien pensada, lo que lo convierte en una base sólida para un producto de análisis de producción.
Un inquilino es un segmento de ruta, un tema y una lista de características.
En este contexto, la multi-inquilinato no se basa en una columna de base de datos que se verifica en cada consulta; sino que está determinada por la URL. Cada página reside bajo src/app/[inquilino]/[idioma]/..., lo que significa que el inquilino se resuelve antes de que se renderice cualquier componente, y no se infiere a partir de una sesión posterior. Cada registro de inquilino (tenant.ts) contiene su propio objeto de tema: color primario, color secundario, fuente, radio, espaciado, así como su propia matriz de características (gráficos, integraciones, notificaciones, usuarios). Esto permite que dos inquilinos que acceden a la misma ruta puedan mostrar colores, radios de esquinas y navegación genuinamente diferentes, dependiendo de lo que realmente esté configurado en sus archivos, y no solo de sus datos.
The two demo tenants make this concrete: orgA gets a warm/gray theme with just the charts feature, orgB gets the inverse palette plus users and notifications on top. Same codebase, same route tree, different config file — that's the whole mechanism.
tenantConfig.ts carga ese mapa desde public/tenant.json utilizando una caché en memoria y una configuración de respaldo predefinida integrada en el propio módulo. De esta manera, si falta o está mal formado el archivo, se recurre a dos inquilinos de demostración funcionales en lugar de que la compilación falle. El inicio de sesión también es específico para cada inquilino: las cuentas de demostración (un administrador y un usuario de prueba por organización) definidas en src/data/users.ts incluyen un campo de inquilino, por lo que autenticarse como el usuario de prueba de orgA no otorga acceso al panel de control de orgB.
¿Cuánto cuesta implementar correctamente el "enrutamiento por inquilino y por ubicación"?
La estructura de directorios, donde se anida la configuración regional dentro del inquilino ([inquilino]/[configuración regional]/page.tsx) en lugar del orden más común [configuración regional]/[inquilino], fue una decisión deliberada para este prototipo: la identidad del inquilino controla todo lo demás, como el tema, las funciones y la autenticación, por lo que debe resolverse primero en el árbol de segmentación, con la configuración regional como una propiedad de la sesión de ese inquilino, en lugar de ser un elemento independiente.
