Cliente do setor de eventos · Goiás · a confirmar
Plataforma de venda de ingressos
Plataforma de venda de ingressos para eventos. Respondi pela camada web inteira: interface, UX/UI e todo o front-end em Next.js, da arquitetura de componentes ao SEO.
Resumo do que fiz
- Estruturei do zero toda a camada web em Next.js, definindo a arquitetura de componentes e os padrões que o resto do front-end seguiu.
- Desenhei a interface e o fluxo de compra, pensando a experiência de quem compra ingresso: da descoberta do evento ao checkout e à emissão.
- Apliquei a divisão correta entre renderização no servidor e no cliente, mantendo no servidor o que precisa ser indexável e rápido, e no cliente só o que depende de interação.
- Componentizei a interface em peças reaproveitáveis, reduzindo duplicação e deixando o padrão visual consistente entre as telas.
- Trabalhei o SEO das páginas de evento, que são a porta de entrada do tráfego de busca para quem vende ingresso.
- Cuidei de segurança no front-end: o que pode e o que não pode chegar ao navegador, tratamento de dados sensíveis e proteção das rotas de compra.
Tecnologias
O projeto
Plataforma de venda de ingressos para eventos, de um cliente do setor em Goiás. Entrei como responsável pelo front-end: desenhei a interface e a experiência de compra e estruturei do zero toda a camada web em Next.js, incluindo a arquitetura de componentes, a divisão entre servidor e cliente, o SEO das páginas de evento e os cuidados de segurança do lado do navegador.
Interface e experiência
Pensar a compra antes de pensar a tela
Quem compra ingresso costuma estar com pressa, muitas vezes no celular e às vezes na fila da bilheteria virtual de um evento que acabou de abrir vendas.
01
Fluxo de compra desenhado de ponta a ponta
Da descoberta do evento ao checkout e à emissão do ingresso, com as etapas ordenadas pelo que o comprador precisa decidir em cada momento.
02
Interface pensada antes de virar código
Respondi pelo UX/UI do produto, não só pela implementação: as telas foram resolvidas como problema de uso, e não como tradução direta de um requisito.
03
Consistência entre telas
Um padrão visual único em todo o fluxo, para que o comprador não precise reaprender a interface a cada passo da compra.
Arquitetura do front-end
A camada web estruturada do zero
01
Next.js como base de toda a camada web
Montei a estrutura do projeto, as convenções de pastas e os padrões que o restante do front-end passou a seguir.
02
Componentização de verdade
A interface foi quebrada em peças reaproveitáveis, com responsabilidade clara em cada uma. Menos duplicação, menos lugar para o mesmo ajuste precisar ser feito duas vezes.
03
Servidor e cliente no lugar certo
O que precisa ser indexável e carregar rápido fica no servidor; o que depende de interação do usuário vai para o cliente. Essa fronteira foi decidida tela a tela, não por padrão automático.
04
Boas práticas como padrão, não como exceção
Convenções de código, tipagem e organização definidas no início, para que o projeto continuasse sustentável depois que outras pessoas encostassem nele.
SEO e segurança
Ser encontrado e não vazar nada
01
Páginas de evento otimizadas para busca
Em venda de ingresso, a página do evento é a porta de entrada do tráfego orgânico. Ela foi tratada como tal, com renderização no servidor e marcação adequada.
02
Fronteira do que chega ao navegador
Chave, segredo e dado sensível não atravessam para o lado do cliente. A separação entre servidor e cliente também serviu para isso, não só para desempenho.
03
Proteção das rotas de compra
As rotas do fluxo de compra foram protegidas, com validação do lado de quem manda e não apenas do lado de quem exibe.
Próximo projeto
LAMA