David (ダビッド ) | hace 6 meses | 3 min read

Codificación Conversacional para un URL Shortener con React + Supabase

Lovable es una plataforma de asistente de codificación basada en IA que te permite construir aplicaciones completas a través de conversaciones en lenguaje natural. Diseñado para sentirse como una programación en pareja con un agente intuitivo y receptivo, Lovable enfatiza la simplicidad, la velocidad y la creatividad. A diferencia de los IDE tradicionales, su interfaz principal es un solo chat donde describes tu intención, y el sistema construye el andamiaje, la interfaz de usuario y la lógica por ti.

Admite frameworks tanto de frontend como de backend, con una integración perfecta para herramientas populares como Supabase, lo que lo hace ideal para desarrolladores individuales, prototipos rápidos o la exploración de nuevas ideas. Tanto si eres un principiante como un desarrollador experimentado, Lovable ofrece un entorno minimalista que te mantiene enfocado en el flujo, no en la configuración.

Bien, empecemos a construir un acortador de URLs usando React y Supabase en Lovable. Originalmente, planeé construir la aplicación con un frontend en React, un backend en NestJS y MongoDB. Sin embargo, después de trabajar a través de múltiples iteraciones con Lovable, me di cuenta de que su integración con Supabase era más fluida y mejor soportada. Finalmente, abandoné el backend y MongoDB por completo en favor de un enfoque de solo frontend impulsado por Supabase.

Comencé el proyecto con este prompt:

Prompt

Quiero que actúes como un desarrollador full-stack experto y me ayudes a construir una webapp de acortador de URLs con funcionalidades de analítica de uso. El proyecto debe estar dividido en tres partes: frontend en ReactJS, backend en NestJS y base de datos MongoDB.

Funcionalidad principal de la aplicación:

El usuario podrá introducir una URL larga y el sistema generará automáticamente una URL corta.
Al visitar una URL corta, el sistema redirige al usuario a la URL original.
Las URLs generadas deben ser únicas y persistentes.
Se debe poder copiar fácilmente la URL acortada desde el frontend.
Debe haber validación de que la URL introducida sea válida.
Se puede opcionalmente permitir una URL personalizada si el alias no está en uso.

Funcionalidades de analítica de uso:

Cada vez que se accede a una URL acortada, registrar:
- Fecha y hora del clic.
- Dirección IP del visitante.
- Agente de usuario (user-agent).
- País (puede obtenerse vía GeoIP API).
- Cantidad total de clics por URL.
En el frontend, mostrar un panel con las estadísticas de cada URL acortada:
- Gráfico de visitas por día.
- Distribución por país.
- Número total de visitas.
- Últimos accesos.

Requisitos del frontend (ReactJS):

Página de inicio con un formulario para acortar URLs.
Componente para listar URLs acortadas del usuario (puede simularse login).
Dashboard para visualizar estadísticas de una URL específica.
Buen diseño UI/UX (puedes usar Tailwind o Material UI).
Conexión con el backend mediante API REST (Axios o Fetch).

Requisitos del backend (NestJS):

Endpoint para crear una URL corta a partir de una URL larga.
Endpoint para redirigir cuando se accede a la URL corta.
Endpoint para registrar cada acceso con los datos de analítica.
Endpoint para obtener estadísticas detalladas de una URL.
Validación de entrada, gestión de errores y sanitización de datos.
Guardar toda la información en una base de datos MongoDB.

Requisitos de la base de datos (MongoDB):

Colección urls con campos:
- _id, originalUrl, shortCode, createdAt, clicks, customAlias?
Colección analytics con campos:
- _id, shortCode, timestamp, ip, userAgent, country

Genera un esquema de carpetas recomendado para frontend y backend, y proporciona un ejemplo mínimo de código para cada una de las funcionalidades principales del backend y frontend. También incluye recomendaciones para implementar la geo-localización IP y buenas prácticas para generar los códigos cortos únicos.

¿El resultado? Una aplicación funcional en un par de días, impulsada principalmente por el asistente de IA mientras yo trabajaba en otras tareas en paralelo.

También puedes ver el progreso en GitHub.

Tabla Resumen

Categoría	Observaciones
Puntos Destacados	• UI súper simple: solo una interfaz de chat • Salida de código bien estructurada • Excelente para construcciones rápidas, especialmente herramientas pequeñas o MVPs
Puntos Débiles	• El límite diario de interacciones puede bloquear tu flujo • Para problemas más complejos, tendrás que sumergirte en el código tú mismo

Lovable es un excelente punto de entrada para la codificación de ambiente, especialmente para herramientas más simples o cuando buscas probar nuevas ideas rápidamente.