{"id":32478035,"url":"https://github.com/pnvdev/url-shortener-web","last_synced_at":"2026-07-04T22:31:41.271Z","repository":{"id":318419362,"uuid":"1071193853","full_name":"pnvdev/url-shortener-web","owner":"pnvdev","description":"Next.js project for a URL Shortener project","archived":false,"fork":false,"pushed_at":"2025-10-07T04:33:55.000Z","size":130,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-26T23:38:37.757Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://url-shortener-web-pearl.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pnvdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-07T02:16:39.000Z","updated_at":"2025-10-07T04:33:58.000Z","dependencies_parsed_at":"2025-10-07T05:36:42.470Z","dependency_job_id":"68cc2162-ec45-4ba0-98c8-16bb51c8d327","html_url":"https://github.com/pnvdev/url-shortener-web","commit_stats":null,"previous_names":["pnvdev/url-shortener-web"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pnvdev/url-shortener-web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pnvdev%2Furl-shortener-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pnvdev%2Furl-shortener-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pnvdev%2Furl-shortener-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pnvdev%2Furl-shortener-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pnvdev","download_url":"https://codeload.github.com/pnvdev/url-shortener-web/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pnvdev%2Furl-shortener-web/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35138074,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-04T02:00:05.987Z","response_time":113,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-26T23:26:51.975Z","updated_at":"2026-07-04T22:31:41.261Z","avatar_url":"https://github.com/pnvdev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# URL Shortener Web App\n\nUna aplicación web moderna construida con Next.js para crear, gestionar y redirigir URLs acortadas con una interfaz minimalista y elegante.\n\n## 📋 Tabla de Contenidos\n\n- [Características](#-características)\n- [Tecnologías](#-tecnologías)\n- [Requisitos Previos](#-requisitos-previos)\n- [Guía de Inicio Rápido](#-guía-de-inicio-rápido)\n- [Instalación y Configuración](#-instalación-y-configuración)\n- [Ejecución Local](#-ejecución-local)\n- [Despliegue en la Nube](#-despliegue-en-la-nube)\n- [Estructura del Proyecto](#-estructura-del-proyecto)\n- [API y Backend](#-api-y-backend)\n- [Uso de la Aplicación](#-uso-de-la-aplicación)\n\n## ✨ Características\n\n- **Creación de URLs Cortas**: Convierte URLs largas en enlaces cortos y compartibles\n- **Gestión de URLs**: Visualiza todas tus URLs acortadas en una lista organizada\n- **Almacenamiento Persistente**: Guarda tus URLs en el navegador (localStorage)\n- **Copiar al Portapapeles**: Copia URLs acortadas con un solo clic\n- **Página de Redirección**: Muestra un mensaje de carga antes de redirigir al destino\n- **Modo Oscuro**: Soporte completo para tema claro y oscuro\n- **Diseño Minimalista**: Interfaz limpia y profesional enfocada en la funcionalidad\n- **Responsive**: Funciona perfectamente en dispositivos móviles y de escritorio\n- **Notificaciones Toast**: Feedback visual para todas las acciones del usuario\n\n## 🛠️ Tecnologías\n\n- **Next.js 15.5.4** - Framework de React con Turbopack\n- **React 19.1.0** - Biblioteca de interfaz de usuario\n- **TypeScript 5** - Tipado estático para JavaScript\n- **Tailwind CSS 4.0** - Framework CSS utility-first\n- **LocalStorage API** - Persistencia de datos en el navegador\n\n## 📦 Requisitos Previos\n\nAntes de comenzar, asegúrate de tener instalado:\n\n- **Node.js** 18.0.0 o superior ([Descargar Node.js](https://nodejs.org/))\n- **npm** 9.0.0 o superior (incluido con Node.js)\n- **Git** (para clonar el repositorio)\n\nPara verificar las versiones instaladas:\n\n```bash\nnode --version\nnpm --version\ngit --version\n```\n\n## 🚀 Guía de Inicio Rápido\n\nEjecuta estos comandos para tener la aplicación corriendo en menos de 2 minutos:\n\n```bash\n# 1. Clona el repositorio\ngit clone \u003cURL_DEL_REPOSITORIO\u003e\ncd url-shortener-web\n\n# 2. Instala las dependencias\nnpm install\n\n# 3. Inicia el servidor de desarrollo\nnpm run dev\n```\n\n¡Listo! Abre [http://localhost:3000](http://localhost:3000) en tu navegador.\n\n## 🔧 Instalación y Configuración\n\n### 1. Clonar el Repositorio\n\n```bash\ngit clone \u003cURL_DEL_REPOSITORIO\u003e\ncd url-shortener-web\n```\n\n### 2. Instalar Dependencias\n\nUsando npm:\n```bash\nnpm install\n```\n\nUsando yarn:\n```bash\nyarn install\n```\n\nUsando pnpm:\n```bash\npnpm install\n```\n\n### 3. Configuración del Backend (Opcional)\n\nLa aplicación está configurada para usar el backend en `http://18.116.202.212`. Si necesitas cambiar esta URL:\n\n1. Abre `src/app/api/short-urls/route.ts`\n2. Modifica la variable `BACKEND_URL`:\n   ```typescript\n   const BACKEND_URL = 'http://TU_BACKEND_URL/api/short-urls';\n   ```\n\n3. Abre `src/app/s/[code]/page.tsx`\n4. Modifica la URL de redirección:\n   ```typescript\n   window.location.href = `http://TU_BACKEND_URL/s/${code}`;\n   ```\n\n## 💻 Ejecución Local\n\n### Modo Desarrollo\n\nEl modo desarrollo incluye hot-reload, lo que significa que verás los cambios instantáneamente:\n\n```bash\nnpm run dev\n```\n\nLa aplicación estará disponible en:\n- **URL principal**: [http://localhost:3000](http://localhost:3000)\n- **Si el puerto 3000 está ocupado**: [http://localhost:3001](http://localhost:3001)\n\n### Modo Producción (Local)\n\nPara probar la versión optimizada localmente:\n\n```bash\n# 1. Construir la aplicación\nnpm run build\n\n# 2. Iniciar el servidor de producción\nnpm start\n```\n\nLa aplicación estará disponible en [http://localhost:3000](http://localhost:3000)\n\n### Comandos Disponibles\n\n```bash\n# Desarrollo\nnpm run dev          # Inicia servidor de desarrollo con Turbopack\n\n# Producción\nnpm run build        # Construye la aplicación para producción\nnpm start            # Inicia el servidor de producción\n\n# Testing\nnpm test             # Ejecuta todos los tests\nnpm run test:watch   # Ejecuta tests en modo watch\nnpm run test:coverage # Genera reporte de cobertura\n\n# Utilidades\nnpm run lint         # Ejecuta ESLint para verificar código\n```\n\n## ☁️ Despliegue en la Nube\n\n### Opción 1: Vercel (Recomendado)\n\nVercel es la plataforma creada por los desarrolladores de Next.js y ofrece el mejor soporte:\n\n#### Despliegue Automático desde GitHub\n\n1. **Crea una cuenta en [Vercel](https://vercel.com)**\n\n2. **Conecta tu repositorio de GitHub**:\n   - Haz clic en \"Add New Project\"\n   - Selecciona tu repositorio de GitHub\n   - Vercel detectará automáticamente que es un proyecto Next.js\n\n3. **Configura el proyecto** (Vercel usa configuración por defecto):\n   - Framework Preset: Next.js\n   - Build Command: `npm run build`\n   - Output Directory: `.next`\n   - Install Command: `npm install`\n\n4. **Haz clic en \"Deploy\"**\n\n5. **Tu aplicación estará en línea** en una URL como:\n   ```\n   https://tu-proyecto.vercel.app\n   ```\n\n#### Despliegue desde la Terminal\n\n```bash\n# 1. Instala Vercel CLI\nnpm install -g vercel\n\n# 2. Inicia sesión en Vercel\nvercel login\n\n# 3. Despliega tu proyecto\nvercel\n\n# 4. Para producción\nvercel --prod\n```\n\n### Opción 2: Netlify\n\n1. **Crea una cuenta en [Netlify](https://www.netlify.com)**\n\n2. **Conecta tu repositorio**:\n   - Click en \"Add new site\" → \"Import an existing project\"\n   - Conecta con GitHub y selecciona tu repositorio\n\n3. **Configura el build**:\n   - Build command: `npm run build`\n   - Publish directory: `.next`\n\n4. **Despliega**\n\n### Opción 3: AWS Amplify\n\n1. **Crea una cuenta en [AWS Amplify](https://aws.amazon.com/amplify/)**\n\n2. **Conecta tu repositorio de GitHub**\n\n3. **Amplify detectará Next.js automáticamente**\n\n4. **Configuración de build** (amplify.yml):\n   ```yaml\n   version: 1\n   frontend:\n     phases:\n       preBuild:\n         commands:\n           - npm install\n       build:\n         commands:\n           - npm run build\n     artifacts:\n       baseDirectory: .next\n       files:\n         - '**/*'\n     cache:\n       paths:\n         - node_modules/**/*\n   ```\n\n5. **Despliega**\n\n### Opción 4: Docker\n\nSi prefieres usar Docker:\n\n```dockerfile\n# Dockerfile\nFROM node:18-alpine\n\nWORKDIR /app\n\nCOPY package*.json ./\nRUN npm ci\n\nCOPY . .\nRUN npm run build\n\nEXPOSE 3000\n\nCMD [\"npm\", \"start\"]\n```\n\nConstruir y ejecutar:\n\n```bash\n# Construir imagen\ndocker build -t url-shortener .\n\n# Ejecutar contenedor\ndocker run -p 3000:3000 url-shortener\n```\n\n### Variables de Entorno (Opcional)\n\nSi necesitas configurar variables de entorno en producción:\n\n1. Crea un archivo `.env.production`:\n   ```env\n   NEXT_PUBLIC_BACKEND_URL=http://18.116.202.212\n   ```\n\n2. Configura las variables en tu plataforma de despliegue:\n   - **Vercel**: Settings → Environment Variables\n   - **Netlify**: Site settings → Build \u0026 deploy → Environment\n   - **AWS Amplify**: App settings → Environment variables\n\n## 📁 Estructura del Proyecto\n\n```plaintext\nurl-shortener-web/\n├── public/                      # Archivos estáticos\n│   ├── file.svg\n│   ├── globe.svg\n│   ├── next.svg\n│   ├── vercel.svg\n│   └── window.svg\n├── src/\n│   └── app/\n│       ├── api/\n│       │   └── short-urls/\n│       │       └── route.ts     # Proxy API para evitar CORS\n│       ├── components/\n│       │   └── Header.tsx       # Componente de navegación\n│       ├── create/\n│       │   └── page.tsx         # Página de creación de URLs\n│       ├── s/\n│       │   └── [code]/\n│       │       └── page.tsx     # Página de redirección\n│       ├── favicon.ico\n│       ├── globals.css          # Estilos globales y animaciones\n│       ├── layout.tsx           # Layout principal de la app\n│       └── page.tsx             # Página principal (lista de URLs)\n├── eslint.config.mjs            # Configuración de ESLint\n├── next.config.ts               # Configuración de Next.js\n├── package.json                 # Dependencias y scripts\n├── postcss.config.mjs           # Configuración de PostCSS\n├── tailwind.config.ts           # Configuración de Tailwind CSS\n├── tsconfig.json                # Configuración de TypeScript\n└── README.md                    # Este archivo\n\n```\n\n### Descripción de Archivos Clave\n\n- **`src/app/page.tsx`**: Página principal que muestra la lista de URLs acortadas con opciones de copiar, redirigir y eliminar\n- **`src/app/create/page.tsx`**: Formulario para crear nuevas URLs acortadas\n- **`src/app/s/[code]/page.tsx`**: Página de redirección con animación de carga\n- **`src/app/api/short-urls/route.ts`**: Proxy para el backend que evita problemas de CORS\n- **`src/app/components/Header.tsx`**: Componente de navegación reutilizable\n- **`src/app/globals.css`**: Estilos globales, animaciones y tema oscuro\n\n## 🔌 API y Backend\n\nLa aplicación se conecta a un servicio backend de acortador de URLs en `http://18.116.202.212`\n\n### Crear URL Corta\n\n**Endpoint**: `POST /api/short-urls`\n\n**Request Body**:\n\n```json\n{\n  \"url\": \"https://www.example.com/very/long/url/path\"\n}\n```\n\n**Response**:\n\n```json\n{\n  \"original_url\": \"https://www.example.com/very/long/url/path\",\n  \"short_url\": \"http://18.116.202.212/s/2caf8b\",\n  \"short_code\": \"2caf8b\",\n  \"created_at\": \"2025-10-06T14:05:35.000000Z\"\n}\n```\n\n### Redirección\n\n**Endpoint**: `GET /s/{code}`\n\nRedirige automáticamente a la URL original asociada al código.\n\n### Flujo de Datos\n\n1. **Usuario ingresa URL** → Formulario en `/create`\n2. **Petición al proxy** → `POST /api/short-urls` (Next.js)\n3. **Proxy al backend** → `POST http://18.116.202.212/api/short-urls`\n4. **Respuesta del backend** → Código corto generado\n5. **Guardado local** → localStorage del navegador\n6. **Redirección** → Vista de lista en `/`\n\n## 📱 Uso de la Aplicación\n\n### 1. Ver URLs Acortadas\n\nEn la página principal (`/`):\n- Visualiza todas tus URLs acortadas\n- Información mostrada: ID, código, URL original y fecha de creación\n- Acciones disponibles por URL:\n  - **Copiar**: Copia la URL corta al portapapeles\n  - **Redirigir**: Prueba el enlace en una nueva pestaña\n  - **Eliminar**: Borra la URL de tu lista\n- **Clear All**: Elimina todas las URLs de una vez\n\n### 2. Crear Nueva URL\n\n1. Haz clic en \"Create URL\" en el header o en el botón de la página principal\n2. Ingresa la URL larga que quieres acortar\n3. La validación se hace en tiempo real (debe comenzar con http:// o https://)\n4. Haz clic en \"Shorten URL\"\n5. Serás redirigido a la página principal con tu nueva URL\n\n### 3. Probar Redirección\n\n1. En la lista de URLs, haz clic en el icono de redirección\n2. Se abrirá la página `/s/[code]` con una animación de carga\n3. Después de 1.5 segundos, serás redirigido al destino final\n\n### 4. Persistencia de Datos\n\n- Todas las URLs se guardan en el **localStorage** del navegador\n- Los datos persisten incluso después de cerrar el navegador\n- Solo se pierden si borras los datos del navegador o usas \"Clear All\"\n\n## 🎨 Características de Diseño\n\n- **Minimalista y Limpio**: Enfoque en funcionalidad sobre decoración\n- **Colores Neutros**: Paleta de grises, negro y blanco\n- **Modo Oscuro**: Soporte completo sin configuración adicional\n- **Responsive**: Adaptable a móviles, tablets y escritorio\n- **Accesibilidad**: Compatible con lectores de pantalla y navegación por teclado\n- **Animaciones Sutiles**: Transiciones suaves en hover y feedback visual\n\n## 🔍 Solución de Problemas\n\n### El servidor no inicia\n\n```bash\n# Limpia node_modules y reinstala\nrm -rf node_modules package-lock.json\nnpm install\nnpm run dev\n```\n\n### El puerto 3000 está ocupado\n\n```bash\n# Usa un puerto diferente\nPORT=3001 npm run dev\n```\n\nO Next.js automáticamente intentará usar el puerto 3001.\n\n### Errores de CORS\n\nLa aplicación usa un proxy interno (`/api/short-urls`) para evitar errores de CORS. Si experimentas problemas:\n\n1. Verifica que el backend esté en línea: `http://18.116.202.212`\n2. Revisa la consola del navegador para errores\n3. Asegúrate de que el proxy esté configurado correctamente\n\n### Los datos no persisten\n\nSi tus URLs no se guardan:\n\n1. Verifica que el navegador permita localStorage\n2. Revisa la consola para errores de JavaScript\n3. Prueba en modo incógnito para descartar extensiones\n\n## � Testing\n\nEste proyecto incluye un conjunto completo de tests para garantizar la calidad del código.\n\n### Configuración de Tests\n\nPara instalar las dependencias de testing:\n\n```bash\nnpm install\n```\n\n### Ejecutar Tests\n\n```bash\n# Ejecutar todos los tests\nnpm test\n\n# Ejecutar tests en modo watch (desarrollo)\nnpm run test:watch\n\n# Ejecutar tests con reporte de cobertura\nnpm run test:coverage\n```\n\n### Cobertura de Tests\n\nEl proyecto incluye tests para:\n\n- ✅ **Componentes**: Header, UrlListContent\n- ✅ **Páginas**: Home, Create, Redirect\n- ✅ **API Routes**: /api/short-urls\n- ✅ **Integración**: Flujos completos de usuario\n- ✅ **Utilidades**: Helpers y funciones auxiliares\n\n**Meta de cobertura**: 80%+ en todas las métricas\n\n### Documentación de Tests\n\nPara información detallada sobre testing, consulta:\n\n📖 **[TESTING.md](./TESTING.md)** - Guía completa de testing\n\nIncluye:\n- Estructura de tests\n- Cómo escribir nuevos tests\n- Mejores prácticas\n- Solución de problemas\n- Ejemplos de código\n\n### Continuous Integration\n\nLos tests se ejecutan automáticamente en:\n- Cada push a las ramas principales\n- Cada Pull Request\n- Antes del deployment\n\nVer configuración en `.github/workflows/test.yml`\n\n## �🤝 Contribuir\n\n¿Quieres contribuir? ¡Genial! Aquí está cómo:\n\n1. Fork el repositorio\n2. Crea una rama para tu feature (`git checkout -b feature/AmazingFeature`)\n3. Commit tus cambios (`git commit -m 'Add some AmazingFeature'`)\n4. Push a la rama (`git push origin feature/AmazingFeature`)\n5. Abre un Pull Request\n\n## 📄 Licencia\n\nEste proyecto es de código abierto y está disponible bajo la licencia MIT.\n\n## 📞 Soporte\n\nSi tienes preguntas o problemas:\n\n1. Revisa la sección [Solución de Problemas](#-solución-de-problemas)\n2. Abre un Issue en GitHub\n3. Consulta la documentación de [Next.js](https://nextjs.org/docs)\n\n## 🚀 Próximas Características\n\n- [ ] Autenticación de usuarios\n- [ ] Estadísticas de clics\n- [ ] URLs personalizadas\n- [ ] Fecha de expiración para URLs\n- [ ] Códigos QR para URLs cortas\n- [ ] Exportar URLs a CSV/JSON\n- [ ] API pública con documentación\n\n---\n\nDesarrollado con ❤️ usando Next.js y Tailwind CSS\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpnvdev%2Furl-shortener-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpnvdev%2Furl-shortener-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpnvdev%2Furl-shortener-web/lists"}