Site de Casamento Ana & Douglas
Uma plataforma completa de casamento desenvolvida para Ana e Douglas, apresentando design moderno, sistema avançado de lista de presentes com contribuição coletiva e múltiplas funcionalidades para gestão do evento.
Visão Geral do Projeto
Este site de casamento foi desenvolvido com foco em proporcionar uma experiência única e interativa para os noivos e convidados, incluindo funcionalidades inovadoras como contribuição coletiva para presentes e sistema de mensagens com áudio e vídeo.
Principais Funcionalidades
Sistema Inovador de Lista de Presentes
- Contribuição Coletiva: Sistema de vaquinha onde múltiplos convidados podem contribuir para um mesmo presente
- Metas Progressivas: Visualização em tempo real do progresso de arrecadação
- Valor Mínimo Flexível: Contribuições a partir de R$ 150,00
- Múltiplas Formas de Pagamento: PIX e Cartão de Crédito via ASAAS
Sistema de Recados com Mídia
- Mensagens de texto tradicionais
- Gravação de Áudio: Recados em voz dos convidados
- Gravação de Vídeo: Mensagens em vídeo personalizadas
- Área protegida por senha para os noivos
- Reprodução inline de mídias
Galeria de Fotos Avançada
- Galeria com 223+ fotos do casal
- Navegação por thumbnails
- Visualização em fullscreen
- Lazy loading progressivo
- Contador de imagens carregadas
Sistema de Confirmação de Presença
- Formulário completo de RSVP
- Gestão de acompanhantes com tipos (adulto/criança)
- Campo de observações
- Confirmação automática via WhatsApp
- Controle de prazos
Contador Regressivo
- Countdown em tempo real até a data do casamento
- Display de dias, horas, minutos e segundos
- Design elegante e animado
Integração com Localização
- Detalhes completos do evento
- Integração com Google Maps
- Instruções de acesso ao local
- Informações de estacionamento
Implementação Técnica
Frontend Architecture
- Next.js 14: App Router com Server-Side Rendering
- TailwindCSS: Design system personalizado
- React Hooks: Gerenciamento de estado moderno
- Web APIs: MediaRecorder para áudio e vídeo
Payment Integration
- ASAAS Gateway: Integração completa de pagamentos
- PIX: Pagamento instantâneo
- Cartão de Crédito: Processamento seguro
- Webhooks: Confirmação automática de transações
- Sistema de Transparência: Informações claras sobre processamento
Media Handling
- Audio Recording: Gravação de áudio via Web API
- Video Recording: Captura de vídeo com MediaRecorder
- AWS S3: Armazenamento seguro de mídias
- Streaming: Reprodução otimizada de áudio e vídeo
Performance & Security
- Code Splitting: Otimização de bundle
- Image Optimization: Next.js Image API
- Protected Routes: Autenticação para áreas restritas
- HTTPS: Comunicação segura
- CDN: AWS CloudFront para entrega global
Desafios & Soluções
Desafio: Sistema de Contribuição Coletiva
Solução: Desenvolvemos um sistema único de "vaquinha" onde múltiplos convidados podem contribuir para um mesmo presente, com controle de metas, validação de valores mínimos e atualização em tempo real do progresso.
Desafio: Gravação de Mídia no Browser
Solução: Implementação robusta usando MediaRecorder API com fallbacks para diferentes browsers, preview antes de enviar, e compressão otimizada para upload.
Desafio: Transparência em Pagamentos
Solução: Sistema claro de informações sobre processamento de pagamentos, incluindo detalhes sobre quem processa (CNPJ), taxas e repasse aos noivos.
Desafio: Performance com Muitas Imagens
Solução: Sistema de lazy loading progressivo com contador visual, otimização de imagens via Next.js, e carregamento assíncrono de thumbnails.
Resultados & Impacto
- Experiência interativa única com gravação de áudio/vídeo
- Sistema inovador de presentes com contribuição coletiva
- Galeria robusta com 223+ fotos otimizadas
- Processamento transparente de pagamentos
- Design responsivo perfeito em todos os dispositivos
Tecnologias Destacadas
- Next.js 14: Framework moderno com App Router
- ASAAS Payment Gateway: Integração completa
- TailwindCSS: Design system customizado
- MediaRecorder API: Gravação de áudio e vídeo
- AWS S3 + CloudFront: Infraestrutura de mídia
- TypeScript: Type safety completo
Este projeto demonstra capacidade de criar soluções inovadoras e personalizadas, integrando tecnologias modernas para proporcionar experiências únicas e memoráveis.
Site disponível em: www.anaedouglas.com.br