Jade Dittrich, recebeu o chamado para servir como missionária. Para quem não conhece a tradição da Igreja de Jesus Cristo dos Santos dos Últimos Dias, esse é um momento de enorme expectativa: a pessoa só descobre para onde vai no mundo ao abrir uma carta oficial enviada de Utah. Eu queria transformar essa revelação em um evento digital interativo para familia dela e amigos espalhados pelo país.
Em vez de criar um grupo de WhatsApp bagunçado ou usar uma planilha estática, decidi construir uma landing page sob medida. O projeto precisava ser rápido de carregar, interativo e coletar palpites de destino sem me dar dor de cabeça com infraestrutura.
Por que fugi dos frameworks modernos
Eu poderia ter iniciado um projeto em React ou Next.js por puro reflexo profissional. Mas, pensando friamente, seria um desperdício de recursos. O site precisava carregar instantaneamente em celulares antigos de parentes de todas as idades, muitas vezes usando redes 3G instáveis no interior do estado.
Optei pelo bom e velho trio: HTML5, CSS3 e JavaScript puro. Sem etapa de compilação, sem pacotes pesados no node_modules, sem hydration lag. O resultado foi um arquivo index.html, um style.css e um script.js. Simples assim.
- Performance extrema: O site carrega quase instantaneamente, com um First Contentful Paint (FCP) abaixo de 0.5 segundos.
- Manutenção zero: Não há dependências para quebrar no futuro ou atualizações de segurança de pacotes npm para monitorar.
- Hospedagem gratuita: O peso total da página ficou em menos de 1.5 MB (incluindo imagens otimizadas), o que consome banda irrelevante.
Resolvendo o backend com FormSubmit API
Um dos pontos centrais da página era a seção de palpites. Os visitantes precisavam tentar adivinhar em qual país ou estado a Sister Dittrich serviria. Eu precisava salvar esses dados para revelar quem acertou depois do anúncio oficial.
Eu não queria gastar tempo configurando um banco de dados PostgreSQL, criando uma API em Node.js ou pagando por um servidor ativo 24/7 para um projeto temporário. A solução foi usar a FormSubmit API.
Basta apontar o atributo action do formulário HTML para o endpoint deles. O serviço captura os envios e me entrega tudo organizado por e-mail ou em um painel simples.
1. Proteção contra spam nativa
Para evitar robôs enviando lixo para o meu e-mail, usei o recurso de honeypot da própria API. Criei um campo de input invisível para usuários reais. Se um bot preenchesse esse campo, o envio era descartado silenciosamente.
Também configurei uma página de redirecionamento personalizada usando o parâmetro _next, garantindo que o usuário continuasse dentro da experiência visual do site após enviar o palpite.
As funcionalidades que criaram a experiência
Para manter as pessoas engajadas até o dia da revelação, implementei três recursos principais que exigiram soluções simples no código.
1. O contador regressivo dinâmico
Usei a função setInterval do JavaScript para calcular a diferença de tempo entre o momento atual e a data da abertura da carta. O script atualizava o DOM a cada segundo, mostrando dias, horas, minutos e segundos restantes.
Foi um código simples, mas que exigiu atenção com fusos horários. Usei o método Date.UTC para garantir que o contador zerasse exatamente no mesmo instante para parentes que moram no Acre ou no Rio de Janeiro.
2. Integração com PIX para o enxoval
Uma missão de 18 meses exige um enxoval específico (roupas sociais, malas, calçados resistentes). Criei uma seção de apoio financeiro com um botão de cópia rápida da chave PIX.
Usei a API de Clipboard do navegador (navigator.clipboard.writeText) para facilitar a vida de quem estava acessando pelo celular, exibindo um feedback visual temporário de "Copiado!" no botão.
3. A revelação e o mapa interativo
Após a data do evento, o contador deu lugar à revelação oficial. Integrei um mapa simples destacando a missão designada. No caso dela, a revelação foi para a Missão Brasil Rio de Janeiro Sul.
Deploy no Netlify e o que ficou de fora
O deploy foi feito conectando o repositório do GitHub ao Netlify. Cada push na branch main atualizava o site em menos de 10 segundos. O custo financeiro de todo o projeto foi literalmente zero reais.
O melhor código é aquele que resolve o problema real sem criar complexidade desnecessária para o amanhã.
Nem tudo foi perfeito. Tive que abrir mão de algumas ideias por conta do tempo apertado de desenvolvimento (levei cerca de duas noites trabalhando após o expediente).
- Falta de um dashboard público: Os palpites iam direto para o meu e-mail, então eu tive que tabular manualmente quem acertou em vez de mostrar um gráfico em tempo real na página.
- Imagens pesadas no início: No primeiro deploy, as fotos da Jade estavam em alta resolução e sem compressão, o que atrasou o carregamento em conexões móveis até eu convertê-las para
.webp. - Estilização manual de mapas: Tentei usar uma biblioteca de mapas pesada, mas desisti e usei um iframe otimizado do Google Maps para economizar banda.
Se eu fosse refazer esse projeto hoje, provavelmente integraria uma planilha do Google Sheets via webhook na FormSubmit API para automatizar a contagem dos palpites em tempo real. Qual foi a última vez que você usou Vanilla JS para resolver um problema real da sua família sem enfiar um framework no meio?