Last month we had the first-ever Chakra UI hackathon, which we tagged the Chakrathon 22'. The Hackathon was held from May 3rd to May 20th, 2022, with participants from various parts of the world involved. Folks, the entire experience was fantastic and is definitely one for the books!

Follow me; let's take you on a journey to recap the Chakrathon 22.'
 

Planning is key to a successful Hackathon

As a team, we had spoken a few times about hosting a Hackathon for the community. But, we weren't sure if the community was also interested in this, so we needed to find out. What did we do? First, we created a poll on Twitter to gauge the community's excitement about a Chakra UI Hackathon. The results of this poll would inform if the timing of the Hackathon was right and, ultimately, if the Chakra community would be interested.

Amazingly, the feedback received from this poll showed that 92% of 79 voters were super ready! Receiving this incredible stat was only the first step and by far the easiest one. We also had to clarify the goal of this Hackathon and weave each part of the planning into this goal.

The goal of the Hackathon

The goal of the Hackathon was to drive community engagement and foster collaboration between designers and developers in the ecosystem. We were looking for teams to design and develop the next best component in Chakra UI.

While pulling this off seemed straightforward, in terms of experience, we also wanted the Hackathon to be a fun and memorable experience for all.

As a result, we put forward an exciting challenge for the Hackathon. In addition, we outlined some core facets such as timeline, judging criteria, sponsors, etc.

Key elements of the Hackathon

With so many different parts of a Hackathon to plan, after much thought, we came up with the following:

• Challenge: Teams were asked to create a custom single select component for Chakra UI. The native Select component is quite hard to style, so we wanted to create a custom version.
• Timeline: We wanted teams to have enough (but not excess) time to solve this challenge. Hence, the Hackathon spanned 2.5 weeks, split into different rounds. View the whole timeline here.
• Rounds: There were two rounds in the Hackathon. The first was the 'Elimination round,' where we asked teams to submit their components' API considerations and UI designs. Only the first few teams would advance to the next round. The 'Final round' was where teams went through the entire process of building the components they had previously designed.
• Judging Criteria: For a free and fair Hackathon, we had to develop the criteria to score teams. These included:
  • Accessibility considerations
  • Component hook and API design
  • Ease of customization with style props
  • Theming and variants
  • Proper documentation
  • Component UI design
• Judges: In addition to Segun Adebayo, the creator of Chakra UI, we decided to bring on two judges outside the Core team for an unbiased scoring and review of submissions. They were Eelco Wiersma of Saas UI and Simon Hoiberg of Feedhive. We're so thankful to them for obliging our invite.
• Rules: Since the Hackathon's goal was to encourage collaboration, a fundamental rule, among others, each team was to consist of at least two members. View other hackathon rules here.
• Theme: Remember we mentioned earlier that this Hackathon was a memorable event? What better way to do this than by adding some extra fun. We decided to have a theme for our Hackathon, and picking the theme was a no-brainer. You probably guessed it! As anime lovers, we came up with an Anime theme. This meant that every team would pick their favorite Anime as their team name. For example, teams would be named Team Naruto, Team Sasuke, etc.
• Sponsors: One specific element of a successful event is the sponsors. While planning, it was evident we would need sponsors for the event. We're so grateful to those who decided to partner with us and support this Hackathon. Thank you to RedwoodJS and Chakra UI Pro.

• Prizes: Based on the funding received from the sponsorship, these were the prizes:

  • 1st place: $2000
  • 2nd place: $1000
  • 3rd place: $750

  *All in USD

Organizing a delightful experience

After weeks of planning, it was time to implement our plans and carry out the Hackathon.

Pre-Hackathon process

Before launching the Hackathon, we had to put a couple of things in place. Some of them include:

• Build the Hackathon website: Since this was an online event, we created a website to show information to participants and be a timeline guide throughout the Hackathon. Check the site here.
• Announce to the community: Remember, during the planning phase, we reached out to the community using a Twitter poll? Now, it was time to let them know about the Hackathon and how to prepare for it. We announced on our Twitter page and Discord server to drive awareness about the Hackathon and when team registration will open.
• Open up Registration: Registration was open from May 3rd to May 5th, and upon successful registration, we sent to every team for confirmation. In no small way, we used this to build excitement and anticipation among registered teams. A total of 29 teams registered to be a part of the Chakrathon 22'.

• Set up the Chakrathon Discord channel: Upon registration, teams were directed to join the #chakrathon channel on our Discord server from May 6th. This was where we would have all communication and pass information about the Hackathon.

Hackathon process

• Welcome teams: We created a video to welcome teams, give a run down of the activities in the Hackathon, and set an expectation for each participant.

• Discord Channel: Since all communication was held on the #chakrathon channel, we had to be actively present to answer questions and support teams throughout the different rounds of the Hackathon.
• Feedback: For us, learning was a crucial part of the Hackathon. As such, based on the score and feedback from the judges, we sent every team feedback on concepts they could improve upon at the end of every round.
• Hackathon hangout with the Chakra UI team: After nearly two weeks of intense work from each group, the Hackathon finally ended on May 19th. To wrap up, we had an online community event to catch up with the participants, engage with them, and answer questions about Chakra UI. This was one of the most unforgettable activities in the Hackathon, both for us as the Chakra UI team and participants.

• Announcing the winners: With submissions in and teams anxious, the judges had to get to work to review every submission. We announced the winners on May 20th.
  • First place: Team Dragon
  • Second place: Team Genki
  • Third Place: Team Saitama

Feedback; a secret weapon for improvement

We've only just started, as the end of this Hackathon is the beginning of many more to come.

At the end of the Hackathon, we sent a form to participants to get feedback. Some notable reviews we got include:

I just loved the way everyone from around the world came together and collaborated on Discord. I did not have a team but thanks to the community I collaborated with 2 folks from Spain and made a few connections. It was an amazing experience.

It was really tasking. It made me put my thinking hat on. It was also a great opportunity to learn how to collaborate.

I loved the collaboration and efforts with the team that I have managed to create.

While we received 100% satisfaction, a few things were suggested that we could improve upon:

• Start the Hackathon during a weekend to accommodate those who work actively or have kids
• Host a physical Hackathon

Wrapping up

We're thankful to everyone who contributed and participated in making this Hackathon a success. From our team members to judges, sponsors, and of course, team members.

Special thanks to our DevRel folks, Lazar and Esther, for spearheading this Hackathon…from ideation to execution, every part was a hit!

Can't wait for the next Hackathon! Till then, keep calm and use Chakra UI.