AppFox takes part in the 2024 MiroJunction Hackathon

Earlier this year, we were proud to attend our first external hackathon, the Miro <> Junction Hackathon!

The event was online and hosted by Junction, a hackathon organizer based in Finland, in collaboration with the incredible team at Miro. The competition was filled with many talented individuals, and we were up against 120+ other developers, in various teams, spread across over 20 countries.

Against all the odds, we’re proud to announce that our app idea ‘Pull Request Manager’ was crowned the winner 🏆

It was an absolute joy to take part, and in this article, we will share our experiences, initial worries and misconceptions, and give you a glimpse at what we built during the 48 hour hackathon.

Introduction to the Miro<>Junction hackathon

The objective of the Miro<>Junction hackathon was to design and implement a new Miro app to accelerate users’ product design journeys and streamline their workflows. To achieve this, we had to leverage one, or both, of the Miro Web SDK or Miro REST API.

The judging criteria were based on the following:

• Technical Excellence:
  • How you use the Miro developer platform
• User Impact:
  • How does your solution help Miro users build the next big thing?
• Real-World Problem and Solution:
  • Your problem use case and how your solution addresses it

Let’s take a quick step back, cover the basics of a hackathon, and share our misconceptions and worries before we took part in the Miro<>Junction Hackathon.

Hackathon 101’s

What is a hackathon?

A hackathon is an event that brings together people from various disciplines, such as programming, design, and business. Participants collaborate on projects centered on creating a working prototype or solution for a specific problem or challenge.

Hackathons can cover many themes, from developing new apps to solving real-world problems or exploring emerging technologies. For example, there’s a success story from one of Miro’s previous hackathons where a team from Deloitte designed a Generative AI app that enabled users to add AI-generated images to their Miro board.

Hackathons typically have a fixed timeframe, ranging from a few hours to several days. This time pressure encourages quick problem-solving and creativity and usually requires copious amounts of caffeine or other food and drinks to keep the energy flowing! 😉

Participants often form diverse teams, bringing together individuals with different skills and backgrounds. One of the biggest benefits of the hackathon is the opportunity to learn from each other, share knowledge, and network with other attendees. It’s a great opportunity to make new friends and expand your personal and professional network.

At the end of the hackathon, teams will present their projects to a panel of judges who may award prizes for the most innovative or creative solutions that satisfy the judging criteria.

What are the logistics of a hackathon?

Traditionally, hackathons are in-person events. You attend a venue with hundreds of other people and compete against each other to develop the best app idea that fulfills the hackathon’s objective. This objective is usually made available to you beforehand so you can start brainstorming your idea before the event!

The Miro<>Junction hackathon, meanwhile, was completely online. This did mean that our team could stay in the comfort of their own home – a big plus. The support available to our team was accessible via Discord, and this made it extremely easy for the support team to reply to our every need within a matter of minutes.

This hackathon lasted three days (48 hours in total) and kicked off with an introductory webinar hosted on Zoom shortly before the event officially began. These pre-hackathon webinars are really useful for grounding your expectations and helping you understand what the judges want from you.

Our team had 45 hours in total to design, implement, and showcase their new Miro app to the judges.

Why join a hackathon?

Most people (including our team) tend to ask themselves this important question.

But fear not, in this section we’ll cover all the reasons why you should join a hackathon. Not only are there opportunities to win prizes, but the sense of community and confidence you can gain from participating are immense. It’s a great chance to test your skills and learn from others.

After all, these are safe spaces where you can build, iterate, and fail fast, all to achieve the hackathon’s objective. There’s no substitute for real-world experience and a hackathon is a great way to build your experience.

If you feel apprehensive or unsure about a hackathon, don’t worry; its completely normal. To be honest, we felt that way too, and one of our team shared how they felt before the Miro<>Junction hackathon.

Hackathons are a great place to meet like-minded people and expand your personal and professional network. You never know who you might meet and where these newfound relationships might lead you in the future!

Now, this may surprise you, but you don’t actually need any experience in coding before joining a hackathon like this. Instead, you can use the support provided to you during the hackathon or help within the other roles (e.g., business-focused). There are also many resources for creating ‘boilerplate’ apps, which provide a basic framework for development. In fact, you can learn how to set up your first Next.js app here!

In the Miro<>Junction hackathon, Miro provided their own dedicated boilerplate apps, which was a huge help. All you need to do was run ‘npx create-miro-app@latest’ in your terminal and you were literally minutes away from running your first app in Miro. There were also a ton of other resources available, such as the Miro Web SDK guide, Miro REST API guide, Miro Developer YouTube channel, Miro example apps on Github, and much more!

It would not have been possible to for our team to achieve what they did without all of this help and support, so we cannot express our thanks to Miro enough!

So, hopefully, by now, you have enough reasons to join a hackathon! But if not, just remember that it’s just another chance to enjoy yourself and test your knowledge —whether that’s to learn new skills or refine what you already know and put your ideas into reality.

Our experience at the Miro<>Junction hackathon

Let’s lift the curtain on our experiences at the Miro<>Junction hackathon in January 2024. We’ll share our experiences during the lead-up to the hackathon, as well as the actual event itself, and what we built.

The lead-up

During the lead up to a hackathon, it’s so easy to feel under prepared and overwhelmed.

However, with some initial preparation, like learning how to run a basic framework to start coding or doing some rough research around the hackathon’s objective, you should be able to gain the confidence and knowledge to get started.

Here’s what our team had to say ahead of the event:

The main fear you might have in the lead-up to the Hackathon is that you don’t feel skilled enough to participate. You can easily overcome this by researching the hackathon objective(s) and planning your proposed solution.

Start by asking yourself, what must I do to make this idea a reality?

Some people draw mock-ups of their initial designs, while others research what resources they will use and how to set them up.

Just remember, there is no pressure to prepare before the hackathon begins. However, if you feel preparing early will help boost your confidence or address some underlying concerns, then go for it!

But remember, there is a big difference between doing some initial research and starting the hackathon early. Always check the hackathon objective and ensure you abide by the rules – it’s got to be fair for everyone.

The actual event

The Miro<>Junction hackathon started with a pre-hackathon webinar on Zoom. This was a great opportunity to ask questions about the judging criteria and understand all the resources that are available to help participants.

After this meeting finished, it was go time! All the hackathon teams were free to start coding.

The next 48 hours went by in a flash, but we wanted to share some useful tips and advice that we learned throughout.

First, it’s perfectly normal if you or your team get stuck at different points during the hackathon. It’s not something you can plan for and its all part of the experience. The best way to overcome this is to work together as a team or reach out for help and guidance as soon as possible – it’s important you don’t waste valuable time.

At the Miro<>Junction Hackathon, the level of support was AWESOME! We could post a question into the Discord channel and get an answer back within a couple of minutes.

As a top tip, we recommend you host your hackathon app code on a public GitHub repository and document the steps to run your app. This way, the support team can review your code, quickly run the app, and identify the problems you are having more easily. This is particularly important for online Hackathons, where you might not have anyone else to look over your screen and directly debug your issue.

Next, be prepared for the hackathon to fly by. Before you know it, it’ll all be over. So to prepare yourself for success, give yourself enough time to prepare for the project submission. Most organisers will specify exactly what you need to include in the submission, but as a minimum, expect to provide a short demo video and detailed explanation about your app and the problems it solves.

Finally, look after yourself during the hackathon. It’s so easy to get caught up in the excitement and adrenaline and forget to manage the basics like food, drink, and sleep.

Many teams (us included) reported having only five hours of sleep throughout the entire event—which is not at all recommended. On top of that, it’s easy to forget to eat regularly and drink plenty of fluids, so just try to be as prepared as possible and ensure you have everything needed to complete the hackathon successfully.

The submission

As you get closer to the end of the hackathon, you should have a working app. 🤞

But, if this doesn’t end up being the case for you, don’t worry! Just remember, hackathons are a learning experience, and reflecting on what you have accomplished and what you can improve upon for next time is invaluable.

If you’re ready to start your submission process, we’d recommend starting as early as possible. You can always edit the submission as you get close to finishing the project, but having an initial draft will take a lot of pressure off you – believe us!

The submission requirements can vary between hackathons, but for the Miro<>Junction hackathon, it was as follows:

• App name
• Screenshots of your app
• Short description outlining what your app does
• Problem description and real-world impact with regards to users on Miro
• Source code
• Demo – deployment URL
• Video – a short app demo

To give you an example of what our team submitted, carry on reading below. 👇

Our app submission: Pull Request Manager for Miro

We focused on providing a way for software engineers and product managers to keep track of pending pull requests and ultimately avoid leaving them in a stale state. This would help avoid redundant refactoring and merge conflict resolution tasks to fix these forgotten stale pull requests.

After all, collaboration and communication is key to ensuring the smooth and efficient progress of software projects. We wanted to lean on the power of two popular tools, GitHub and Miro, in our projects. GitHub was the central hub for version control and collaborative coding, while Miro provided a virtual canvas for teams to visualize and collaborate on various aspects of their projects.

With that set as the initial objective, it was time to craft the problem statement!

The problem statement

Many development teams face the issue of pull requests getting lost in the shuffle, leading to delays, increased conflict resolution efforts, and sometimes even duplicated work.

Traditional communication channels, such as Slack, can become cluttered, making it challenging to keep track of the status of pull requests. This lack of visibility can result in stale pull requests, missed opportunities for timely reviews, and ultimately hinder the overall efficiency of the development process.

Real-world impact

The Pull Request Manager app addresses these challenges by seamlessly integrating GitHub pull request information into the Miro platform via the use of App Cards. This integration provides a number of benefits to development teams, including enhanced collaboration and reduced risk of pull requests becoming stale or overlooked.

What does Pull Request Manager offer to Miro users?

It ultimately gives people visibility.

Pull Request Manager provides a centralized space within Miro where teams can visualize and interact with GitHub pull request details. By having all relevant information in one location, teams can avoid the chaos of scattered communication channels, reducing the risk of losing track of important pull requests.

With pull request information readily available in Miro, team members can collaborate more efficiently. They can discuss changes, leave comments, and even mark approvals directly within the Miro board. This streamlines the review process and fosters effective communication among team members.

By having a clear overview of all active pull requests, teams can proactively address potential conflicts before they escalate. This helps prevent scenarios where conflicts pile up, ultimately saving time and effort for developers.

With enhanced visibility and collaboration, teams can maintain a higher standard of code quality. Stale pull requests are less likely to slip through the cracks, and reviews can be conducted in a timely manner, reducing the chances of introducing errors or inconsistencies into the codebase.

What technologies were used?

For this hackathon we used a range of technologies, including:

• VSCode
• Docker
• Prisma
• Knex
• Next.js
• and Miro!

Source code

This is a personal decision and only you can choose the right option.

For the Miro<>Junction Hackathon, our team made their Github repository public for the submission, and have since made it private.

It’s generally a good idea to make your repository public at least for the submission process. However, there are a number of pro’s and con’s to this approach, which we’ll dive into below.

Pros:

• Easier for the judges – allows the hackathon judges to assess the technical excellence of your project properly.
  • Arguably, they can envisage the technical excellence from your app demo. However, the source code allows the judges to check that you haven’t just ‘forced’ your app to work with ‘hacky’ implementations that work for specific use cases.
• Transparency and trust – give the judges a level of trust that you have not begun the Hackathon before the start time.
• Community engagement – allows others to view your work and make code contributions.
• Portfolio building – means you can publicly showcase your skills and achievements!

Cons:

• Intellectual property – someone can easily use your idea in their own project and claim it as their own.
• Future deployment – if you want to deploy your app in the future and charge people for using it, then you might want to consider making your repository private so your ideas are not stolen.

Demo: Pull Request Manager for Miro

After 45 hours of pain-staking work and a whole heap of adrenaline, we finally submitted our app, Pull Request Manager for Miro.

Here’s our demo video:

Note: if you cannot see the demo video, here is a direct link – https://www.youtube.com/watch?v=vl0hn9PqpIY

As an example of it not always going smoothly, our team tried to use Vercel to deploy the app using Next.js, but were unable to. The support team on Discord let all the contestants know that the demo video would suffice.

Ultimately being unable to deploy the app did not hold us back as we still managed to win!

We hope this can give you some relief or comfort, knowing that success is still possible, even if the submission doesn’t always go according to plan.

The Closing Ceremony

Coding stopped on 21 January 16:00 CET.

The judges then had a few hours to select the special prize recipient, 3rd place entry, runner-up, and (drum-roll) the winner! At 19:30 CET, there was a closing ceremony hosted on Zoom where there were some special mentions, and the winners were announced.

We are so proud to be one of the winners at the Miro<>Junction hackathon and absolutely loved the experience!

Congratulations to everyone else who won prizes and participated with very little rest – you are all champions 🙏

Conclusion

If you are still hesitant to join your first hackathon, we recommend you do it! It’s an incredible experience, and you will learn so much.

Hackathons are opportunities to learn new skills and push yourself to design and implement new ideas. Coming up with new app ideas and turning them into a reality is an invaluable and rewarding skill.

Before we finish up, we wanted to say one last thank you to the Miro and Junction teams. Without you, this hackathon would not have been possible, and we’re so grateful you organized this event for us and all the other talented people who took part. Thank you!

If any of you still have questions about hackathons or want to chat with our team, don’t hesitate to reach out!