Cheezy World

Delivering software with discipline and joy

Building a LiveView app using AI - Part 8

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.


Building a LiveView app using AI - Part 7

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.


Building a LiveView app using AI - Part 6

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:

Image of favicons

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.


Building a LiveView app using AI - Part 5

Follow up for the French Translations

After the last recording I started manually looking at the translatons. I quickly noticed that the authentication pages were not translated. This is why I take very small steps and verify after each one. LLMs cannot read your mind and they do not always do what you think they should. Small steps allow us to make adjustments or revert when it does the wrong thing. I asked Claude to translate the authentication pages and it did.


Building a LiveView app using AI - Part 4

Taking a Detour

I decided to change the plan a little and take care of a couple of user facing issues. Let’s see how that goes.

So we have a new plan. I will be making the site pretty (and responsive) and I will be adding internationalization including the French language support for all existing pages. Should I trust Claude to come up with my design? What should I expect out of an LLM? Let’s see the results of the first part of this revised plan.