CatChamp

Inspiration

Let me introduce Misty to you

At first sight, she might look like just another chonky cat, slightly grumpier than average, but in fact, she is the cutest cat in the world. When I showed her to my friend who has two cats of her own, she disagreed and told me it's her cats that are the cutest. So, in order to settle this out, we asked another friend for his opinion, but it turns out he also has a cat and claims his is the cutest! It seems like every cat owner believes their cat is the cutest. And this hasn't been settled between us to this day.

Right around the time the hackathon started, I stumbled upon this post from Florian Darroman mentioning a "Viral web app idea: ProductHunt for dog owners". I would love to claim the idea as my own, but I must give credit where credit is due, and admit that this post has been the trigger. All the arguments clicked, and thinking back to the unsettled debate with my friends, I thought this would be the perfect idea for this hackathon.

Creating a platform where the bragging rights of the cutest cat can finally be earned.

What it does

CatChamp is a platform where cat owners can enroll their cat in contests, and the community votes for the cutest. It is 100% free. The rules are very simple. One cat per contest per cat owner. One vote per person per contest.

At the end of each contest, a champion is decided and will be added, not only to the hall of champions, but will also claim the spotlight on the homepage until a new champion is elected in a future contest. Having the possibility to display the Instagram handle of the cat, it's a perfect way to gain followers and who knows, get your cat to finally start a career as an influencer so that they finally pay for their own bills!

There will be regular contests. Monthly/Seasonal/Themed and also contests per cat breed so that every cat can get a shot at the crown (even Sphynx cats). It is also important for us to also have regular contests where we showcase exclusively cats from shelters in order to give them more visibility and hopefully help them find a forever home.

How I built it

CatChamp was built almost exclusively with bolt.new. Though I have some background in dev, I wanted to use the platform the way it was intended to and have as little intervention in the code as possible. I didn't design the UI/UX first, and then feed it to bolt.new. The design was totally done on the fly, seeing that bolt is pretty good at design. The only external tool used for design was tweakcn, to generate a theme.css with the desired color/typography theme. This integration has been very smooth as I just fed this theme to bolt and asked it to adapt the project to it. I leverage bolt's integrations as much as possible:

Supabase

• Supabase Auth: for authentication (both Email and Google)
• Supabase Storage: to store cat and profile photos
• Supabase Database: for all the tables about users, contests, cats, achievements, etc.
• Supabase Edge Functions: to handle the achievement system in the backend as well as the profile creation alongside Supabase Auth
• Supabase webhooks: In order to trigger Edge functions when a database evolution may trigger new achievements

One more point about Supabase. I customized all the Auth related emails by asking bolt for the HTML templates to use.

Netlify For deployment, I use the Netlify button in the interface. It has been super easy to set up and now I'm loving the one click deployment via bolt.

The only external tool that is used in this production toolchain is Resend. I configured Supabase to use Resend for the emails as I wanted to have my custom domain email sending the emails as xyz@supabase.com is not as reassuring as contact@catchamp.com when registering.

Challenges I ran into

• Time Having a full-time job and handling operations of my main side-project in parallel, adding this additional work has been challenging at times.
• Next.js I initially wanted to build the project using Next.js as I'm more familiar with this framework. Having one project with separated concerns for frontend and backend would have been ideal. However, bolt currently does not support Supabase integration for Next.js projects. As a result, wanting to leverage bolt's capabilities to the max, I decided to switch to React and use the Supabase integration.
• Auth Having never dealt with Auth before, it was a challenge getting it to work.
• Trusting the code Being used to producing most of my code, it has been a challenge trusting the code that was being produced by bolt. I've been tempted on many occasions to take some time to review the code and understand it. But in the end, I learned how to trust the code and it seems to work pretty well.
• Growing an Instagram base so that when the project is out, I can start finding contestants.

Accomplishments that I'm proud of

Having produced a production ready project from frontend to backend, including database and auth, in less than a month.

What I learned

• The power of vibe-coding It is definitely a way to 10x our productivity. However it is a skill of its own to learn. Prompting is a skill that requires practice to be honed. Building a project is no longer about coding skills, but about having a complete vision of the product. From the design to the architecture. Problems have to be broken down into smaller problems. And the tool has to be taken as an executor that you guide, more than an all mighty product designer+coder.
• The power of Supabase I had only used the database and storage features of Supabase so far. Now I also know how to use edge functions and leverage the webhooks of Supabase. And most importantly, I am extremely pleased by how easy Auth actually is to set up with Supabase Auth. I didn't use Auth in my previous projects as I was daunted by how tough it looked to set up, but it's honestly seamless using Supabase Auth.
• The power of Netlify I did go the hard way learning how to set up a VPS to host some of my projects previously. But I must admit that this one click deploy with Netlify is a serious time-saver and gives real peace of mind.

What's next for CatChamp

First and foremost, I'm going to settle the debate of the cutest cat with my friends once and for all. Then I hope to see this platform grow into a vibrant place gathering all the cutest cats, battling in friendly contests. With their owners sharing actively links towards the voting page to prove the world that their cat is indeed the cutest. The viral aspect of the site being something I bet on for its growth. It will also become a place of education, where there will be articles about cat care and anything related to cats. The social aspect is also very important to me. I want to give more visibility to cats looking for forever homes. And also, should this project become profitable someday, a share of the profit will be donated to shelters. Financially, I do see potential for profit as a platform gathering cat lovers will naturally attract cat product/food/care companies for advertisement (cat owners being generous spenders). I will also give them the possibility to sponsor some contests. The idea is not only to make a profit personally, but also to give financial prizes to the winners, making it even more exciting for all. And growing the profit into a significant enough amount so that the donations to shelters actually make an impact too.

I hope CatChamp will grow to have such positive impact where everyone wins, in a healthy and fun manner.

Challenge Compliance:

• Startup Challenge: Use Supabase to prep your Bolt.new project to scale to millions As mentioned in "How I built it", this project uses almost all the Backend As A Service functionalities of Supabase: Auth, Storage, Database, Edge Functions, webhooks
• Deploy Challenge: Use Netlify to deploy your full-stack Bolt.new application It is deployed using the Netlify button on bolt.new

Built With

• bolt.new
• netlify
• react
• supabase
• vite