Daily Build: To-Do List App

Using Claude 2 & GPT-4

Author

Joshua Voydik
August 11, 2023

I call it Taolist.

One of my new internet friends Alejandro inspired me to build a to-do list for this newsletter, so I did!

This took me an hour (and I put in more time tinkering after the fact)…

Check it out here: https://taolist.vercel.app 

Features

  • Editable title

  • Theme changes!

  • Simplicity 🧘‍♂️ 

Building it

I started with Claude 2 from Anthropic… honestly I just wanted to see what this model would do.

Prompt

  • “Help me build a hyper-modern badass-looking to-do list for the web. Please help me write the initial code. It should be relatively simple. The UX should be this: I can type to create a new todo item and it gets created. There should be a way for me to check off the item and it goes gray with a strikethrough. Also, when I complete all of my todo items, I want confetti to pop and appear like an animation and fall down from the top of the page to the bottom. Please help me make this and use a highly stylized and beautiful approach to the UX and UI. It should be snappy and nice. Let's go!”

    • Side note, I bailed on the confetti

  • After it spit out the initial code, I moved to GPT-4

    • I copy and pasted the code that Claude 2 gave me and said the following:

      • “Can you help me add functionality that allows user to add new items to this todo list?”

So my logic was this:

  • Give me something usable with Claude, then use GPT-4 to refine it, to help me add some functionality because I know it’s better at code

After this what it gave me was pretty good, so I just:

  • Added a new file in my code folder on my desktop

  • Copy and pasted the code to the index.html file in VS Code

  • Then tested it on my local server with npx http-server

That was all fine and dandy but I wanted to add some styles! Some colors so I asked it the following:

  • “do you think we could add an element on the bottom right that has like 5 circles in it. Each circle is a color. When you click on that circle it changes the background of the page. And if it's a brighter color, the font would change to something else and vice versa. What do you think? Typical colors people would choose for an app like this?”

It did a shockingly good job and so I implemented that.

After that I added the little footer that links back to my Twitter and Daily Build newsletter.

I then asked GPT to have the title editable and it gave me very fast code to do this…

Because normally my to-do list is a Google Doc with bullets and the title is whatever that day is so I wanted to make it editable.

Other stuff: I was too lazy to get the confetti working so I bailed on it. This was going to be a feature where a confetti animation sprayed confetti (like what Vercel does when you launch a new project). Who knows, maybe I’ll add it later.

Random thought: I continue to be blown away by what I can build with these tools, it’s wild.

Summary

  • Built this in an hour

  • Used Claude 2 and ChatGPT

  • Hosted it with Vercel

This took more time than anticipated but that’s okay! Because now I have a new to-do app.

I need to add a couple other features like making it mobile friendly (so that will require a refactor). As well as making the to-do items themselves editable.

I am happy with this, and I am happy with these AI tools! The more you use them, the better you get at knowing how to prompt them.

Ah, and here’s the source code.

Would you be interested in me livestreaming or recording these builds? LMK!

Know someone who likes to-do lists?

Send them this newsletter:

Reply

or to participate.