choong pw

I am so excited to share that I just ended a Canva hackathon with a consolation prize in the Best Enterprise Category with Canva Chart Plus.

How it all gets started

In July, I anticipated my weekend to be rather free and there comes a pretty rewarding prize pool to take part in. Given my experience with building integration or apps on top of an existing platform, this hackathon looks too good for me to miss out on.

First thing first, read the docs. Don’t have to go into too much detail for now, just understand the capability of what can or can’t be done. Then, I wear my thinking hat to look for various ideas.

Immediately, my first few ideas are all related to my domain and the knowledge that I already possess. Here are those examples:

• Text to path – TypeCraft (exist in marketplace)
• Upscaling – Upscaler (exist in marketplace)
• Auto-align text – Native Canva (exist natively)
• Mail merge auto fill – Google sheet data – Canva Bulk Create (exist natively – enterprise feature)
• D3 Visualizer chart – New idea
• Miro <> Canva – community requested feature
• Map visualizer – all leaflets

One after another, I try to do some research to see if the idea worth pursuing. The idea is not worth any value until we put it into action. If the idea is already in the marketplace, or there is not a good opportunity for me to fight for a winning chance, I skip it.

This is still in phase 1. So, try to avoid complicating the thought process of how you want to implement.

Strategizing

Now that I have a chosen idea to work with, I need a strategy to implement it in the shortest amount of time. I am lucky enough to stumble across D3 Gallery which can provide me with some head start in terms of implementing this as a solution.

The only problem was the sheer amount of charts to implement was rather daunting. Again, simplicity is the key to any hackathon. Start with one, and eventually grow from there.

I also choose to dedicate myself to refactoring along the way whenever there is an opportunity to do so. Only with a well-refactored code I can continue to implement more charts quickly, and back-tracking for consistency. This early thought process came in handy, especially when I submitted it for review and reimplement based on the reviewer’s feedback.

Game on

As you can see from my heatmap, I initially dedicated my weekends to work on the project. But, the code was so fun to work with that I persevered every night just to make some progress.

To be honest is not as smooth a journey as you imagine. I do struggle from time to time to fix some weird D3 behavior. Luckily, With the help of Claude Sonnet 3.5, this LLM has helped me greatly in fixing some of the rather generic D3 library setups. That just helped to push me further ahead in the development. By the end of week 2, I have already submitted the code for review.

Working on the next idea

Now that I have some downtime waiting for the review to proceed. Instead of choosing to refine further, I choose to work on the second idea. The reason is that the next idea is in a different category, thus, it won’t hurt my chance of competing with my other project.

As I started the next project and saw firsthand how capable Sonnet 3.5 is, my intention was different this time. I want to let AI do the job.

Having to spend 3+ days (my after-work night) trying to teach the AI to set up the skeleton code using (Miro App with Tailwind and NextJS), it always produces half-correct and half-hallucinated pieces of crap. I also had to choose Tailwind instead of Mirotone because I know these LLM are better at handling generic and common framework. Being a seasoned developer, I know what I want, thus the half-baked skeleton won’t work. Otherwise, I knew I would face more frustration as I progressed further.

Back to basic

Follow the readme, setup the basic Miro project, convert it into NextJS, and start my development. With a better structured code, I once again, tried to borrow the AI to build for me. Again, without a lot of context is hard to communicate with the LLM to spit out exactly what I want. There is a lot of back and forth (felt that I wasted too much time on it).

I wasn’t saying that the LLM is shit. It does help me on a lot of occasions. One example suggested was using an event listener to wait for the redirect callback to re-render the page upon connecting to Canva. To me, that design approach was pretty elegant, and I never in my mind would think of this solution. Another hard stuff the LLM has helped me with was fixing the PKCE (code challenge) for the Canva OAuth procedure.

I was pretty confident and not so confident with this app. Mainly because I didn’t achieve what I imagined it to be. Mainly due to a lack of integration API capability. Nevertheless, since is done, why not make it to the finishing line? In total, I spend 2 weeks on this project.

Interuption

I got some feedback from the reviewer. To much of my respect, their Product designers are diligent with their work. They gave constructive feedback on how to improve the app user experience and copywriting. I pretty much had to acknowledge those are my shortcomings.

But, I was prepared for the refactoring. Mainly because I have been doing it since the beginning of the project. There is still a lot of tedious work, but a lot of it, with a simple find-all and fixing it with a couple of lines of code. It was a joy to see the whole app copywriting and user experience have some sense of consistency baked into the app.

Back and forth with the reviewers for about 3 or 4 iterations. I am too close to the deadline for the hackathon submission. That’s where I stopped further development and waited for the judging to take its place.

Results

To be honest, after the project gallery is announced. My hope slimmed down dramatically that I sort of put this aside and get back to my usual routine. Until a surprising email that got me all excited.

So glad that I gave my all. Proud to say, I am a Canva developer expert now.