Code4rena - Development Overview

Special thanks to Diana, our main UI/UX expert at Code4rena and one of the best designers I've had the pleasure of working with! None of it would have been possible without her.

During my time working at Stack Five, Code4rena was one of my longest contracts. When we began our work with Code4rena, they had a static Gatsby site which was quite impractical for their business model, as a lot of back end operations were happening consistently (from user signups to user submissions) which required constant redeployments of the static website to make sure everything was up to date in production. While they did have GitHub actions setup to handle such operation, there was still a lot of manual intervention that was involved in the entire process. We suggested a complete framework change to them and that is where all the work started.

Approach

My first task with Code4rena involved migrating their entire codebase from Gatsby to Next.js. At the time, Next.js 13 was in beta (with no announced release date), introducing server & client components, the app router, request deduping, and a multitude of other features and enhancements. I decided to take a gamble and structure the entire migration using the Next.js 13 beta and in a lucky and exciting turn of events, Next.js 13 officially released the week before the site went into production.

Once in production, we started looking into ways to optimize the other aspects of the business including automating some of the manual GitHub processes as well as expanding our backend and developing new APIs. That was a core part of the work that we did with Code4rena during the year and a couple of months that we worked together. By the end of our contract, the vast majority of all processes had been fully automated.

A large part of my work after delivering the migrated site was centered around building new front end features; my focus only shifted toward back end work when developing new front end features which would require new tables and data, or when updating existing tables to include additional fields. Below are some of the major front end changes that were implemented.

With the growing number of features that we were developing (bot races, bounties, pro league, etc.), we required the space to display them to our users; space which the original navigation bar could not provide. We did a complete redesign of the nav bar, and I took this opportunity to up the accessibility, enhance keyboard navigation, and make everything more responsive. The result was the dropdown links, each with a mega menu, as pictured above on Desktop, and a more discrete sidebar navigation on mobile.

One of our biggest UI/UX overhauls came through the implementation of the core app. The business made the decision to create a separation on the website between what a general audience could see (marketing site) and the features accessible to its registered users (core app). The idea was to create a user dashboard, much like GitHub while revamping our UI and so, the core app was born as pictured above.

Leading the development of this feature was quite a gratifying experience. Other than the restyling of all the existing pages, some of the major changes to have come out of the process were the new dashboard layout and side menu, the News section of the home page and its back end implementation, and the implementation of Themes (dark and light mode) through SASS and some custom mixins.

A final feature which we developed were the Warden Profiles. We wanted a better way for wardens (Code4rena auditors) to be able to display their achievements through Code4rena but had not yet created public profiles for our wardens. Through the warden profiles, we gave all registered users the ability to share auditing highlights, display their availability for hiring, their rankings, their audit findings, and the audits which they helped secure, all in one place.

Outside the user facing features, a neat little project which I created and worked on was the Code4rena components library. We wanted to keep the branding similar across projects and were very quick to notice that a lot of components were reusable. Included in this library is Storybook so that developers can make changes and see them applied in real time, tests through React Testing Library and Jest for the components of the library (automated to run through a GitHub action on PR creation), and an NPM package so that the components can be installed across applications. This was a super exciting project and great learning experience as it was my first time creating a components library and publishing an NPM package.

Results

With Code4rena being such an active community, not only on online spaces such as Twitter but also in the Code4rena Discord server, feedback from users was almost immediate whenever something went into production. Here is just some of the things users had to say about some of the features that I developed, as outlined above:

Code4rena Core App

Code4rena Warden Profiles