🐶 Perritos Abandonados
Sitio benéfico donde cualquier persona puede marcar en un mapa dónde vio un
perrito abandonado, para que otros puedan ayudarlo o rescatarlo.
- Mapa: OpenStreetMap + Leaflet (gratis, sin API key)
- Base de datos: Supabase (Postgres gratis)
- Deploy: Vercel
1. Crear el proyecto en Supabase
- Andá a https://supabase.com y creá una cuenta / iniciá sesión (es gratis).
- Creá un proyecto nuevo (elegí cualquier nombre, ej.
perritos-abandonados).
- Cuando el proyecto esté listo, andá a SQL Editor y ejecutá el contenido
del archivo
supabase.sql de este repo. Esto crea la
tabla perritos y los permisos para que cualquiera pueda ver y marcar
perritos, sin poder borrar los de otros.
- Andá a Storage y creá un bucket nuevo llamado exactamente
fotos,
marcado como público. Ahí se guardan las fotos que suba la gente.
- Andá a Project Settings > API y copiá:
Project URLanon public key (o publishable key, en proyectos nuevos)
2. Configurar las variables de entorno
Copiá .env.local.example a .env.local y completá con los datos de
Supabase:
cp .env.local.example .env.local
NEXT_PUBLIC_SUPABASE_URL=https://tu-proyecto.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=tu-anon-key
SUPABASE_SECRET_KEY=tu-secret-key
ADMIN_PASSWORD=elegí-una-contraseña-fuerte
SUPABASE_SECRET_KEY y ADMIN_PASSWORD son secretas (sin prefijo
NEXT_PUBLIC_): solo las usa el servidor, nunca llegan al navegador.
3. Correr en local
npm install
npm run dev
Abrí http://localhost:3000
4. Deploy en Vercel
- Subí este proyecto a un repositorio de GitHub.
- En https://vercel.com, importá el repositorio.
- En Environment Variables, agregá las cuatro variables de
.env.local.
- Deploy. Listo, el sitio queda público.
Cómo funciona
- Cualquier visitante puede hacer click en el mapa para marcar un perrito:
se abre un formulario chico donde pone una descripción, estado (visto /
en riesgo / ya rescatado) y opcionalmente una foto (desde la cámara o la
galería del celular).
- La foto se comprime automáticamente en el navegador antes de subirse
(máximo ~1280px de ancho), para no gastar de más el almacenamiento
gratuito de Supabase. Con eso entran más de 2500 fotos en el 1GB gratis.
- Todos los marcadores se guardan en Supabase y se muestran a todos los
visitantes en tiempo real (al recargar la página).
- No hace falta cuenta ni login para marcar un perrito — está pensado para
que sea lo más fácil posible de usar.
- El mapa arranca centrado en Cañuelas, Buenos Aires, y tiene un buscador
de direcciones (usando Nominatim/OpenStreetMap, gratis) para ubicarse
rápido en cualquier punto.
- Cada perrito marcado muestra un número visible ("Perrito #7") en su
cartel. Sirve para identificarlo fácil cuando alguien lo rescata: en el
Table Editor de Supabase (tabla
perritos) podés buscar por ese
número en la columna numero y borrar esa fila puntual.
Modo administrador (marcar rescatado / eliminar)
Arriba a la derecha del mapa hay un botón "🔒 Acceso equipo". Cualquier
persona a la que le compartas la contraseña de ADMIN_PASSWORD puede:
- Tocar ese botón e ingresar la contraseña (queda guardada en su navegador
hasta que cierre la pestaña o toque "salir" — no hace falta escribirla
cada vez).
- Una vez adentro, en el cartel de cada perrito aparecen dos botones
nuevos: ✅ Marcar rescatado y 🗑️ Eliminar.
La contraseña se valida en el servidor (src/app/api/moderar/route.ts),
nunca en el navegador, así que aunque alguien mire el código del sitio no
puede saltearla. Cargar un perrito nuevo sigue sin pedir nada — esa parte
sigue abierta a cualquiera a propósito, para que reportar sea lo más fácil
posible.
Si en algún momento querés cambiar quién tiene acceso, simplemente cambiá
ADMIN_PASSWORD en Vercel (Project Settings → Environment Variables) y
volvé a compartir la nueva contraseña con tu equipo.
Posibles mejoras a futuro
- Login individual por persona (en vez de una contraseña compartida), con
Supabase Auth, si el equipo crece mucho.
- Filtro por estado (solo mostrar "en riesgo", etc.).
- Botón de "compartir ubicación actual" usando geolocalización del navegador.
