Trinta Outubros: Convite de Aniversário de 30 Anos (Halloween)

Contexto

Para o meu aniversário de 30 anos fiz uma festa à fantasia de Halloween e queria um convite que já fosse parte da festa, e não uma imagem estática mandada no WhatsApp. Boa parte dos convidados tinha mais de 60 anos, então o convite precisava ser tão fácil para os meus avós quanto para os meus amigos.

O desafio

Criar um convite single-page com clima de cinema e muita animação que continuasse fácil para convidados mais velhos: texto grande, botões grandes, nada que dependa de passar o mouse e suporte a "reduzir movimento". Também precisava de uma playlist compartilhada onde qualquer pessoa sugerisse e votasse em músicas. Tudo isso sem login, sem backend pago e com um bundle leve.

O que foi construído

- Feito com React 19 + TypeScript + Vite e dividido em 25 componentes reutilizáveis e 9 seções (Hero, Contagem regressiva, Dress Code, Mural de cartazes, Playlist…). As animações de scroll e parallax usam Motion.

- Todos os componentes estão documentados no Storybook (34 stories). Vitest + Playwright renderizam todos os stories num navegador headless como teste, e o addon de a11y faz as checagens de acessibilidade.

- Playlist colaborativa: a busca usa a API pública do iTunes e tem prévia de 30 segundos. As sugestões ficam no Firestore, acessado pela API REST em vez do SDK do Firebase, o que economizou uns 100 KB.

- Segurança só com Firestore Rules: validação de campos, voto só soma 1, ninguém edita nem apaga, e os pedidos fecham sozinhos num prazo definido.

- Acessibilidade para 60+: texto base de 18px, botão "Letras maiores" que fica salvo, botões de 48–56px sempre com texto, barra fixa de navegação e interações de um toque (sortear fantasia, virar cartaz). Respeita prefers-reduced-motion.

- "Salvar na agenda" para Google e iPhone (.ics), com lembrete um dia antes.

- Deploy automatizado na Hostinger com rsync via SSH. O script tem uma trava para o --delete só agir dentro da pasta /party/.

Resultado

- O app inteiro fica em uns 140 KB de JS com gzip, e a playlist roda no plano gratuito (Spark) do Firebase, então a hospedagem não custa nada.

- Convidados de todas as idades conseguiram ver data e local, sortear uma ideia de fantasia e sugerir músicas direto do celular, sem login e sem instalar nada.

- Todos os componentes visuais têm teste automatizado de renderização e acessibilidade pelo Storybook.

- Publicar uma nova versão leva um comando (npm run deploy).

Tecnologias

React · TypeScript · Vite · Motion · Firebase Firestore · iTunes Search API · Storybook · Vitest · Playwright · CSS Modules

Links

Ver projeto no ar

Galeria