01 · El proyecto
Presencia digital completa para un negocio náutico en Ibiza
Ibiza Ocean Adventures necesitaba una web que representara la calidad y exclusividad de sus experiencias náuticas, capaz de convertir visitas en reservas reales. El objetivo era claro: un sitio de producción robusto, no un prototipo.
El desarrollo abarca desde el diseño visual hasta la infraestructura: pagos con Stripe, emails transaccionales con Resend, base de datos con Supabase y deploy automatizado en servidor propio. Todo bajo TypeScript estricto y Next.js 16 App Router.
El resultado es un sistema completo y mantenible, con CI/CD que permite iterar rápido sin downtime. El cliente opera sus reservas directamente desde la web, sin intermediarios.
"Un sitio de producción real, no un prototipo. Pagos, emails, base de datos e infraestructura propia, todo integrado."
16
Next.js version
100%
TypeScript strict
3
Integraciones externas
VPS
Infraestructura propia
02 · Arquitectura
Stack técnico en tres capas
Frontend
- Next.js 16
- React 19
- TypeScript strict
- Tailwind CSS v4
- Framer Motion
- i18n routing
Backend / APIs
- Stripe Checkout
- Stripe Webhooks
- Resend transaccional
- reCAPTCHA v3
- Supabase
- Route Handlers
Infraestructura
- VPS propio
- Easypanel
- CI/CD GitHub Actions
- Docker
- Nginx reverse proxy
- SSL automático
03 · Frontend
Módulos del sitio público
Conversión
Hero con video
Hero de pantalla completa con video de fondo, CTA principal y animación de entrada. Optimizado para conversión desde el primer scroll.
- Video loop autoplay muted
- CTA con scroll suave
- Animación Framer Motion
- Responsive full-bleed
Catálogo
Servicios y precios
Sección de actividades náuticas con descripción, duración, capacidad y precio. Cards filtrables con diseño visual premium.
- Cards de actividades
- Precios en tiempo real
- Integración con Stripe
- Imágenes optimizadas
Experiencias
Tours guiados
Galería de tours con itinerario, puntos de interés y sistema de reserva directa integrado con el backend de pagos.
- Galería interactiva
- Sistema de reserva
- Mapas de ruta
- Disponibilidad en vivo
Internacionalización
Multiidioma
Soporte completo para inglés y español mediante i18n routing de Next.js. Detección automática de idioma del navegador.
- ES / EN routing
- Detección automática
- SEO por idioma
- Hreflang tags
Legal
Cumplimiento legal
Páginas de política de privacidad, aviso legal y cookies conformes con RGPD. Banner de consentimiento configurable.
- Política de privacidad
- Aviso legal
- Gestión de cookies
- Conformidad RGPD
04 · Backend e integraciones
Servicios e infraestructura
Pagos
Stripe Checkout
Flujo de pago completo con Stripe Checkout Sessions. Soporte para tarjetas, PayPal y métodos locales europeos.
- Checkout Sessions
- Webhooks de confirmación
- Reembolsos automáticos
- Facturas Stripe
Notificaciones
Resend Email
Sistema de emails transaccionales con Resend. Confirmación de reserva, recordatorios y comunicación post-actividad.
- Confirmación de reserva
- Recordatorio 24h antes
- Template HTML branded
- Logs de entrega
Base de datos
Supabase
Persistencia de reservas, clientes y disponibilidad en Supabase PostgreSQL. RLS habilitado para seguridad a nivel de fila.
- PostgreSQL managed
- Row Level Security
- Real-time disponibilidad
- Backups automáticos
Seguridad
reCAPTCHA v3
Protección invisible contra bots en formularios de contacto y reserva. Score-based con acción configurable por endpoint.
- Score invisible
- Sin fricción para usuario
- Protección de formularios
- Acción por endpoint
Infraestructura
Deploy CI/CD
Pipeline de despliegue automático desde GitHub via Easypanel. Cada push a main dispara build y deploy en el VPS.
- GitHub Actions
- Easypanel orchestration
- Zero-downtime deploy
- Rollback automático
05 · Seguridad
Capas de protección
HTTPS forzado
Certificado SSL automático via Let's Encrypt. Redirección permanente de HTTP a HTTPS en Nginx.
Variables de entorno
Secretos gestionados en variables de entorno del servidor. Sin credenciales en el repositorio.
Stripe Webhook Signature
Verificación de firma criptográfica en todos los webhooks entrantes de Stripe para prevenir spoofing.
Rate limiting
Limitación de peticiones por IP en endpoints sensibles (contacto, reserva). Implementado en Nginx.
CSP Headers
Content Security Policy configurada para prevenir XSS. Headers de seguridad vía next.config.ts.
Dependency audit
Auditoría automática de dependencias en el pipeline CI/CD. Alertas de vulnerabilidades conocidas.
06 · Cliente y desarrollador
Partes del proyecto
Cliente
Ibiza Ocean Adventures
Empresa de turismo náutico — Ibiza, España
- Actividades náuticas premium
- Turistas internacionales
- Temporada alta: Jun – Sep
- Reservas online directas
Desarrollador
THEBULLGROOVE
Agencia de tecnología — thebullgroove.com
- Diseño y desarrollo full-stack
- Integración de pagos y email
- Infraestructura y deploy
- Mantenimiento continuo
Siguiente proyecto
CRM / PMS — Ibiza Ocean Adventures