---
title: Chakra UI Hackathon 22’ Recap
description:
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.
author: estheragbaje
publishedDate: 06/23/2022
---
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!
Come along, let's take you on a journey on how the Chakrathon 22' went down.
## 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.
The feedback received from this poll showed that 92% of 79 voters were excited
about the Hackathon! 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](https://hackathon.chakra-ui.com/#timeline).
- **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](https://twitter.com/thesegunadebayo), 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](https://twitter.com/pagebakers) of Saas UI and
[Simon Hoiberg](https://twitter.com/SimonHoiberg) 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](https://hackathon.chakra-ui.com/#rules).
- **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](https://redwoodjs.com/) and
[Chakra UI Pro](https://pro.chakra-ui.com/).
- **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](https://hackathon.chakra-ui.com/).
- **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](https://twitter.com/chakra_ui) page and
[Discord server](https://chakra-ui.com/discord) 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 emails 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](https://discord.com/invite/chakra-ui) 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, our 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](https://twitter.com/NikolovLazar)
and [Esther](https://twitter.com/_estheragbaje), for spearheading this
Hackathon…from ideation to execution, every part was a hit!
We can't wait for the next Hackathon! Till then, keep calm and use Chakra UI.