Broslunas Links

Broslunas Links es una aplicación web orientada a la gestión de redireccionamientos y analítica de tráfico web. El sistema funciona como un servicio SaaS (Software as a Service) que permite a los usuarios acortar URLs, personalizar dominios y monitorizar métricas de rendimiento en tiempo real. La arquitectura está diseñada bajo el principio de “Serverless-first”, aprovechando las capacidades full-stack de Next.js para minimizar la latencia en la redirección y maximizar la escalabilidad de la base de datos.

Stack Tecnológico y Decisiones de Arquitectura

La infraestructura del proyecto se basa en el stack MERN moderno (con Next.js sustituyendo a Express/React vanilla), seleccionado por su capacidad de manejar renderizado híbrido y tipos estáticos robustos.

Módulos del Sistema

Módulo de Gestión de Enlaces

La creación de enlaces utiliza un patrón de diseño de Máquina de Estados Finito implementado en el frontend.

Flujo: El usuario avanza por 4 etapas estancas (Input -> Personalización -> Opciones -> Revisión).

Validación: Uso de Zod para validación de esquemas en tiempo real antes de enviar la petición al servidor.

UI: Componentes reactivos controlados que mantienen el estado del formulario en memoria hasta la confirmación final.

Sistema de Redirección

El núcleo del acortador reside en el manejo de peticiones dinámicas.

Se utiliza el Middleware de Next.js para interceptar las rutas entrantes (/[slug]).

Búsqueda Optimizada: El sistema consulta la base de datos para resolver el destino de la URL.

Registro Asíncrono: La redirección ocurre casi instantáneamente, mientras que el registro del “clic” (User Agent, IP, Geo-localización) se despacha a una cola de eventos o proceso en segundo plano para no bloquear la experiencia del usuario final.

Dashboard y Visualización de Datos

Renderizado: El panel de control utiliza Server Side Rendering (SSR) para la carga inicial de datos críticos, mejorando el First Contentful Paint (FCP).

Gráficos: Integración de librerías de visualización (como Recharts o Chart.js) que consumen datos agregados desde la API.

Tiempo Real: Implementación de SWR (Stale-While-Revalidate) o TanStack Query para el “long-polling” o actualización periódica de las estadísticas sin necesidad de recargar la página, simulando una experiencia de sockets en vivo.

Seguridad y Rendimiento

Autenticación y Autorización

Se implementa un sistema de sesiones seguras (posiblemente vía NextAuth.js) que maneja JWTs (JSON Web Tokens).

Protección de Rutas: Middleware que verifica el token antes de renderizar el dashboard (/app/*).

Protección de API: Rate Limiting aplicado a las rutas de creación de enlaces para prevenir spam.

Optimización de Frontend

Code Splitting: Next.js divide automáticamente el código JavaScript por rutas.

Optimización de Fuentes e Imágenes: Uso de next/font y next/image para prevenir Layout Shifts (CLS) y optimizar la carga de activos estáticos.

Escalabilidad Futura

La arquitectura actual permite el desacoplamiento fácil de servicios. Si el tráfico escala masivamente:

La lógica de redirección puede moverse a Edge Functions distribuidas globalmente.

La base de datos de analíticas puede migrarse a una solución específica de Time-Series o Big Data sin afectar la lógica transaccional de la aplicación.