MiauMatch 🐱

Plataforma de adopción de gatos. Conectamos gatitos que necesitan un hogar con personas que quieren adoptar.

Construida con Payload CMS y Next.js. Usa PostgreSQL y Vercel Blob Storage.

Funcionalidades principales

• 🐱 Perfiles de gatos — Ficha completa con nombre, edad, sexo, raza, personalidad, salud, ubicación y galería de fotos
• 📱 Contacto por WhatsApp — Botón directo para consultar por un gato con mensaje personalizado
• ✍️ Blog — Publicá historias de adopción, consejos y novedades
• 📄 Páginas — Armá páginas institucionales con layout builder
• 🔍 SEO — Meta tags, Open Graph y sitemap automático por gato y página
• 🌓 Modo oscuro — Soporte completo para light y dark mode
• 📱 Responsive — Funciona en mobile, tablet y desktop
• 🔎 Búsqueda — Buscador integrado en el sitio

Stack técnico

• Next.js 16 — App Router
• Payload CMS 3 — Headless CMS con panel de administración
• TailwindCSS 4 — Estilos utilitarios
• shadcn/ui — Componentes accesibles
• TypeScript — Tipado estático
• PostgreSQL — Base de datos (Neon en Vercel)
• Vercel Blob Storage — Almacenamiento de imágenes

Desarrollo local

Requisitos

• Node.js 18.20.2+ o 20.9.0+
• pnpm 11+
• PostgreSQL (local o en la nube)

Setup

# 1. Clonar el repo
git clone <repo-url> && cd MiauMatch

# 2. Variables de entorno
cp .env.example .env
# Editar .env con tu POSTGRES_URL y BLOB_READ_WRITE_TOKEN

# 3. Instalar dependencias
pnpm install

# 4. Levantar el servidor de desarrollo
pnpm dev

Abrí http://localhost:3000 en el navegador. El panel de administración está en /admin.

Docker (opcional)

# Modificar POSTGRES_URL en .env a:
# postgres://postgres@localhost:54320/miaumatch

docker-compose up -d
pnpm dev

Estructura del proyecto

src/
├── app/                  # Next.js App Router
│   ├── (frontend)/       # Sitio público
│   │   ├── gatos/        # Listado y detalle de gatos
│   │   ├── posts/        # Blog
│   │   └── search/       # Búsqueda
│   └── (payload)/        # Panel de administración
├── collections/          # Colecciones de Payload
│   ├── Cats/             # Gatos en adopción
│   ├── Pages/            # Páginas
│   ├── Posts/            # Blog
│   ├── Media/            # Imágenes y archivos
│   ├── Users/            # Usuarios del admin
│   └── Categories.ts     # Categorías del blog
├── globals/              # Configuración global
│   └── Contacto.ts       # WhatsApp y datos de contacto
├── components/           # Componentes React
├── blocks/               # Bloques del layout builder
└── heros/                # Componentes hero

Modelo de datos

Gato (cats)

Campo	Tipo	Descripción
name	text	Nombre del gato
description	richText	Historia y descripción
photos	array	Galería de fotos (1-8)
age	select	Cachorro, Joven, Adulto, Senior
gender	select	Macho / Hembra
breed	text	Raza
personality	select[]	Rasgos: Cariñoso, Juguetón, Tranquilo, etc.
health	textarea	Info de vacunación, castración, salud
location	text	Dónde está
adopted	checkbox	Si ya fue adoptado
meta	group	Título, descripción e imagen para SEO

Contacto (contacto)

Configuración global editable desde el panel de administración:

Campo	Descripción
whatsapp.phoneNumber	Número de WhatsApp para consultas
whatsapp.messageTemplate	Plantilla del mensaje (usa {name} para el nombre del gato)

Deploy

El proyecto está diseñado para deployar en Vercel con Neon (PostgreSQL) y Vercel Blob Storage.

# Build de producción
pnpm build

# Iniciar en producción
pnpm start

Variables de entorno requeridas

Variable	Descripción
PAYLOAD_SECRET	Secreto para firmar JWTs
POSTGRES_URL	String de conexión a PostgreSQL
BLOB_READ_WRITE_TOKEN	Token de Vercel Blob Storage
CRON_SECRET	Secreto para tareas programadas
PREVIEW_SECRET	Secreto para live preview
NEXT_PUBLIC_WHATSAPP_NUMBER	Fallback si no se configura en el admin

Migraciones

# Crear una migración
pnpm payload migrate:create

# Ejecutar migraciones pendientes
pnpm payload migrate

Tests

# Tests de integración (Vitest)
pnpm test:int

# Tests end-to-end (Playwright)
pnpm test:e2e

# Todos los tests
pnpm test

Licencia

MIT