The Olio Apps Inaugural Hackathon

Stormi Hoebelheinrich ยท Dec 21, 2018

Hackathon ยท Learning

Recently, Olio Apps took a little break from our regularly scheduled programming (๐Ÿ˜œ) to do some hacking. We broke off into teams two, designed and built projects over the course of a pizza-fueled "work" day.


The Hackathon had an open ended set of themes including: Continuous Improvement, Emerging Languages and Frameworks, Virtual Reality, and Technology for the Greater Good. The primary goals of the Hackathon were to encourage teamwork, practice new technologies that we're excited about, and have fun. With our eyes on the prize (extra vacation days to the winning team), we got to hacking. This was the result:

Cory & Frank

Cory and Frank were the Slackers. Their project was to create a prototype for a Slackbot Developer Journal to prompt you throughout the day and ask you questions about your development process. The purpose is to collect data about your daily experience as a developer and to help you track your continuous improvement in an informal way. Example prompts include: How is your coding going? Are you able to stay focused? Are you having a stellar day?

slack notification

The Slackbot asks these questions in a private channel and the responses are recorded in a developer journal. The user can look back on their reflections, improvements, and little tips that might have been otherwise forgotten. Developer journaling is an excellent tool for keeping track of your progress (especially when it comes time for your annual review). However, it can seem tedious to break from your work cycle and carve out time for journaling. The Developer Journal Slackbot solves this problem by offering quick, voluntary prompts that allow you to reflect on your current work rather than distracting you.

Scott & Ami

Weekly Planning App

Scott and Ami decided to use the Hackathon as an opportunity to give back to the team by creating something we could all use. Every Monday our team gets together for a "Weekly Review" meeting where we set weekly goals for each of our projects and review the goals from the previous week. Currently, this is done by editing a raw text file and committing the changes to a git repository. It results in a nice running text-based log of what the company was doing each week. However, the process involves a lot of copy-pasting and can be a bit tedious for the note taker.

So, Scott and Ami used Sketch to mockup a nice design and then got to work creating an app using Electron and React that could parse the text document into editable projects and tasks. By the end of the day, they had a slick looking user interface complete with keyboard shortcuts for easy editing. With just a little more polishing (including automating git operations) we'll be able to work this application into our weekly routine. Their tips creating a successful hackathon project include keeping your scope small and to think about the design up front.

Stormi & Aron

Presenting WebVR project

Over the past few months, Aron and I (Stormi) have been working on a side project, the A-Frame Typescript Toolkit, which is a library for writing WebVR experiences using Typescript. We took the Hackathon as an opportunity to test the toolkit and use it to create custom A-Frame components for making graphs in VR space. Ultimately, we were able to create two different kinds of data-responsive graphs, 3D bar charts and scatter plots, and build a VR data visualization experience that allowed you to walk around a "forest" and discover charts hidden among the trees. The Hackathon helped illuminate some strengths as well as areas of improvement for the toolkit, and were thankful for the opportunity to hack with it over the course of a day.

Jon & Jason

Music App

Jason and Jon decided to use the hackathon as an opportunity to learn more about a couple different technologies. After attending a GraphQL workshop earlier this year, they were inspired to dive deeper into Apollo and Prisma. Using GraphQL on the backend and Electron on the frontend, the team created a fresh user interface for finding new music from your favorite artists using the Mixcloud API. By the end of the day, they had a fully functional desktop music app, and they learned more about how Apollo manages client side state with its cache API and how easily it produces optimistic UI by providing a loading component when fetching data.


Judging for the Hackathon was done by the esteemed Buck and Rob, designers (and friends!) from a neighboring office. The projects were judged on criteria including completeness, utility, design, and presentation. After much deliberation, Scott & Ami were our worthy winners, creating an application that we'll be able to add to our weekly planning routine.


We had fun and learned a lot from our first Hackathon experience as a team. One major reminder that came out of the Hackathon is that there is a big difference between "hacking" and "software engineering." When hacking, you focus more on rapid iteration and less on stability and get to exercise a different part of your brain. We try to avoid "hacking" in our day-to-day work, but it can be a great way to try out new technologies and practice different types of problem solving. We'll definitely be scheduling more internal Hackathons in the future. We're excited to try out different formats, including multi-days, diverse judging panels, and more focused themes. Next time, we'd like to partner with a local non-profit and create some tech for good.

Interested in working with us?