Participating in a hackathon: My experience

When you have nothing to lose, then you should probably try

I participated in the JSMastery hackathon organized by JSMastery for reaching 1 million subscribers on YouTube.

I spent one week trying to come up with an idea, I then started developing the idea 5 days to submission deadline😰.

I used AI to give me a head start then developed from there. TBH, AI helped me meet the deadline by not allowing me waste time weeding in the dark.

The hackathon's theme was Build and Deploy. So you could build anything, so long as you deploy it. So I built an online game portal where you can find and play games online for free.
I used the freetogame API which only had PC games. I couldn't find a free service for mobile games so I stuck with what I had.

So, the challenge was to build a frontend that displays these games in a user friendly way. Easy right? no, not at all.
I used Next.js to build this, so I was becoming more cconversant with the framework in the process.

When it came to implementing search functionality, I blacked out.
I didn't know to somehow capture the state of the search term nd query the API. cause state is native to the component it's used in. But I overcame that hurdle.

Long story short, everything went well... till I decided to deploy it, then all hell let loose😱. Vercel rolled out a ton of bugs for me. I solved them one by one but one wan't clear and seemed impossible to solve

Error: in categories/categoryTabs.tsx type object doesn't match type Promise

I tried fixing it with AI but everything AI gave did not work. Instead it gave this error

Error: ...PageProps is missing the following properties from Promise 

I tried all I could, went back and forth with the AI to no avail.
I submitted my project with the URL to the live site which wasn't live yet and the GitHub repo, risking being disqualified. I submitted few hours to the final deadline.
To add to the pain we were having a power outage (It's common where I come from) the night I submitted and the night before so I was forced to do the debugging and submission on my tablet.

Next morning, power was restored.I then decided to setup copilot within VScode since it was now free. I told it my problem it was the same things as before, so I gave it my code as reference and told it the others didn't work. It then offered the fix which was to treat the Params object as a Promise:
before

const page = async ({params}: { params: { category: string } }) => {
  console.log(params)
    const {category} = await params;
    const games = await fetchGamesByCategory(category);
...
}

after fix

//Change the the params type to a Promise instead of an
//object, and then await the params to get the category
const page = async ({params}: { params: Promise<{ category: string }> }) => {
  console.log(params)
    const {category} = await params;
    const games = await fetchGamesByCategory(category);
...
}

And that solved it.

Key takeaways:

• Use AI in ideating and debugging
• Install GitHub copilot, it's free!
• Embrace the process
• Don't give up.

You can check out the repo with the full git history as well as the live site and tell me what you think about it.