Code4rena - Visão Geral do Desenvolvimento

Agradecimentos especiais a Diana, nossa principal especialista em UI/UX na Code4rena e uma das melhores designers com quem tive o prazer de trabalhar! Nada disso teria side possível sem ela.

Durante meu tempo trabalhando na Stack Five, a Code4rena foi um dos meus contratos mais longos. Quando começamos nosso trabalho com a Code4rena, eles tinham um site Gatsby estático que não era muito prático para o seu modelo de negócios, pois muitas operações de back end estavam acontecendo consistentemente (de inscrições de usuários a uploads feitos pelos mesmos), o que exigia constantes deploys do site estático para garantir que tudo em produção estivesse atualizado. Embora eles tivessem ações do GitHub configuradas para lidar com essas operações, ainda haviam muitas intervenções manuais envolvidas em todo o processo. Sugerimos uma mudança completa de estrutura para eles e foi aí que todo o trabalho começou.

Abordagem

Minha primeira tarefa com a Code4rena envolveu migrar toda a base de código do Gatsby para o Next.js. Na época, o Next.js 13 estava em beta (sem data de lançamento anunciada), introduzindo componentes de servidor e cliente, a estrutura de projeto "app router", deduplicação de solicitações de API e uma infinidade de outros recursos e melhorias. Eu decidi arriscar e estruturar toda a migração em volta do Next.js 13 beta e, em uma reviravolta incrível e bem sortuda, o Next.js 13 foi lançado oficialmente na semana anterior ao site ser colocado no ar.

Com o site já no ar, começamos a procurar maneiras de otimizar os outros aspectos do negócio, incluindo a automação de alguns dos processos manuais do GitHub, bem como a expansão do nosso backend e o desenvolvimento de novas APIs. Essa foi uma parte essencial do trabalho que fizemos com a Code4rena durante o ano e alguns meses em que trabalhamos juntos. Ao final do nosso contrato, a grande maioria de todos os processos havia sido totalmente automatizada.

Uma grande parte do meu trabalho após a entrega do site migrado foi centrada na construção de novos recursos de front end; meu foco só mudou para o trabalho de back end ao desenvolver novos recursos de front end que exigiriam novas tabelas e dados, ou ao atualizar tabelas existentes para incluir campos adicionais. Abaixo estão algumas das principais mudanças de front end que foram implementadas.

Com o número crescente de recursos que estávamos desenvolvendo (corridas de bots, recompensas por bugs, liga profissional, etc.), precisávamos de espaço para exibi-los aos nossos usuários; espaço que a barra de navegação original não conseguia fornecer. Fizemos um redesenho completo da barra de navegação e aproveitei a oportunidade para aumentar a acessibilidade, aprimorar a navegação pelo teclado e tornar tudo mais responsivo. O resultado foram os links suspensos, cada um com um mega menu, como mostrado na imagem acima no modo desktop, e uma barra de navegação lateral mais discreta no modo mobile.

Uma das nossas maiores revisões de UI/UX veio por meio da implementação do dashboard principal (o "core app"). A empresa decidiu criar uma separação no site entre o que o público em geral poderia ver (site de marketing) e os recursos acessíveis aos seus usuários registrados (aplicativo principal). A ideia era criar um painel de usuário, muito parecido com o GitHub, ao mesmo tempo em que reformulávamos nossa interface de usuário e, assim, o aplicativo principal nasceu, como mostrado acima.

Liderar o desenvolvimento desse recurso foi uma experiência bastante gratificante. Além da reformulação de todas as páginas existentes, algumas das principais mudanças que surgiram do processo foram o novo layout do dashboard junto ao menu lateral, a seção intitulada "News" da página inicial e sua implementação de back end, e a implementação de temas (modo escuro e claro) por meio do SASS e alguns mixins personalizados.

Um recurso final que desenvolvemos foram os perfis públicos de usuários ("Warden Profiles"). Queríamos uma maneira melhor para os wardens (auditores da Code4rena) poderem exibir suas conquistas por meio da Code4rena, mas ainda não havíamos criado perfis públicos para nossos auditores. Por meio dessas páginas de perfil, demos a todos os usuários registrados a capacidade de compartilhar destaques de auditoria, exibir sua disponibilidade para contratação, seus rankings em nosso placar, suas descobertas de auditoria e as auditorias que eles ajudaram a proteger, tudo em um só lugar.

Fora dos recursos voltados para o usuário, um pequeno projeto bacana que criei e no qual trabalhei foi a biblioteca de componentes da Code4rena. Queríamos manter a marca semelhante em todos os projetos e percebemos rapidamente que muitos componentes eram reutilizáveis. Incluído nesta biblioteca está o Storybook para que os desenvolvedores possam fazer alterações e vê-las aplicadas em tempo real, testes por meio da React Testing Library e Jest para os componentes da biblioteca (automatizados para serem executados por meio de uma ação de GitHub na criação de uma solicitação de pull) e um pacote NPM para que os componentes possam ser instalados em outros aplicativos. Este foi um projeto super empolgante e uma ótima experiência de aprendizado, pois foi minha primeira vez criando uma biblioteca de componentes e publicando um pacote NPM.

Resultados

Com a Code4rena sendo uma comunidade tão ativa, não apenas em espaços online como o Twitter, mas também no servidor de Discord da empresa, o feedback dos usuários era quase imediato sempre que algo entrava em produção. Aqui estão apenas algumas das coisas que os usuários tinham a dizer sobre alguns dos recursos que eu desenvolvi, como descrito acima:

Dashboard principal da Code4rena

Perfis de auditores ("Warden Profiles") da Code4rena