Volver a proyectos

ZipLink

Acortá links. Seguí cada clic. Conocé a tu audiencia.

Tipo
App web full stack
Rol
Único desarrollador
Año
2026
Stack
  • Next.js
  • shadcn/ui
  • SWR
  • Express
  • Node.js
  • MongoDB
  • Mongoose
  • Vercel
Dashboard de analíticas de ZipLink

ZipLink es un acortador de URLs pensado para lo que pasa después del clic. Creás links cortos en segundos, les ponés fecha de vencimiento y ves analíticas en tiempo real de cada visita. El frontend está hecho con Next.js y la API con Express, Node.js y MongoDB.

Un link corto solo no te dice mucho. Si compartís un link, lo que sirve es saber quién lo abrió: desde qué dispositivo y navegador, desde qué país y ciudad, y de dónde venía. ZipLink junta todo eso en un panel, al lado de los links.

Hice el frontend con Next.js y una API REST con Express y Node.js, guardando links y clics en MongoDB con Mongoose. Cada redirección registra la visita con tipo de dispositivo, navegador, país, ciudad y origen, y el panel lo convierte en analíticas por link. Los links pueden vencer en una fecha y cada uno tiene su página pública de redirección. El frontend está desplegado en Vercel.

  • Links cortos con fecha de vencimiento opcional
  • Analíticas por clic: dispositivo, navegador, país, ciudad y origen
  • Panel para gestionar los links y sus estadísticas en un solo lugar
  • Frontend en Next.js y API REST en Express, separados
  • Autenticación con rutas protegidas
  1. Middleware de autenticación en el Edge runtime

    El middleware de Next.js corre en el Edge runtime, no dentro de React. La primera versión de la protección de rutas usaba código que solo funciona en componentes, así que pasé el chequeo de sesión a lógica de cookies pura en el middleware y sumé un endpoint para que el cliente cargue el usuario actual por su cuenta.

  2. Sesiones que desaparecían en el celular

    El login andaba en la compu pero en el celular la sesión se perdía durante las pruebas. La cookie tenía el flag secure y el navegador la descartaba sin avisar al ir por HTTP. Una vez que lo encontré, el arreglo estuvo en cómo se configuraba la cookie.

  3. Errores de la API que no llegaban al usuario

    La capa de fetching se tragaba los errores que mandaba la API, así que la interfaz mostraba fallas genéricas. Rehíce el fetcher para que el mensaje real del backend llegue a la pantalla, incluido el caso de token vencido.

  • Demo en vivo desplegada en Vercel
  • Código del backend público en GitHub

¿Tenés un proyecto o una búsqueda en mente?

Hablemos

Siguiente proyecto

Panel de administración interno (app de escritorio en Electron)

Delivery Hub Manager

Panel de administración interno para una plataforma de delivery con más de 5.000 pedidos por día.