Pepanimal

21 de abril de 2026

Pepanimal

Plataforma full-stack y multilingüe (ES/EN/FR/PT) para la adopción responsable de perros y gatos. Conecta a refugios con adoptantes y digitaliza todo el proceso: desde la publicación del animal hasta la selección del adoptante final, con catálogo público, panel de gestión para refugios, chat integrado y notificaciones.

Proyecto desarrollado en solitario y de extremo a extremo: arquitectura, frontend, backend, base de datos, librería de componentes e infraestructura.

Índice

El problema

La adopción de animales suele gestionarse de forma dispersa e informal: publicaciones sueltas en redes sociales, conversaciones por WhatsApp o Instagram, hojas de cálculo y ningún seguimiento estructurado de las solicitudes. Esto genera dos dolores concretos:

  • Para los refugios: dificultad para dar visibilidad a sus animales, recibir solicitudes de forma ordenada, evaluar candidatos con criterio, coordinar al equipo (varios voluntarios y trabajadores) y hacer seguimiento del estado de cada adopción. La información vive repartida entre varias herramientas.
  • Para los adoptantes: no existe un lugar centralizado donde ver animales de distintos refugios, la información de cada animal es incompleta y el proceso de solicitud es opaco (no saben en qué estado está su petición ni cómo comunicarse con el refugio).

La solución

Pepanimal centraliza y digitaliza todo el flujo de adopción en una sola plataforma:

  • Un catálogo público donde cualquier persona explora perros y gatos en adopción, con fichas detalladas (temperamento, compatibilidad con otras mascotas y niños, estado de salud, ubicación y refugio responsable).
  • Un panel de gestión para refugios para dar de alta animales con fotos y vídeo, publicar adopciones, gestionar el equipo por roles e invitaciones y coordinar casas de acogida.
  • Un flujo de solicitud estructurado: el adoptante rellena un cuestionario de pre-adopción y envía la solicitud; el refugio la evalúa en un tablero con estados (En revisión → En proceso → Validada / Descartada), añade comentarios internos, chatea con el candidato y finalmente selecciona al adoptante definitivo.
  • Un sistema de notificaciones que mantiene informado al adoptante en cada cambio de estado y cuando es seleccionado como candidato final.

El resultado es un proceso transparente, trazable y con comunicación integrada, sin depender de herramientas externas.

Landing page de Pepanimal con el hero "Conectamos corazones con patitas", alta de refugio y pasos para adoptar

Funcionalidades clave

  • Catálogo público multilingüe de animales por especie, con ordenación y filtros (raza, tamaño, ubicación) y rutas localizadas por slug (/animals/perros en ES, /animals/dogs en EN).
  • Ficha detallada de animal: galería de imágenes y vídeo, temperamento (nivel de energía e independencia, compatibilidad con gatos/perros/niños/personas), estado de salud (vacunas, desparasitado, esterilizado, condición médica especial) y datos del refugio.
  • Autenticación con email/contraseña y Google OAuth (Better Auth).
  • Panel de refugio con métricas (animales disponibles, en acogida, adopciones del mes, tiempo medio en el refugio) y gráficos.
  • Gestión de animales: alta, edición, subida de imágenes y vídeo, asignación de cuidadores y de casa de acogida.
  • Tablero kanban de solicitudes con estados, comentarios internos del equipo y selección de candidato final.
  • Chat integrado entre refugio y adoptante, asociado a cada solicitud.
  • Cuestionario de pre-adopción configurable, con preguntas multilingües.
  • Gestión de equipo del refugio: invitaciones por email con roles (ADMIN / WORKER).
  • Casas de acogida: registro y asignación de animales a hogares temporales.
  • Blog de contenidos sobre adopción y cuidado de mascotas (52 artículos en cada uno de los 4 idiomas), renderizado con MDX.
  • SEO técnico: metadata dinámica, datos estructurados JSON-LD, sitemap y robots dinámicos y hreflang multilingüe.
  • Moderación de imágenes con IA: cada foto subida se analiza con la API de moderación de OpenAI para bloquear contenido no permitido.

Catálogo público de perros en adopción con tarjetas por animal y controles de orden y filtros

Ficha detallada de un animal con foto, datos básicos, condiciones de adopción, comportamiento, salud y refugio responsable

Blog de contenidos sobre adopción y cuidado de mascotas, con tarjetas por artículo y paginación

Stack técnico

Monorepo con npm workspaces (apps/*, packages/*), Node ≥ 24, desplegado en Vercel con un proyecto independiente por app y builds condicionales por carpeta.

Frontend (apps/web) — Next.js 16 (App Router) · React 19 · TypeScript · Tailwind CSS 4 · TanStack Query · Zustand · react-hook-form + Zod · next-intl (4 idiomas) · Better Auth · MDX para el blog · FFmpeg (WASM) para compresión de vídeo en el navegador.

Backend (apps/api) — Hono sobre Node · arquitectura limpia de 4 capas (domain → application → infra → presentation) · InversifyJS (inyección de dependencias) · Prisma 7 · Better Auth (email + Google OAuth) · Zod · OpenAI (moderación de imágenes) · sharp (optimización a WebP) · Nodemailer + React Email · AWS SDK S3 · Pino.

Base de datos — PostgreSQL con Prisma (~25 modelos), Neon (serverless) en producción. Sistema de traducciones a nivel de datos mediante un modelo Multilang que guarda las cuatro variantes de idioma.

Librería de componentes (packages/react-ui) — librería local con Vite + Storybook, arquitectura Atomic Design, Recharts para los gráficos y drag & drop para el kanban.

Retos técnicos

Multilingüismo real a nivel de datos, no solo de UI. La i18n no se limita a los textos de interfaz (resuelta con next-intl): el contenido dinámico del dominio —razas, países, provincias y preguntas del cuestionario— también existe en los cuatro idiomas. Se resolvió con un modelo Multilang en base de datos al que apuntan las entidades traducibles, de modo que cambiar de idioma devuelve datos coherentes en toda la app. Las rutas incluso se localizan por slug.

Pipeline de medios optimizado en cliente y servidor. Los refugios suben fotos pesadas (a menudo HEIC de iPhone) y vídeos desde el móvil. Se montó un pipeline en dos fases: en el cliente, conversión de HEIC, compresión de imágenes y compresión de vídeo con FFmpeg compilado a WASM antes de subir; en el servidor, reoptimización con sharp (reescalado y recodificación a WebP). Además, cada imagen pasa por moderación con IA de OpenAI antes de publicarse.

API con arquitectura limpia e inyección de dependencias. El backend se organiza en módulos de dominio (animal, adoption, shelter, chat…), cada uno con sus capas y un flujo de dependencias estricto. Los repositorios se definen como contratos abstractos inyectados con InversifyJS, de modo que la lógica de negocio no conoce Prisma. Los límites entre capas se refuerzan con reglas de linter por scope de fichero.

Monorepo con librería de UI compartida y despliegues independientes. Dos apps (web, api) y una librería de componentes consumida localmente. Cada app se despliega por separado en Vercel sin reconstruir todo en cada push, mediante Ignored Build Steps basados en git diff por carpeta y vercel.json a medida.

Panel del refugio — Resumen con métricas clave y gráfico de adopciones

Panel del refugio — Listado de animales del refugio en formato tarjeta con buscador y filtros

Mi rol

Proyecto desarrollado en solitario (full-stack) a lo largo de ~5 meses. Trabajo realizado de extremo a extremo: arquitectura del monorepo, frontend (Next.js), backend (Hono con clean architecture + DI), librería de componentes con Storybook, modelado de datos con Prisma y sistema de traducciones, integraciones (Better Auth con Google OAuth, OpenAI, almacenamiento S3, email transaccional), SEO técnico, i18n en 4 idiomas, blog y configuración de despliegue y tooling de calidad.

Enlaces