How I won supabase hackathon gold🥇 On my second ever React project.

I'm currently in the process of learning how to code. I`ve been working on my first react project for a while now, it's a Saas setup but the bottleneck is stripe and they have not approved my account. So after spending a while configuring my app to have stipe payments working, I need to refactor for a new payment system 😅 I may go with Coinbase as it is a cyrpto related site and hopefully they will not block me.

Anyway

So while feeling sorry for myself I saw that supabase, the open-source firebase alternative, was running a Christmas hackathon to get their shiny new real-time subscription out there.

So I thought I would enter my first hackathon to lift my spirits.

THE GOAL: Was to create a holiday based project using the new real-time API features

I had limited time as it was the holiday season and I was working flat out in my normal job as a maintenance engineer. So, I got to work on my lunch breaks in my car and decided to make a full-on over the top, cringy-looking Christmas-themed joke wall, using the most Christmasy color pallet I could find.

The real-time feature of my app is so that users can vote on jokes that have been posted. Also, the leaderboard and votes would update instantly as shown below.

"Supabase provides a realtime engine on top of Postgres, so that you can listen to changes as they happen. Our realtime engine uses the built-in replication functionality of Postgres."

I found it really simple to get the realtime features working in my app.

Once I set up my supabase client, all I had to add to my code was these two functions and add the onClick to the icons to decrement or increment.

const incrementCount = async (row_id) => {
    const { data, error } = await supabase.rpc("increment", { row_id: row_id });
    setFavTouched(!favTouched);
  };

  const decrementCount = async (row_id) => {
    const { data, error } = await supabase.rpc("decrement", { row_id: row_id });
    setFavTouched(!favTouched);
  };

Once this app was built almost all of it was from my car 🚗 I submitted the site and waited....

A few weeks later I get a tweet I WON GOLD 🥇 for the best Christmas themed which is not bad considering it was built in my car and Is my second react project ever!!

Check out the site here: %[https://santa-banter.vercel.app/]

github: %[https://github.com/Keoooo/santa-banter]

supabase winners: %[https://supabase.com/blog/2021/12/17/holiday-hackdays-winners-2021]