LinknaBio.
Um editor de conexões com a identidade de cada perfil.
Minha atuação: Desenvolvedor Fullstack
O contexto
Um microCMS para reunir conteúdo e pontos de contato em uma página de perfil personalizável. O desafio era permitir que a pessoa organizasse blocos e ajustasse a identidade visual enquanto acompanhava o resultado, além de oferecer gestão de perfis e leitura das interações com o conteúdo publicado.
Minha participação
Atuei como desenvolvedor Fullstack no editor em Next.js 16 com App Router e TypeScript e na integração com Supabase. Trabalhei na composição dos blocos, no preview, nos controles de aparência e nos fluxos de persistência, autenticação, armazenamento e gestão, usando PostgreSQL e JSONB para representar a estrutura configurável do perfil.
A solução e as entregas
Construí um editor split-screen com controles de um lado e prévia do outro. A ordenação por drag and drop usa @hello-pangea/dnd; os blocos abrangem links, contato, YouTube, Spotify, textos e imagens. A personalização reúne temas, gradientes, fontes, sombras e sliders. O produto também contempla salvar configurações, compartilhar o tema por uma representação Base64 THEME e consultar analytics de visualizações, cliques e CTR.
As entregas em detalhe
Edição por blocos e preview
Organizei a edição em duas áreas para aproximar os ajustes do resultado visual. Implementei reordenação de blocos por arrastar e soltar e controles específicos para links, contato, embeds de YouTube e Spotify, textos e imagens, com ícones Lucide.
Personalização e temas compartilháveis
Trabalhei com temas, gradientes, fontes, sombras e sliders para ajustar a apresentação do perfil. A configuração visual pode ser salva e compartilhada por um código THEME em Base64, facilitando a importação do mesmo tema em outros perfis.
Persistência e recursos de conta
Integrei localStorage e persistência em segundo plano pela API, com Supabase PostgreSQL e JSONB para os dados configuráveis, Auth para os fluxos de conta e Storage para arquivos. Implementei frentes de gestão de perfis, suspensão e recuperação por e-mail.
Leitura das interações
Estruturei a apresentação de visualizações, cliques e CTR com filtros de 7, 30 e 90 dias. O painel permite acompanhar as interações registradas e os cliques nos pontos de contato de cada perfil.
Decisões de implementação
Estrutura flexível em JSONB
Usei uma representação configurável para acomodar a sequência e as propriedades dos diferentes blocos. Isso mantém a relação entre os controles do editor, o conteúdo persistido e a composição exibida no preview.
Separar estado local e gravação remota
Combinei o estado disponível no navegador com a persistência em segundo plano pela API. Os ajustes aparecem na prévia durante a edição, enquanto a camada de dados cuida da gravação no Supabase.
Conta, conteúdo e acompanhamento
Organizei autenticação, arquivos, gestão de perfis e analytics como partes distintas do produto. Os fluxos de conta incluem recuperação por e-mail; os de gestão permitem administrar perfis e acompanhar suas interações.
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.