Skip to main content

MightyMeld Speed Build Hackathon

· 9 min read
Lotanna Nwose

Build with MightyMeld to be one of 8 winners from a prize pool of $2,500.

The Challenge​

Inspired by videogame speed runs, the challenge is to build an app as quickly as possible using MightyMeld. Additional challenges are detailed below.

You have been provided with:

  • A starter app that is functional, but has a very bad UI. You can choose between
  • The README file of your chosen starter app will contain all the instructions you need to get started with the challenge.
  • The README file will also contain a video showing the desired app design and functionality, including completion criteria (a set of actions in the app you need to demonstrate so we can verify the UI is implemented correctly).

You can use the helpful resources below to get yourself acquainted with MightyMeld.

info

We will be hosting office hours on our Discord channel every day at 8pm GMT +1. Stop by with any questions or concerns. Starting on Monday Feb 19

What is MightyMeld?​

MightyMeld is a visual developer tool for React codebases, a new way to accelerate your web development workflow. Seamlessly drag, drop, click, and prompt your UI into place while you hand-code the rest of it. It comes with support for your favourite styling frameworks including Tailwind CSS and Chakra UI.

How to Participate 👬​

To participate, you have to:

  • Be a React developer who is familiar with either Tailwind CSS or Chakra UI.
  • Have a MightyMeld account, create one here for free if you haven’t already.
  • Join the #hackathon channel on our Discord.
  • Follow @mightymeld and @Daveyhert on Twitter.
  • Ensure that you are able to record your computer screen, as we will need a build video for submission.
  • Register to participate here using the email address associated with your MightyMeld account.
  • You can pick up to 2 out of the 8 categories to be considered for when you submit your entry.

Speed Build Prizes 🏆​

The biggest prizes are available to those who build the app the fastest. You can record your build as many times as you’d like. Submit your fastest build video.

  • Tailwind speed build [$500] Starting with the Tailwind starter project, build an app that demonstrates the completion criteria as quickly as possible.
  • Chakra speed build [$500] Starting with the Chakra starter project, build an app that demonstrates the completion criteria as quickly as possible.

Evaluation Criteria: Speed Build​

To ensure fairness, the speed builds will be measured like so:

  • The build timer starts the moment you enter the npx mightymeld command to launch MightyMeld studio, and ends when you start the app demo by clicking “open in new tab” in the studio.
    Open in new tab
  • Along with your build session, your submitted video must also show you demonstrating the completion criteria using your app.
  • Your speed build submission video must be a single, unedited video. Videos that have been sped up or edited will be disqualified.
  • Your video must show the local time on your computer at some point. For example, by showing the clock in the corner of your screen on the Windows/Mac taskbar. This is needed to help the engineering team verify the winner did not cheat using server logs.
  • Your submission must closely resemble the design, as focusing on speed should not result in a UI that deviates from the provided design. Submissions that do not closely match the design may be disqualified at the judges' discretion.
  • Copying and pasting text or code (using Ctrl+C / Ctrl+V or other means) is not allowed.
  • Builds with minimal MightyMeld use may be disqualified at the judges’ discretion. Don’t do all the work in your text editor!
  • Competitors must submit a live demo and a link to a public repo with their build so that the judges may download and try their project.

Creative Build Prizes🏆​

Additional prizes will be rewarded to those who use MightyMeld in creative ways.

  • Best UI design improvement [$250] If you enjoy designing interfaces, then this category is perfect for you. We are looking for entries that start by building the app, then proceed to enhance the look’n’feel of the UI in creative and positive ways. This is not about adding new features, but rather about making the existing features feel better.
  • Most impressive expanded functionality [$250] Add features to the app to make it better. This category is about core functionality, not visual styling. However, the UI for the added features must be of generally good quality. The new features should work well and feel good (even if their visual design is not enhanced).
  • Best fully responsive solution [$250] The main challenge involves only a single screen resolution. To compete in this category, build the app then proceed to make it work for all screen sizes. What are the trade-offs you consider while making your solution responsive?
  • Best dark mode [$250] Enhance the app by adding a dark mode feature in a creative and visually elegant way. We will choose the best dark mode implementation here.
  • Unexpected uses of MightyMeld [$250] Here, the judges will be looking for highly creative uses MightyMeld Studio. These can include elegant ways to get work done faster, or surprising hacks that show MightyMeld Studio being used in a way that it was not designed for. Showcase your creativity.
  • Best Animated Entry [$250] Add animations to the UI to enhance the experience. Let your creativity run wild and showcase your cool ideas

Evaluation Criteria: Creative Build​

  • Video Submissions:
    • For the Unexpected Uses of MightyMeld Category, competitors must provide one video documenting and explaining their unexpected uses.
    • For other creative build categories, competitors must record a minimun two hours of their creative build session (without audio) and also record a separate demo video of their final solution (with audio).
  • Competitors must submit a link to their app running live and a link to a public repo with their code so that the judges may download and try their project.
  • Builds with minimal MightyMeld use may be disqualified at the judges’ discretion. Don’t do all the work in your text editor!

Helpful Resources​

Here are a few resources that can help you learn more:

info

We will be hosting office hours on our Discord channel every day at 8pm GMT +1. Stop by with any questions or concerns. Starting on Monday Feb 19

How to Submit 📪​

The hackathon ends on Monday, 26th February at 11pm GMT +1. Any submissions made after that will not be considered.

Before the deadline, you must perform the following for your submission to be considered:

  • Take screenshots of your final entries and post them on Twitter or LinkedIn, tagging @DaveyHert and @mightymeld using the #MightyMeld hashtag.
  • Fill out the MightyMeld Feedback Form using the same name you use when submitting your entry.
  • Use this link to submit your entry including:
    • A WeTransfer link to an upload of your build video(s) and any other materials that are part of your submission. (After you send something using WeTransfer, they will provide you a link)
    • A link to your Twitter or LinkedIn post sharing screenshots of your entry
    • Your competition email address

After the Hackathon 💵​

The entries will be judged by MightyMeld engineers and David Hert, according to the categories they are submitted under.

The results of this Hackathon will be announced on March 14, 2024, on our Discord channel and Twitter account.

Winners will be contacted via email or Discord to arrange payment.

FAQs​

Q: What if my build time is exactly the same with another participant’s build time?

A: We will use other factors such as fidelity to the design and creativity using MightyMeld to break the tie to select one winner.

Q: Can I use AI code generators for the challenge?

A: Asides from the MightyMeld AI assistant, no other AI generation tool should be used for this challenge.

Q: Can I submit [or be considered] for more than one category?

A: Yes, you can pick up to 2 out of the 8 categories to be considered for when you submit your entry. If you combine a speed build entry with a creative build entry, make sure to clearly mark your single, unedited speed build submission video. We do recommend doing a speed build and a creative build, we think it provides you the best mix of having the most fun building the challenge and maximising for the most money.

Q: What if my creative build is less than 2 hours?

A: If your entire creative build takes less than 2 hours, then submit the video of your full creative build. You will not be penalised.

Q: For Speed builds, can I record my screen seconds before I do npx mightymeld?

A: Yes, you can. It will not affect your build time if your video starts way before then. If you look at the submission form, you will see that we ask you to state your build time. You do need to count from when you hit "npx mightymeld" until your build is finished. We will watch your video and verify the build time you provided.

Q: What can I copy and paste?

A: There is no copy/paste restriction for creative builds. However, for the speed build video, you can not copy and paste text. The speed build's copy and paste restriction is in place to prevent a hack where contestants simply paste in full code solutions and, in that way, perform the speed build in a manner of seconds -- which is not in the spirit of the competition.

If you do have any more questions, kindly ask them in the #hackathon-support channel on our Discord.