VA Beauty
Site Vitrine & Sistema de Reservas
Visão Geral
Contexto
VA Beauty é um instituto de beleza boutique em Aubagne, França, especializado em tratamentos faciais de alta qualidade e micropigmentação. A proprietária precisava de uma presença digital que refletisse a qualidade premium de seus serviços. O problema: sem presença online, agendamentos manuais por telefone/WhatsApp, sem portfólio visual para mostrar resultados, e gestão manual de serviços e preços.
Solução
Desenvolvimento de um site vitrine profissional completo com: (1) Landing page premium com seções de serviços, galeria antes/depois e depoimentos; (2) Sistema de reservas integrado ao Cal.com com calendário em tempo real e pagamento Stripe; (3) Galeria dinâmica com suporte a imagens, antes/depois e vídeos de redes sociais; (4) Blog gerenciado via Sanity CMS para conteúdo de marketing; (5) Painel administrativo para gestão de serviços e galeria sem conhecimento técnico.
Meu Papel
Atuei como Full Stack Developer e UI/UX Designer, criando todo o design da interface do zero e implementando a solução completa. Desenvolvi a arquitetura com Next.js 15 e React 19, integrei múltiplos serviços externos (Supabase, Cal.com, Stripe, Cloudinary, Sanity), e construí o painel administrativo para gestão autônoma do conteúdo.
Stack Técnica
Frontend
Backend
Projetos
Site Vitrine & Booking
Plataforma Completa de Reservas Online
Site vitrine profissional com sistema de reservas integrado. Criei todo o design UI/UX e implementei landing page premium, catálogo de serviços, galeria dinâmica, blog, e fluxo completo de reservas com pagamento.
Features
Landing Page Premium
Hero com gradiente, indicadores de confiança (500+ clientes, 5★), seções de serviços e depoimentos
Catálogo de Serviços
Grid com 3 categorias (Sourcils, Lèvres, Soins), combos/pacotes com preços
Galeria Antes/Depois
Filtro por categoria, tipos de mídia (imagens, antes/depois, vídeos), modal full-screen
Fluxo de Reserva Multi-Step
4 etapas: seleção de serviço → data/hora → informações → confirmação/pagamento
Calendário Cal.com
Widget embarcado com disponibilidade em tempo real e timezone automático
Vídeos Embarcados
Suporte a Instagram, YouTube e TikTok com embed responsivo
Blog Integrado
Artigos gerenciados via Sanity CMS com SEO otimizado
Design Responsivo
Mobile-first com tipografia Sora e sistema de cores com gradientes
Auth Supabase
Autenticação com verificação de admin via tabela admin_accounts
Row Level Security
Políticas RLS para proteção de dados no PostgreSQL
Integração Stripe
Pagamentos com Connected Accounts e webhooks bidirecionais
Integração Cal.com
API para disponibilidade, criação de bookings e sincronização
Upload Cloudinary
Otimização automática de imagens, transformações on-the-fly, CDN global
Sanity CMS
Studio customizável para gestão de blog com GROQ queries
API Routes Protegidas
Endpoints para booking, gallery, admin com validação e error handling
Middleware de Proteção
Next.js Middleware protegendo rotas /admin e /studio
Design Patterns
Decisões Técnicas
Next.js 15 + React 19
Server Components para performance, App Router para organização, Turbopack para builds rápidos
Supabase vs Firebase
PostgreSQL real com SQL, Row Level Security nativo, auth integrado, open source, pricing acessível
Cal.com vs Calendly
Open source, API flexível, integração Stripe nativa, customização completa, sem branding forçado
Cloudinary vs S3
Otimização automática de imagens, transformações on-the-fly, CDN global incluído, free tier generoso
Sanity vs Contentful
Studio customizável, GROQ query language poderosa, real-time collaboration, generous free tier
shadcn/ui vs Material UI
Copy-paste não dependência, customização total, acessibilidade via Radix, bundle menor, Tailwind nativo
Desafios & Soluções
Integração Cal.com + Stripe
Stripe Connected Account, webhooks bidirecionais (Cal → App, Stripe → App), endpoints de diagnóstico para debug
Galeria Multi-Mídia
Schema flexível com type discriminator, componente MediaModal detectando tipo, embed responsivo para vídeos
Admin Access Control
Tabela admin_accounts com permissions JSONB, flag is_active, super-admin fallback, RLS policies
SEO para Serviços Dinâmicos
generateMetadata em cada page, structured data JSON-LD, sitemap dinâmico, alt text obrigatório
Performance com Muitas Imagens
Next.js Image com lazy loading, Cloudinary para otimização, placeholder blur, responsive sizes