Challenge Canvas

Challenge Canvas is a simple, local progress tracker that lets you visually map your daily achievements as colourful post-it notes on a virtual board. Each note represents a “challenge day” and can include short text and an emoji. You can highlight important days, drag notes around, randomise their positions, and even export your board as a PNG.

Why I Built This

I created Challenge Canvas as a personal reminder that showing up consistently matters more than perfection. In the past, I used to post my progress on Twitter for others to see, but now I wanted a private, local tool to track my journey without external pressure.

This project is part of my “£100k before uni” challenge, where I’m documenting my efforts to reach £100,000 before starting university. The main purpose of the board is to help me stay motivated and organised, while also giving a snapshot of my day-to-day progress.

You can follow along and read more about my journey in my newsletter

How I Built it

I used Vanilla JS and CSS for the UI of the extension.

What I struggled with and what I learnt

I usually use React.js, so going back to Vanilla JS was hard, but it was worth it because using React in a chrome extension seemed like it would be a pain. It was the same with Vanilla CSS, I usually use Tailwind, but it was nice going back to basics.

Features

• Create multiple challenges, each with its own colour and start date
• Add daily notes with short summaries and emojis
• Highlight important notes with a double-click
• Drag notes anywhere on the board
• Randomise note positions for fun layouts
• Export your board as a high-resolution PNG
• Reset all progress to start fresh

Setup

I haven't published this as a chrome extension, but using it locally is very easy and only a few steps.

1. Download

Click the green "Code" button and select "Download ZIP". Make sure to extract the download in a safe spot!

2. Turn on developer mode

In your browser head to the "Extensions" section. This can be found in the settings portion of your browser! Check out the screenshot below:

Once you get there you'll see "Developer mode" in the top right. Make sure to toggle that on and then you'll see new options (we're gonna be using "Load unpacked")

3. Add the app to your browser

Last step! Press the "Load unpacked" option and then go to the folder where you saved Challenge Canvas. It should look something like this:

Once you select it you should see this (nice you did it!)

Now when you open the Challenge Canvas extension, you should see this:

Thanks for checking this out!