https://github.com/davidcortesa/lupalocal
🔍 Auditoría web gratuita para negocios locales — Score de rendimiento, Core Web Vitals, SEO y semáforo de tareas en segundos. Construido con Next.js 16, Tailwind v4 y la API de Google PageSpeed.
https://github.com/davidcortesa/lupalocal
nextjs pagespeed saas seo tailwindcss typescript vercel
Last synced: 14 days ago
JSON representation
🔍 Auditoría web gratuita para negocios locales — Score de rendimiento, Core Web Vitals, SEO y semáforo de tareas en segundos. Construido con Next.js 16, Tailwind v4 y la API de Google PageSpeed.
- Host: GitHub
- URL: https://github.com/davidcortesa/lupalocal
- Owner: DavidCortesA
- Created: 2026-04-24T18:51:19.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2026-04-24T19:04:21.000Z (about 2 months ago)
- Last Synced: 2026-04-24T21:13:33.366Z (about 2 months ago)
- Topics: nextjs, pagespeed, saas, seo, tailwindcss, typescript, vercel
- Language: TypeScript
- Homepage: https://lupa-local.vercel.app
- Size: 1020 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# 🔍 LupaLocal
### Auditoría Web Inteligente para Negocios Locales
**¿Tu web atrae clientes o los espanta?**
Analiza gratis la velocidad, el SEO y la seguridad de tu sitio en segundos.
Sin tecnicismos. Resultados claros.
[](https://nextjs.org)
[](https://react.dev)
[](https://www.typescriptlang.org)
[](https://tailwindcss.com)
[](https://vercel.com)
---
## ✨ ¿Qué es LupaLocal?
LupaLocal es una herramienta **SaaS** que convierte las métricas técnicas de tu web en un lenguaje claro y accionable, pensado para dueños de negocios locales que quieren **vender más** a través de su presencia digital.
---
## 🚀 Características
| | Funcionalidad |
|---|---|
| ⚡ | **Score Global** de rendimiento con gauge visual circular |
| 📊 | **Core Web Vitals** completos: FCP, LCP, CLS, TBT, TTI, Speed Index |
| 🔍 | **Scores individuales** de SEO, Accesibilidad y Buenas Prácticas |
| 🚦 | **Semáforo de Tareas** con 8 puntos de auditoría y descripciones en español |
| 🔒 | **Vista PRO** desbloqueada con Plan de Acción + Análisis de Competencia |
| 📄 | **Descarga PDF** del reporte generado en el cliente con `jsPDF` |
| 🌙 | **Dark / Light mode** con toggle y soporte a preferencia del sistema |
| 🗺️ | **SEO completo**: Open Graph, Twitter Card, JSON-LD, sitemap, robots.txt |
---
## 🖼️ Pantallas
| 🏠 Landing | 📊 Dashboard | 💼 Servicios |
|:-----------:|:------------:|:------------:|
| Hero con análisis gratuito | Score + Semáforo + Core Web Vitals | 3 planes de mejora con CTA |
---
## ⚙️ Cómo funciona
```
Usuario ingresa URL
↓
Google PageSpeed Insights API (mobile)
↓
Server Component procesa la respuesta
↓
Dashboard con Score · Vitals · Semáforo
↓
Vista PRO → Plan de Acción personalizado
↓
Exportar reporte en PDF
```
---
## 🛠️ Stack Tecnológico
- **Framework** — Next.js 16 (App Router, Server Components)
- **UI** — shadcn/ui · Radix UI · Tailwind CSS v4
- **Iconos** — Lucide React
- **Temas** — next-themes (dark / light / system)
- **PDF** — jsPDF (generación client-side)
- **API** — Google PageSpeed Insights v5
- **Deploy** — Vercel
---
## 🏃 Correr en local
```bash
# 1. Clonar el repositorio
git clone https://github.com/tu-usuario/lupalocal.git
cd lupalocal
# 2. Instalar dependencias
npm install
# 3. Configurar variables de entorno
cp .env.example .env
# Edita .env con tu API key de Google PageSpeed
# 4. Iniciar el servidor de desarrollo
npm run dev
```
Abre [http://localhost:3000](http://localhost:3000) en tu navegador.
---
## 🔑 Variables de Entorno
```env
# API key de Google PageSpeed Insights
NEXT_PUBLIC_API_TOKEN=tu_api_key_aqui
# URL de tu sitio desplegado (para SEO y sitemap)
NEXT_PUBLIC_SITE_URL=https://lupa-local.vercel.app/
```
> **Obtén tu API key gratis** en [Google Cloud Console](https://console.cloud.google.com/) habilitando la API de *PageSpeed Insights*.
---
## 🔍 Vista PRO (demo)
Para ver la experiencia completa desbloqueada, agrega `&version=PRO` a cualquier resultado:
```
/resultados?url=https://tupyme.com&version=PRO
```
Desbloquea el **Plan de Acción Personalizado** y el **Análisis de Competencia Local** 🏆
---
## 📁 Estructura del Proyecto
```
app/
├── page.tsx # 🏠 Landing page
├── resultados/page.tsx # 📊 Dashboard de auditoría
├── servicios/page.tsx # 💼 Página de planes
├── api/audit/route.ts # 🔌 Proxy a PageSpeed API
├── sitemap.ts # 🗺️ Sitemap automático
└── robots.ts # 🤖 robots.txt
components/
├── search-input.tsx # 🔍 Formulario de búsqueda
├── score-gauge.tsx # ⭕ Gauge SVG circular
├── download-pdf-button.tsx # 📄 Generador de PDF
└── mode-toggle.tsx # 🌙 Toggle dark/light
lib/
└── audit.ts # 🧠 Lógica de auditoría PageSpeed
```
---
## 🚢 Deploy en Vercel
[](https://vercel.com/new)
1. Importa el repositorio en Vercel
2. Agrega las variables de entorno en **Settings → Environment Variables**
3. Deploy 🎉
---
Hecho con ❤️ para impulsar los negocios locales