---
title: 🍪 THE MOST ANNOYING COOKIE BANNER EVER HACKATHON 🤬
date: 2024-10-10
tags:
  - cookie consent
  - saas
  - sideproject
  - hackathon
hideBannerImage: true
authors: vince
---
import { Image } from 'astro:assets';
import wheel from '@assets/cookie-consent/wheel.gif';
import enter from '@assets/cookie-consent/enter.gif';
import keyboard from '@assets/cookie-consent/keyboard.jpg';
import share from '@assets/cookie-consent/image.png';

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    src="https://www.youtube.com/embed/tLEEk8Q5jo4?si=U-nROtawDHrjJ4k0" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    referrerpolicy="strict-origin-when-cross-origin" 
    allowfullscreen>
  </iframe>
</div>

## What kind of hackathon is this?

The goal here is simple. Make **THE MOST ANNOYING COOKIE BANNER** you can think of.

Cookie consent banners annoy us all. So we thought, why not have some fun with them? Here are a couple examples of what that might look like:

1. *The Cookie Consent Wheel of Fortune:*

<Image src={wheel} alt='Consent wheel' loading='lazy' />

2. *The “Hit Enter When the Red Ball is Over the Accept Button to Consent” Banner:* 
    
<Image src={enter} alt='Enter to win' loading='lazy' />
    

Now it’s time for you to get creative. Btw, if you’re looking for some inspiration, check out these [Ridiculous Volume Slider UI’s](https://uxdesign.cc/the-worst-volume-control-ui-in-the-world-60713dc86950).

## Prizes

2 winners will receive a nice mechanical keyboard, an additional *annoying* gift, as well as a shoutout on our socials.

The 2 winners will be selected by:

- The Wasp team
- Our Community (Discord & Twitter)

The community will get a chance to vote in a battle royale style elimination tournament, where two banners will go head-to-head and the winner will advance to the next round.

<Image src={keyboard} alt='Keyboard' loading='lazy' />

(The brand/style will depend on the winner's location, but we'll do our best to find one with a Wasp look and feel 😃)

## How to participate

- Fork the [Annoying Cookie Banner Stackblitz Template](https://stackblitz.com/edit/vitejs-vite-uiyjag?file=src%2Flanding-page%2Fcomponents%2FCookieConsentBanner.tsx)
    - If you prefer to work in your own editor, just click on the `Create a repository` button after you fork the template
- When finished with your banner, click on `Share` in the top left, and in the `Embed` tab, click `Copy URL` with the following settings:
    
  <Image src={share} alt='Share' loading='lazy' />
    
- Next, [edit the `MOST-ANNOYING-COOKIE-BANNER.md` file](https://github.com/wasp-lang/open-saas/edit/main/MOST-ANNOYING-COOKIE-BANNER.md) on the Open SaaS repo.
    - Enter your GitHub username followed by the embed link you copied from Stackblitz 
    - Note: after you create a PR, the Wasp team will add the `ANNOYING COOKIE BANNER` label to it. 
    
- Make sure you also ⭐️ [star the Open Saas repository](https://github.com/wasp-lang/open-saas) to be eligible to win!

## Deadline & Results

Submit your PR before the 21st of October to be eligible to win!

Be sure to join our [Discord](https://discord.gg/rzdnErX) or follow us on [Twitter/X](https://twitter.com/wasplang) for updates and the final results!

## Let's annoy our users! 🚀

Let's create the most annoying cookie consent banner and have some fun! This hackathon is your chance to show off your creativity and tech skills. We're super excited to see what wild ideas you come up with. 

Remember, this is all about having fun and pushing the boundaries of user interface design!

Let the annoyance games begin! 🎉