Halloween Experience.
Uma experiência digital para viver o evento antes de chegar.
Minha atuação: Desenvolvedor Fullstack
O contexto
Um evento privado de três dias precisava de uma experiência digital que reunisse informações, organização de hospedagem, instruções de pagamento e conteúdo temático. O limite de 18 leitos fazia da visualização da ocupação uma parte importante da rotina de organização, junto ao acompanhamento dos participantes e dos status registrados.
Minha participação
Atuei como desenvolvedor Fullstack na construção de uma SPA com React e Vite, da composição visual em CSS próprio à integração com Firebase e Firestore. Trabalhei nos fluxos de hospedagem, geração de instruções Pix, dashboard de gestão e recursos de mídia, conectando a experiência dos convidados às necessidades de quem organizava o evento.
A solução e as entregas
Reuni a jornada do evento em uma aplicação com identidade de Halloween: informações, hospedagem, pagamento e entretenimento no mesmo ambiente. Implementei listeners onSnapshot para refletir alterações do Firestore na interface, geração de QR Code e Pix Copia e Cola e uma área de gestão com atualização manual dos status de pagamento. A experiência inclui galeria, lightbox com swipe e recursos de áudio.
As entregas em detalhe
Hospedagem e organização
Estruturei o fluxo de hospedagem considerando os 18 leitos e a visualização das informações registradas. O dashboard reúne dados dos participantes e status para apoiar o acompanhamento manual da organização.
Pix com QR Code e Copia e Cola
Implementei a composição do payload Pix BR Code no formato EMV, com cálculo CRC16 e renderização do QR Code por qrcode.react. O convidado pode copiar o código ou ler o QR; a atualização do status de pagamento depende da gestão manual, sem confirmação bancária automática.
Interface sincronizada com Firestore
Utilizei onSnapshot para refletir alterações nos documentos observados, atualizando as informações de presença e hospedagem sem recarregar a página. Assim, convidados e organização acompanham o estado registrado no sistema.
Galeria e trilha do evento
Construí a navegação de imagens com lightbox e swipe e integrei Spotify e player com HTML5 Audio como alternativa. A composição visual combina recursos de mídia e elementos temáticos ao longo da experiência.
Decisões de implementação
Pagamento dentro da jornada do evento
Gerei o QR Code e o código Copia e Cola na própria aplicação. A organização realiza a conferência do pagamento e atualiza o status no painel, enquanto a interface acompanha os dados registrados.
Áudio a partir da interação
Tratei o primeiro gesto do visitante como ponto de ativação do player alternativo, respeitando as restrições de reprodução do navegador. O início do trecho foi configurado em 13 segundos, sem depender de autoplay para apresentar o conteúdo.
Efeitos adequados ao dispositivo
Adaptei os efeitos e a composição para telas móveis, reduzindo desfoques e sombras complexas para manter a linguagem temática com uma navegação mais leve por toque.
Tecnologias e conexões
As ilustrações deste case são demonstrativas e não são capturas de produção nem evidências de resultados medidos.