TL;DR: Claude.ai helped me write a productivity app that won’t drive you crazy!

I’ve always had to manage a ton of things at the same time. I have tried many “productivity workflows” to squeeze every second out of the day, for over 20 years. And you know what? It’s not worth it. Seconds, minutes, hours, days are not for productivity: they’re for living. Will I make a million dollars soon? Not with that attitude.

For the last several years, I’ve only organized my days around planning for three big things and three small things and it’s served me very well. I thought you all might be interested in giving it a try, so I built a little app around the idea. It’s all Web-based and processed on your own device—no logins, no tracking, no strings attached. I wouldn’t use it for sensitive personal data! But for everyday stuff, it’s good enough!

The heart of it all

I had a clear concept right off the bat for this project! The core user experience — typing in and crossing off three big tasks and three small tasks — is simple. But simple doesn’t mean unpolished! I wanted it to feel great to use with as little friction as possible: I played around with user experience scenarios and sketched that out the core flow of the app:

1. Open page
2. Input up to three big tasks and three small tasks
3. Cross off completed tasks
4. Repeat

How you want things to happen is one thing but when it comes to programming, you also have to worry about the how! I can approach a programming challenge in Python pretty alright but I wanted the app to run in browser using HTML, CSS and JavaScript. There was only one problem!

I haven’t touched that Web stack seriously in years. So I turned to Claude.ai to help bring it to life, make our core loop happen!

Building with an LLM

It’s not my first time building software in partnership with a Large Language Model partner: I knew what to expect from my coding assistant, the good and the bad! My biggest challenges working with LLM partners are context windows and hallucinations. Free-tier commercial LLMs can only keep track of so much information at once before they start losing it. Here’s how I worked around that:

1. Have clear constraints for your project and repeat them often. Every once in a while Claude would forget we were developing something in HTML/CSS/JavaScript. If this had been a Python project, I would have specified the libraries I wanted to use and whether I use the Don’t Repeat Yourself approach.
2. Develop specific features incrementally not broad, sweeping changes. It’s good practice anyway, but new programmers using LLMs might not know to do that. That’s where having defined a clear flow and clear constraints comes in handy! It helps keep your LLM partner on track by focusing its attention on a very small context window, and reinforcing the way these features interact together and with the user. When a feature works, save your program at that stage so you can roll back to it if needed!
3. Don’t reinvent the wheel! There is a world of libraries, fonts and APIs to use out there and if they are popular enough, there is a good chance your LLM has been exposed to it in its training data.

It wasn’t too long before I had a working prototype. It was missing a lot of things – tasks would disappear on page refresh and they were stuck on that one device unless you wanted to type them up, but it was a good start. Now that that was done, it was time to work on making things look good!

That 8-Bit Vibe

My family didn’t have a lot of money, growing up. For a long time, frugality and hand-me-downs were our thing. Even then, one day our parents broke the bank and got my brother and I a Nintendo Game Boy. Each! With Tetris! If you opened our skulls to look at our brains, would you find tetraminos, Kirbys, Mario? To this day, I’m still in love with the Game Boy’s 8-bit aesthetic. So, maybe?

Anyway, I wanted the app to feel like a Game Boy checklist, obviously. I boiled down the color palette to a few options and landed on the grey-tinted one: I really wanted that green LCD palette at first, but it just didn’t look great on larger displays. I’m sure there’s a balance in there somewhere and I’ll try to find it later!

Then, on with the interface: big blocks and pixel-fonts are a must, but let’s not forget text! The font I’ll be using is “Press Start 2P” by Cody Boisclair, loaded directly from Google’s Web fonts repository on first load. The app will always look just right even if your system doesn’t have the right font built-in, and the font will update automatically if there’s any changes to it!

More features? More features!

Once I had looks and basic features locked down, it was time to add even more essential features! On the functional side, more or less in order of difficulty:

• Deleting tasks before they’re completed
• Checking off a task when completed
• Focusing the cursor in the new task text field when we create a new task
• Retaining tasks locally when closing, reopening or refreshing the Web page
• Generating QR codes and links to exchange tasks
• Being able to import tasks from one device to another securely

Just like we used an existing font for the interface, I used a common QR code library from the Cloudflare distribution network to generate QR codes on the fly, and on device. Why? Because then I could just store the tasks and their status in a JSON object, and encode that object in the QR code! It’s not a lot of characters, so it worked out. Everything stays on your device to the best of my knowledge, unless you’re interacting with the Web app page – and that’s over an HTTPS connection. It should be secure enough for everyday stuff, but you should not use the app for anything sensitive or proprietary.

On the esthetics side, it’s all subtle but fun stuff! In no particular order of difficulty:

• Hovering over the text boxes triggers a scaling effect
• Typing text for a task tweaks the opacity to focus on the task input
• The checkboxes for task completion use a Mario-like star
• Completing all tasks in a category triggers a congratulations message
• Completed tasks fade away and slide out of sight

I want to keep playing with the 8-bit vibe of it all, maybe with a static or animated background later. In the meantime, if you want more 8-bit goodness you will have to squint and look at your screen funny!

Try It Out

I’ve been using the app and passing it around for a few weeks now, and friends and online contacts have give me great feedback and reviews on it. If you want to simplify your daily planning without getting sucked into the productivity-industrial complex, give the 8-Bit To Do a shot at https://8bittodo.thirtythreedown.com/! It’s free, light, no ads, and built for humans. Use it, share it with friends, let me know what you think – or throw some money my way! All are great ways to support me 🙂