Skip to content

Blog

šŸŖĀ THE MOST ANNOYING COOKIE BANNER EVER HACKATHON šŸ¤¬

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:

Consent wheel

  1. The ā€œHit Enter When the Red Ball is Over the Accept Button to Consentā€ Banner:

Enter to win

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.

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.

Keyboard

(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
    • 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.png

Deadline & Results

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

Be sure to join our Discord or follow us on Twitter/X 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! šŸŽ‰

How I Built & Grew CoverLetterGPT to 5,000 Users and $200 MRR

Hey, Iā€™m Vinceā€¦

Image description

Iā€™m a self-taught developer that changed careers during the Covid Pandemic. I did it because I wanted a better career, enjoyed programming, and at the same time, had a keen interest in IndieHacking.

If youā€™re not aware, IndieHacking is the movement of developers who build potentially profitable side-projects in their spare time. And there are some very successful examples of IndieHackers and ā€œsolopreneursā€ out there inspiring others, such as levels.io and Marc Lou.

This thought of being able to build my own side-project that could generate profit while I slept was always attractive to me.

Image description

So Iā€™m happy to report that Iā€™ve finally done it with my first software-as-a-service (SaaS) app, CoverLetterGPT.xyz, which I launched in March 2023!

Iā€™ll be the first to admit that the results arenā€™t spectacular, but theyā€™re still something Iā€™m very proud of:

  • over 5,000 registered users
  • $203 monthly recurring revenue (MRR)

Below, Iā€™m going to share with you how I built it (yes, itā€™s open-source!), how I marketed and monetized it, along with a bunch of helpful resources to help you build your own profitable side-project.

What the heck is CoverLetterGPT?

CoverLetterGPT.xyz was an idea I got after the OpenAI API was released. Itā€™s an app that allows you to upload a PDF of your CV/resumĆ©, along with the job description youā€™re applying to, and it will generate and edit unique cover letters for you based on this information.

{% embed https://youtu.be/ZhcFRD9cVrI %}

It also lets you save and manage your cover letters per each job, making it easy to make and apply to multiple jobs without having to keep copy and pasting all your important info into ChatGPT!

Whatā€™s the Tech Stack?

Image description

CoverLetterGPT is entirely open-source, so you can check out the code, fork it, learn from it, make your own, submit a PR (Iā€™d love you forever if you did šŸ™‚)ā€¦ whatever!

I built it using the Wasp full-stack framework which allowed me to ship it about 10x faster.

Why?

Because Wasp as a framework allows you to describe your appā€™s core features in a main.wasp config file. Then it continually compiles and ā€œgluesā€ these features into a React-ExpressJS-Prisma full-stack app for you.

All you have to focus on is writing the client and server-side logic, and Wasp will do the boring stuff for you, like authentication & authorization, server config, email sending, and cron jobs.

BTW, Wasp is open-source and free and you can help the project out a ton by starring the repo on GitHub: https://www.github.com/wasp-lang/wasp šŸ™

https://media1.giphy.com/media/ZfK4cXKJTTay1Ava29/giphy.gif?cid=7941fdc6pmqo30ll0e4rzdiisbtagx97sx5t0znx4lk0auju&ep=v1_gifs_search&rid=giphy.gif&ct=g

{% cta https://www.github.com/wasp-lang/wasp %} ā­ļø Thanks For Your Support šŸ™ {% endcta %}

For the UI, I used Chakra UI, as I always do. I like that itā€™s a component-based UI library. This helps me build UIā€™s a lot faster than I would with Tailwind or vanilla CSS.

For payments, I used Stripe, (Iā€™ll go into the details of monetization below).

The Server and Postgres Database are hosted onĀ https://railway.app, with the client on Netlify.comā€™s free tier.

Image description

By the way, If youā€™re interested in building your own SaaS with almost the same stack as above, I also built a free SaaS template you can use that will save you days of work!

How I Marketed It

My biggest take-away from this whole project was that open-sourcing it was the best way to market it!

This seems counter-intuitive, right? Why would making the code available for anyone to see and copy be good for a business? Youā€™re basically rolling out a red carpet for competitors, arenā€™t you?

Well, not quite.

First of all, the number of people who will realistically spend the time and energy launching a direct competitor is low. Also, most people interested in your open-source code want to learn some aspect of it and apply it to their own ideas, not just copy yours directly.

Secondly, and most importantly, the fact that itā€™s open-source makes people a lot more receptive to you talking about it.

Image description

When you present something youā€™ve built and give people the opportunity to learn from it, theyā€™re much more welcoming! As a result, theyā€™re more likely to upvote it, share it, use it, and recommend it to others.

This is exactly what happened with CoverLetterGPT! As a result of me sharing the open-source code, it get featured on the IndieHackers.com newsletter (>100k subscribers), shared on blogs, and talked about on social media platforms.

Image description

And even though itā€™s a small, simple product, I tried launching it on Product Hunt, where it also performed considerably well.

So, all together, these initial efforts combined gave my product a good initial marketing presence. To this day, I havenā€™t really done much else to market it, except some twitter posts (and this post, if you want to consider it marketing šŸ¤‘).

How I Monetized It

When I first launched in March 2023, I didnā€™t really expect anyone to pay for the product, but I wanted to learn how to use Stripe as a payments processor, thinking that the skills might be useful in the future.

So I started simple, and just put a one-time payment link for tips. No paywall, no subscriptions. It was entirely free to use with any tip amount welcome.

To my surprise, tips started coming in, with some as high as $10 dollars!

This encouraged me to force users to login to use the product, and add a paywall after users used up 3 credits.

My initial payment options were:

  • $4.95 for a 3 months access
  • $2.95 for 10 cover letter generations

Image description

That went reasonably well until I implemented the ability for users to use GPT to make finer edits to their generated cover letters. Thatā€™s when I changed my pricing and thatā€™s when better profits started to come in:

  • $5.95 / month subscription with GPT-4
  • $2.95 / month subscription with GPT-3.5-turbo

Currently, over 90% of my customers choose the more powerful, more expensive plan with GPT-4, even though the 3 trial credits use the GPT-3.5-turbo model.

(I also integrated Bitcoin Lightning payments ā€” check out the repo if you want to learn how ā€” but havenā€™t received any yet.)

Now, with an MRR of ~$203, my monthly profit of course depends on my costs, which are:

  • Domain Name: $10/year
  • OpenAI bill: ~ $15/month
  • Hosting bill: ~ $3/month

Which leaves me at about ~ $183/month in profits šŸ˜€

Future Plans

One of the most surprising aspects about CoverLetterGPT.xyzā€™s success is that, on the surface, the product is very simple. Also, Iā€™ve done very little in the way of SEO marketing, and havenā€™t continued to market it much at all. The current growth is mostly organic at this point thanks to my initial marketing efforts.

But I still have some plans to make it better:

  • buy a better top-level domain (TLD), like CoverLetterGPT.ai
  • add more features, like the ability to generate interview questions based on the cover letters
  • improve the UX and make it look more ā€œprofessionalā€

If you have any other ideas how I could improve it, drop me a comment, message me on twitter/x, or submit a PR to the repo.

Final Words + More Resources

My intention with this article was to help others who might be considering launching their own SaaS product. So I hope thatā€™s been the case here. If you still have any questions, donā€™t hesitate to ask.

Here are also the most important links from this article along with some further resources that will help in building and marketing your own profitable side-project:

Oh, and if you found these resources useful,Ā donā€™t forget to support Wasp byĀ starring the repo on GitHub!

https://res.cloudinary.com/practicaldev/image/fetch/s--OCpry2p9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bky8z46ii7ayejprrqw3.gif

{% cta https://www.github.com/wasp-lang/wasp %} ā­ļø Thanks For Your Support šŸ™ {% endcta %}