hackathon.html

---
layout: default
title: Hackathon
permalink: /hackathon/
---

<div class="text-base md:text-lg font-sans">
  <section class="hero-unit p-20 md:p-40">
    <div class="text-center">
      <h1 class="text-5xl md:text-8xl lg:text-8xl leading-tighter font-black">
        Engineering Labs
      </h1>
      <p class="font-black p-3 text-2xl md:text-3xl">
        A Flyte hackathon in collaboration with
        <a href="https://mlops.community/">MLOps Community</a>
      </p>
      <p class="font-black">Feb 25 - Mar 31, 2022</p>
      <p class="p-3 text-xl font-extralight">
        Come build MLOps and Data products, have some fun, and win exciting
        prizes!
      </p>
      <button
        class="bg-transparent hover:bg-purple-500 text-purple-500 font-semibold hover:text-white py-3 px-4 border-purple-500 border-2 hover:border-transparent rounded mt-2"
      >
        <a
          href="https://docs.google.com/forms/d/1OpnCAv2AGjDBYO5gKj3mJ0B3nrBArlfGeptNpMAlRjQ"
          target="_blank"
          >Join Hackathon</a
        >
      </button>
    </div>
  </section>

  <section class="bg-white">
    <h3 class="text-4xl md:text-5xl font-black text-center pt-10 md:pt-20">
      Challenge
    </h3>
    <div class="px-10 md:px-32 lg:px-52 pt-12 pb-16">
      <p class="font-black py-3 text-xl md:text-2xl">
        Join us for a 5-week virtual hackathon starting Feb 25!
      </p>

      <p class="py-3">
        Anyone can build ML models these days, but only a few can deliver
        production-ready ML applications. Do you want to venture into the MLOps
        space and get the hang of deploying ML in production? Join us in this
        hackathon to attain the skills to become a full-stack ML engineer. The
        theme is, as you may have guessed, building end-to-end ML applications
        on top of Flyte as the MLOps platform.
      </p>
      <p class="py-3">
        Your idea could be around any ML or Data application. Pick up retail use
        cases, fraud detection, time-series forecasting problems, natural
        language processing, computer vision, or literally, any ML or data use
        case you think adds real-world value in production, and we're good to
        go!
      </p>
      <p class="py-3 font-light text-slate-600">
        This hackathon gives you a chance to contribute to open source software,
        interact with experienced MLOps professionals, have fun building
        applications, and win some prizes in the process!
      </p>
    </div>
  </section>

  <section class="swag-text-bg">
    <h3 class="text-4xl md:text-5xl font-black text-center pt-10 md:pt-20">
      Prizes
    </h3>
    <div class="px-10 md:px-14 lg:px-52 pt-12 pb-16">
      <div
        class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 md:gap-10"
      >
        <div
          class="max-w-sm rounded overflow-hidden p-4 sm:p-4 md:p-10 lg:p-10 mx-auto"
        >
          <div class="mb-5">
            <img src="{{ "/assets/images/hackathon/first.png" | prepend:
            site.url }}" width="80" class="mx-auto">
          </div>
          <div class="text-xl mb-4 text-center font-black">$500+</div>
          <p class="text-base mb-3 text-center font-light">
            Prizes include
            <span class="font-bold">$500</span> in cash, and
            <span class="font-bold">Flyte swag</span>.
          </p>
        </div>
        <div
          class="max-w-sm rounded overflow-hidden p-4 sm:p-4 md:p-10 lg:p-10 mx-auto"
        >
          <div class="mb-5">
            <img src="{{ "/assets/images/hackathon/second.png" | prepend:
            site.url }}" width="80" class="mx-auto">
          </div>
          <div class="text-xl mb-4 text-center font-black">$250+</div>
          <p class="text-base mb-3 text-center font-light">
            Prizes include <span class="font-bold">$200</span> in cash, and
            <span class="font-bold">Flyte swag</span>.
          </p>
        </div>
        <div
          class="max-w-sm rounded overflow-hidden p-4 sm:p-4 md:p-10 lg:p-10 mx-auto"
        >
          <div class="mb-5">
            <img src="{{ "/assets/images/hackathon/third.png" | prepend:
            site.url }}" width="80" class="mx-auto">
          </div>
          <div class="text-xl mb-4 text-center font-black">$100+</div>
          <p class="text-base mb-3 text-center font-light">
            Prizes include <span class="font-bold">$100</span> in cash, and
            <span class="font-bold">Flyte swag</span>.
          </p>
        </div>
      </div>
      <p class="font-light text-slate-600 text-center">
        *If you are unable to receive cash compensation, we will send you a gift
        card or you can choose an approved charity and we will donate to it.
        Also, every participant will receive Flyte swag.
      </p>
    </div>
  </section>

  <section class="bg-white">
    <h3
      class="text-4xl md:text-5xl font-black text-center pt-10 md:pt-20"
      id="judging-criteria"
    >
      Judging Criteria
    </h3>
    <div class="px-10 md:px-14 lg:px-52 pt-12 pb-16">
      <div
        class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 md:gap-10"
      >
        <div
          class="max-w-sm rounded overflow-hidden p-4 sm:p-4 md:p-10 lg:p-10 mx-auto"
        >
          <div class="mb-5">
            <img src="{{ "/assets/images/hackathon/creativity.png" | prepend:
            site.url }}" width="80" class="mx-auto">
          </div>
          <div class="text-xl mb-4 text-center font-black">Creativity</div>
          <p class="text-base mb-3 text-center font-light">
            How original is the ML application?
          </p>
        </div>
        <div
          class="max-w-sm rounded overflow-hidden p-4 sm:p-4 md:p-10 lg:p-10 mx-auto"
        >
          <div class="mb-5">
            <img src="{{ "/assets/images/hackathon/execution.png" | prepend:
            site.url }}" width="80" class="mx-auto">
          </div>
          <div class="text-xl mb-4 text-center font-black">Execution</div>
          <p class="text-base mb-3 text-center font-light">
            Is the app technically impressive? How well did the team execute on
            their application?
          </p>
        </div>
        <div
          class="max-w-sm rounded overflow-hidden p-4 sm:p-4 md:p-10 lg:p-10 mx-auto"
        >
          <div class="mb-5">
            <img src="{{ "/assets/images/hackathon/design.png" | prepend:
            site.url }}" width="80" class="mx-auto">
          </div>
          <div class="text-xl mb-4 text-center font-black">
            Human-friendliness
          </div>
          <p class="text-base mb-3 text-center font-light">
            How easy is it to understand the model UI?
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="swag-text-bg">
    <h3 class="text-4xl md:text-5xl font-black text-center pt-10 md:pt-20">
      How to Compete
    </h3>
    <div class="px-10 md:px-32 lg:px-80 pt-12 pb-16">
      <p class="py-3 font-light text-slate-600">
        The application you build has to be a part of the
        <a
          href="https://github.com/flyteorg/flytelab"
          class="underline decoration-4 decoration-purple-400"
          >Flytelab</a
        >
        repository. You should:
      </p>
      <ul class="list-decimal list-inside pl-5">
        <li>Fork the Flytelab repo and clone it</li>
        <li>Create a new project on Flytelab following the
          <a
          href="https://github.com/flyteorg/flytelab/blob/main/README.md"
          class="underline decoration-4 decoration-purple-400"
          >instructions</a
          >
        </li>
        <li>Implement the application</li>
      </ul>
      <p class="py-3 font-light text-slate-600">
        Steps to implement the application from a workflow and app perspective
        are outlined below:
      </p>
      <p class="py-3 font-semibold">Workflow iteration cycle</p>
      <p class="py-2">
        We'll provide a fully-provisioned Flyte cluster to train, iterate on,
        and generate predictions from your ML model.
      </p>
      <ul class="list-decimal list-inside font-light pl-5">
        <li>Write code (use public datasets for your ML applications)</li>
        <li>Debug locally on sandbox</li>
        <li>Deploy to the <strong>Union.ai playground</strong></li>
        <li>Execute workflows on the playground</li>
      </ul>
      <p class="py-3 font-semibold">
        [Optional] App iteration cycle (e.g.,
        <a
          href="https://streamlit.io/"
          class="underline decoration-4 decoration-purple-400"
          >Streamlit</a
        >)
      </p>
      <p class="py-2">
        Create a user interface for the predictions of your model as a web app
        (e.g., Streamlit or
        <a
          href="https://plotly.com/dash/"
          class="underline decoration-4 decoration-purple-400"
          >Dash</a
        >), Jupyter notebook, or any other frontend technology.
      </p>
      <ul class="list-decimal list-inside font-light pl-5">
        <li>Write code</li>
        <li>Debug locally on local streamlit server</li>
        <li>Merge to master</li>
        <li>Streamlit cloud auto-deploy</li>
      </ul>
      <p class="py-5 font-semibold">
        The code will be reviewed on a regular basis, and the team will provide
        you the feedback.
      </p>
      <p class="py-3 font-light text-slate-600">
        At the end of the hackathon, you'll be able to present your project at
        the MLOps Community meetup; Flyte judges will assess each project
        according to the
        <a
          href="#judging-criteria"
          class="underline decoration-2 decoration-purple-400"
          >judging criteria</a
        >.
      </p>
      <p class="py-3">The top 3 winners will be invited to:</p>
      <ul class="list-disc list-inside font-light pl-5">
        <li>Present their projects at the Flyte meetup</li>
        <li>Write a blog post</li>
        <li>Give an MLOps community coffee session interview</li>
      </ul>
    </div>
  </section>

  <section class="bg-white">
    <h3 class="text-4xl md:text-5xl font-black text-center pt-10 md:pt-20">
      Support
    </h3>
    <div class="px-10 md:px-32 lg:px-80 pt-12 pb-16">
      <p class="py-3">Need some help getting started?</p>
      <ul class="list-decimal list-inside font-light text-slate-600 pl-5">
        <li>
          Check out the Flyte
          <a
            href="https://docs.flyte.org/en/latest/getting_started/index.html"
            class="underline decoration-2 decoration-purple-400"
            >getting started guide</a
          >
        </li>
        <li>
          Go through the
          <a
            href="https://github.com/flyteorg/flytelab/tree/main/projects/weather_forecasting"
            class="underline decoration-2 decoration-purple-400"
            >weather forecasting ML app</a
          >
        </li>
        <li>
          You can always refer to the Flyte
          <a
            href="https://docs.flyte.org/en/latest/"
            class="underline decoration-2 decoration-purple-400"
            >documentation</a
          >
        </li>
        <li>
          More questions? Join our
          <a
            href="https://slack.flyte.org/"
            class="underline decoration-2 decoration-purple-400"
            >Slack</a
          >
        </li>
      </ul>
    </div>
  </section>
</div>

<script>
  $(".main")
    .removeClass("bg-gradient-purple-darkest-to-light")
    .addClass("hackathon-hero-bg");
  $(".navbar-item").removeClass("text-white");
  $("#flyte-logo-on-light-bg").css("display", "block");
  $("#flyte-svg-mobile").css("display", "none");
  $("#flyte-svg-main").css("display", "none");
  $("#lfaidata-main").css("display", "none");
  $("#lfaidata-light-bg").css("display", "block");
  $("#nav-svg").css("fill", "#000000");
</script>