Transform your development workflow and build something original.

The world's leading software development platform for more than 50 million developers to collaborate, build, and share new ideas.

GitHub is the world's leading software development platform where more than 50 million developers collaborate, build, and share new ideas. With the acquisition by Microsoft in 2018, GitHub has solidified it's role in empowering developers throughout the development cycle by providing an excellent solution for cloud-based Git repository hosting services. By making use of Git, the open-source version control software, GitHub makes it much easier to maintain and manage code across teams and different kinds of projects.

We first connected with GitHub’s head of Developer Relations team at Full Stack Fest 2019, where we even got to have them speak as a guest at the conference. We discussed the potential idea of establishing a long-term relationship with the team at GitHub, eventually leading to the opportunity to build the website for their virtual 4-week GitHub Actions Hackathon. GitHub Actions make it easy to automate software workflows that allow developers to build continuous integration and delivery pipelines. This means that developers can build, test, and deploy their applications all within GitHub.

“With Codegram’s incredible team of engineers and designers, we delivered a beautiful user experience for our first ever virtual hackathon. I instantly became a fan of their work when I had the first prototype built in Gridsome within only a few weeks of our first meeting.”

Brian Douglas, Developer Relations, GitHub.

Challenge

With the upcoming GitHub Actions Hackathon approaching just weeks around the corner, there was an urgent need for a visually appealing website (UI) to promote the GitHub Actions Hackathon, along with a strong user experience (UX) for the hackathon participants. The virtual nature of the hackathon required a strong attention to detail. The challenge was how to best accommodate every participant in the most light-weight and user-friendly approach possible. The four-week hackathon challenges the developer community to create original GitHub Actions, which allow developers to get creative in how they automate development workflows in an entirely new way.

Solution & Technology Used

To kick things off, we began our design sprint to sculpt a beautiful and efficient UX/UI that would allow the participants to have an enjoyable virtual hackathon experience. As part of our ideation process, we wanted to clearly highlight the specific details on how to actually participate in the hackathon, information regarding GitHub Actions in case some developers weren't familiar, and even some of the featured submissions to get an idea of what others have so far built.

Submission form: Repository listSubmission form: category and description

Given the nature of the project and how quickly we needed to roll it out, we decided to start building out the website using JAMStack and Gridsome. By integrating GitHub's API into the website, participants can sign in with their GitHub accounts and easily link their code repositories for submission. If a participant wants to submit multiple entries, they are easily able to manage and view the status of each in their user dashboard. To make this all possible, we leveraged GitHub Actions in our technical design! With each Action a user submits, our implementation of GitHub Actions would check to make sure they fell under the guidelines in the official rules. This will determine the status of a participant's submission with either "Accepted" or "Rejected".

By leveraging GitHub Actions in our own technical design, we wanted to highlight and spread awareness of the very feature the entire virtual hackathon is about. Our utilization of GitHub Actions is just one example of showcasing its flexibility and usefulness as part of a seamless development workflow. To get an idea of some of the different tools and ideas people are working on with GitHub Actions, you can refer to their marketplace!

Submissions list

Outcome: Actual Value Delivered

After a few weeks of design and development work by the Codegram team, the GitHub Actions Hackathon delivered a fun and beautifully sleek UX/UI for participants all over the world! GitHub's head of Developer Relations expressed how pleased he was with the entire experience managing the hackathon on the front-lines, directly interacting with the hackathon participants and managing the central repository for the hackathon. The nature of the virtual hackathon caught immediate traction with some participants even running live coding events and livestreams around it! With over 700 submissions, the hackathon was evidently successful and will be exciting to have more taking place from the hackathon website.

"After launching the hackathon we received a positive reception from our developer community, and have decided to continue using the platform Codegram built to host future virtual hackathons! It was refreshing and rewarding to work with Codegram on this project - their skills and expertise guaranteed this event to be a success.”

Brian Douglas, Developer Relations, GitHub.

Perhaps we can help you too?

Get in touch. Let's make something great together.

Company type

  • Cloud Computing
  • Developer Tools
  • Internet
  • Project Management
  • Software

Solution

  • Software Development
  • UX design

Outcome

Beautiful user experience for virtual hackathon participants in timely manner

Location

San Francisco, USA

Technologies

  • JAMStack
  • Gridsome
  • GitHub Actions
  • Serverless

Got a project in mind?

Challenge us. We want to work with you to create something great.