VA Beauty
Sitio Vitrina & Sistema de Reservas
Visión General
Contexto
VA Beauty es un instituto de belleza boutique en Aubagne, Francia, especializado en tratamientos faciales de alta calidad y micropigmentación. La propietaria necesitaba una presencia digital que reflejara la calidad premium de sus servicios. El problema: sin presencia online, citas manuales por teléfono/WhatsApp, sin portafolio visual para mostrar resultados, y gestión manual de servicios y precios.
Solución
Desarrollo de un sitio vitrina profesional completo con: (1) Landing page premium con secciones de servicios, galería antes/después y testimonios; (2) Sistema de reservas integrado con Cal.com con calendario en tiempo real y pago Stripe; (3) Galería dinámica soportando imágenes, antes/después y videos de redes sociales; (4) Blog gestionado vía Sanity CMS para contenido de marketing; (5) Panel administrativo para gestión de servicios y galería sin conocimientos técnicos.
Mi Rol
Trabajé como Full Stack Developer y UI/UX Designer, creando todo el diseño de interfaz desde cero e implementando la solución completa. Desarrollé la arquitectura con Next.js 15 y React 19, integré múltiples servicios externos (Supabase, Cal.com, Stripe, Cloudinary, Sanity), y construí el panel administrativo para gestión autónoma del contenido.
Stack Técnico
Frontend
Backend
Proyectos
Sitio Vitrina & Booking
Plataforma Completa de Reservas Online
Sitio vitrina profesional con sistema de reservas integrado. Creé todo el diseño UI/UX e implementé landing page premium, catálogo de servicios, galería dinámica, blog, y flujo completo de reservas con pago.
Funcionalidades
Landing Page Premium
Hero con degradado, indicadores de confianza (500+ clientes, 5★), secciones de servicios y testimonios
Catálogo de Servicios
Grid con 3 categorías (Sourcils, Lèvres, Soins), combos/paquetes con precios
Galería Antes/Después
Filtro por categoría, tipos de media (imágenes, antes/después, videos), modal pantalla completa
Flujo de Reserva Multi-Paso
4 pasos: selección de servicio → fecha/hora → información → confirmación/pago
Calendario Cal.com
Widget embebido con disponibilidad en tiempo real y timezone automático
Videos Embebidos
Soporte para Instagram, YouTube y TikTok con embed responsive
Blog Integrado
Artículos gestionados vía Sanity CMS con SEO optimizado
Diseño Responsive
Mobile-first con tipografía Sora y sistema de colores con degradados
Auth Supabase
Autenticación con verificación de admin vía tabla admin_accounts
Row Level Security
Políticas RLS para protección de datos PostgreSQL
Integración Stripe
Pagos con Connected Accounts y webhooks bidireccionales
Integración Cal.com
API para disponibilidad, creación de reservas y sincronización
Upload Cloudinary
Optimización automática de imágenes, transformaciones on-the-fly, CDN global
Sanity CMS
Studio personalizable para gestión de blog con queries GROQ
Rutas API Protegidas
Endpoints para booking, gallery, admin con validación y manejo de errores
Middleware de Protección
Next.js Middleware protegiendo rutas /admin y /studio
Design Patterns
Decisiones Técnicas
Next.js 15 + React 19
Server Components para performance, App Router para organización, Turbopack para builds rápidos
Supabase vs Firebase
PostgreSQL real con SQL, Row Level Security nativo, auth integrado, open source, precios accesibles
Cal.com vs Calendly
Open source, API flexible, integración Stripe nativa, personalización completa, sin branding forzado
Cloudinary vs S3
Optimización automática de imágenes, transformaciones on-the-fly, CDN global incluido, tier gratuito generoso
Sanity vs Contentful
Studio personalizable, lenguaje de consulta GROQ poderoso, colaboración en tiempo real, tier gratuito generoso
shadcn/ui vs Material UI
Copy-paste no dependencia, personalización total, accesibilidad vía Radix, bundle más pequeño, Tailwind nativo
Desafíos & Soluciones
Integración Cal.com + Stripe
Stripe Connected Account, webhooks bidireccionales (Cal → App, Stripe → App), endpoints de diagnóstico para debug
Galería Multi-Media
Schema flexible con type discriminator, componente MediaModal detectando tipo, embed de video responsive
Control de Acceso Admin
Tabla admin_accounts con permisos JSONB, flag is_active, super-admin fallback, políticas RLS
SEO para Servicios Dinámicos
generateMetadata en cada page, datos estructurados JSON-LD, sitemap dinámico, alt text requerido
Performance con Muchas Imágenes
Next.js Image con lazy loading, Cloudinary para optimización, placeholder blur, sizes responsive