This is a submission for the World's Largest Hackathon Writing Challenge: Building with Bolt.
The Hackathon Project That Taught Me Some AI assisted Coding and Life Lessons
⚡ TL;DR
I entered my first hackathon. Built a QR code for video tool I was proud of.
Uploaded a demo video to YouTube as required.
What a great experience. But it didn't all go well...
So what happened? Read on.
This developed into a long-ish post, so I learned how to put a TOC:
📚 Table of Contents
My First Hackathon
I Entered My First Hackathon… and quickly learned that AI doesn't do Everything!
This Hackathon was full of highs and lows, and it forced me to learn and grow - exactly what I was hoping for. But the aftermath wasn't at all expected!
This was my first-ever hackathon. I wasn’t sure I could finish. But I did — and I was proud. I submitted my project on time, followed the rules, including posting a short video to demo how it worked.
I wasn't entirely happy with the project when time ran out. But I sure had a feeling of jubilation!
The Tool I Built
I built QRCodr.com — a tool that helps creators generate animated QR codes for their content. Unlike motionless QR codes in print form, mine can move on-screen in a subtle way that encourages interaction. Viewers can scan, or screenshot and come back later.
Before you go to check it out (if you do) let me just say everything didn't all go as expected.
Project entry: QRCodr on Devpost
Why I built it
I needed a project for this event ‘The World’s Largest Hackathon” presented by Bolt.new. I had been curious about QR Codes for some time. I saw still codes on-screen and in-video as a lost opportunity. Why not take advantage of the platform and make it more interesting and eye-catching with animation?
This interest was enough for me to notice a few YouTube creators starting to use QR Codes more often, but always still, never inviting with motion.
The idea was to improve user experience, not disrupt it.
If it worked, it would help some people and I could perhaps create a little business out of it.
My Hackathon Experience
Any experienced programmer would scoff at my naivety. You might like to skip this section.
A total newbie! But I knew I didn’t know much at all, lol. Close to nothing in fact. That was most of the reason for deciding to do it. I thought maybe I can do it. Maybe if I fail, at least I’ll take some steps towards some form of competence – and for sure gain some learning opportunities. It wasn’t even good timing for me, but I decided the Hackathon would give me a push to do it.
I was unable to start for the first five days, due to an unrelated project and family commitments. Then on the sixth day…
At first, I was excited. My first prompt in Bolt.new whirring away, spinning, building, things happening!
Then reality set in. Oh, this thing doesn’t work. What’s this error mean? Try and try.
Before, I couldn’t have spelt RLS, let alone know that it stood for Row Level Security, lol! I feel I now know a lot more about it, why it’s necessary and important, thanks to this project.
After five hours battling away, mostly out of my depth and heavily consulting with ChatGPT, it seemed I’d made it. Wondering if anyone else had this much difficulty getting Supabase set up and integrated to work how I needed, I thought I’d search online to see. A brutal blow: I quickly found a couple of YouTube videos showing people doing it from Bolt.new in five minutes. Ouch.
Should I have sought help?
It wasn’t that I wanted to do the project in isolation. I know proximity is power. Learning opportunities are better shared I think. I had searched on River to see if I could find other builders near me. The closest seemed to be a two-hour flight away. Not really an option. Oh well, online community it is! Unfortunately I don’t really ‘get’ discord (still - see? Such a newbie). Bolt.new’s YouTube channel became quite an obsession.
Also, I had to think of a way to motivate creators to want to use my product. What was the problem it could solve? (Hmm, product first, customers later - anyone had that problem before?!Lol.)
How could I pose a strong enough motivation for them (future customers) to want my little project? Just moving QR codes – that’s a feature – what’s the real benefit? Ah yes, it gives another way, a visual way right there in-view, to bring to them viewers who don’t go searching for links hidden away in the description or in Bios during or forget to look later.
And what’s more, it can be actionable right when and where they’ve warmed up their audience via their call to action!
I was proud of my app. I was so happy when I finally achieved the stepped gradient I was so keen to get, so as to mimic the modern gradient look and achieve the blocky appearance relating to the blocky nature of the QR code (the 'modules'). When I explain that I did this with code rather than a background image, and that the software’ hung onto’ an incorrect concept I had mistakenly given in my first prompt, you might appreciate it a little more than at first glance. I can change the start and end hex colors and block size.
At first Bolt hadn't appreciated what I was trying to achieve (bad prompt!). Many attempted correcting prompts later I decided, while the look was close to what I envisioned, the only option was to go back to an earlier automatic backup prior to that first prompt. It just wouldn't extract one part of the code that was giving a different look to what I wanted. This was compounded because I couldn’t roll back - I tried but it crashed.
I built all this on a ten year old tablet that was really struggling, and I often had to reset the view because the Bolt preview would go blank with an occasional flash of white!
There were other difficulties for sure. I’ve got to do what from where? Why can the AI do this and not that? Why CLI (and what does that even stand for)? Comical from an experienced coder’s point of view I imagine, lol.
All that debugging cost me A LOT of tokens. I had to buy more just to keep going. I wasn’t disappointed, I had my eye on the prize: a finished product!
Then a few days later Bolt came through in heroic fashion with a heap of free tokens for the final weekend. Thanks Bolt (and the guys and gals at StackBlitz) that was sweet! It made all the difference. Prompt and build bolder and faster!
In the last few hours of the project, shortened by the desire to attend a family funeral on the last day, I was making harsh scope decisions and cutting through to my core vision. It has to function! Shortcuts in good design must be made against the clock! "No, I told you I don't want to build a new database table, we have to find another way, there's only hours left!" (Or similar, is what I wrote more than once to my AI team mate.) I had already made changes or added a table once before that point. It took me hours and made my head hurt. (Again, experienced coders, insert giggle here!) But There wasn't time. It was neck and neck. Could I make it work fully enough to be a valid entry?
Let's develop a new idea (I was scrambling to make it work against the clock and against recommended design). We need a work around so I don't need to create a new table. How about this variable? We don't need that any more at this point in the workflow... Can I get it to work and finish everything (or at least everything my trimmed scope became)?
Yes! I think I did it! Just one hour left to make the video. Here goes…
I submitted the project with ten minutes to spare. Phew!
Looking back, you would laugh. Many hackathons take place over a weekend, I gather, and here am I using as much I could of an entire month to bring my little idea to life. But I am proud of my achievement, and I am changed. I have learned so much!
My Walkthrough Video
In the demo video, I showed a simple walkthrough of the tool. I showed how easy it is to use – not heaps of settings and choices to make. That bugged me when I used existing tools. With a URL entry – I chose Bolt.new, the hackathon sponsor – and an AI prompt for styling, I showed how to generate a QR code and then animate it. All very easy. I showed a few other features and neat things I had built in.
The next day (July 1st), I went back to YouTube to get the link to proudly send to a friend to show what I had made.
I had thought for me, that this was a dramatic experience. At time there was jubilation, like "wow, that looks great, I can't believe I made that". At times there were lows, like "OMG, I've spend a day on this and I can't see if am any closer to it working". My AI team mate would for hours of debugging say "you're doing great, you are 90% of the way there". A great cheerleader.
Finally, I was jubilant. I actually succeeded. I submitted my project, with 10 minutes to spare before the final deadline, and it worked!
But, the drama wasn't over - See my Beyond the Code submission.