Cheezy World

Adding Drag and Drop

We asked Claude to finish phase six which was adding drag and drop functionality to the board. Claude did this quickly but when I tested it I found that it was more complex that expected. Claude got a few things wrong. First of all let’s watch the video of phase six.

Always test everything

At the end of the video it seems like everything was okay. One might be tempted to commit the code and move on. I think a very important step is to test everything that AI creates. Occasionally AI will make a mistake and it is important to catch it right away while it still has the entire context available.

Doing a little cleanup

This post is a cleanup post. After Part 8 I spent some time testing all aspects of the application and decided to make a few small changes beofre moving to the next phase. I noticed that flash messages (the message that shows in the upper right corner) stays there until I dismiss it. I think it becomes anoying to have to do that repeatedly when adding multiple tasks so I decide to make it automatically fade away after 5 seconds. I could ask Claude to do this but thought it was a very easy task so I set about to do it myself. Here is what I came up with.

Adding tasks

Before getting started adding tasks to our Kanban Board I decided to do a little maintenance. A couple of the dependencies had updates so I decided to go ahead and update the project. Also, the latest version of Elixir finally reached 1.19.2. To me that signals that the 1.19 versions are stable enough to update so I did. I’ll have a separate blog post of what I had to do to update the application as well as update my deployment scripts and Dockerfile.

WIP Limits

Before we start building out the columns I asked Claude to update the plan in order to add WIP limits. I was suprised by the number of changes that were required. You can see the details here in the first video of this post.

Adding the columns

Now on to adding columns to our Kanban application. In the first video we ask Claude to finish all of the non-UI work which includes adding a column table to the database, create the relationship to board, create the schema to hold the data from the database, create the context to perform the basic CRUD functions, and finally create the tests for all of this.

Just a small thing

Off screen I asked Claude to create the favicon based on the image it has already placed on the home page. In less than a minute I had these files:

Claude also added this html in the header of the root.html.eex file:

<link rel="icon" type="image/x-icon" href={~p"/images/favicon.ico"} />
<link rel="icon" type="image/png" sizes="16x16" href={~p"/images/favicon-16x16.png"} />
<link rel="icon" type="image/png" sizes="32x32" href={~p"/images/favicon-32x32.png"} />
<link rel="icon" type="image/png" sizes="48x48" href={~p"/images/favicon-48x48.png"} />
<link rel="icon" type="image/svg+xml" href={~p"/images/favicon.svg"} />

This is a small change but it adds to the polish of the app.