{"id":1463,"date":"2026-08-18T14:14:42","date_gmt":"2026-08-18T12:14:42","guid":{"rendered":"https:\/\/www.bandidor.info\/wp\/?p=1463"},"modified":"2026-08-18T14:14:45","modified_gmt":"2026-08-18T12:14:45","slug":"how-i-built-get-craftly-a-kanban-app-with-ai","status":"publish","type":"post","link":"https:\/\/www.bandidor.info\/wp\/?p=1463","title":{"rendered":"How I Built Get Craftly: a Kanban App with AI"},"content":{"rendered":"\n

Recap<\/h2>\n\n\n\n

Get Craftly started as a side project for my other side projects. I wanted a board where every project could have its own lane, with cards moving through Planned<\/em>, WIP<\/em>, and Done<\/em>. At the same time, I wanted to run an experiment: how far could I get without manually writing the application code and without already knowing React or Tailwind CSS?<\/p>\n\n\n\n

The answer turned out to be considerably further than I expected. What began as a screenshot and a conversation with an AI assistant is now a Firebase-hosted application with authentication, persistent boards, an admin dashboard, automated tests, and more than one hundred commits.<\/p>\n\n\n\n

The initial idea<\/h2>\n\n\n\n

The starting point was the mockup below. It already contained the central idea: a horizontally scrolling board made from project lanes, three workflow rows inside every lane, and task cards carrying useful details such as priority, tags, and dates.<\/p>\n\n\n\n

\"Original
The original mockup that started the project.<\/figcaption><\/figure>\n\n\n\n

My initial requirement was intentionally visual and practical. Cards had to move between lanes and rows, drop targets had to react while dragging, completed work had to remain recognisable, and the layout had to survive a board wider than the screen.<\/p>\n\n\n\n

First implementation<\/h2>\n\n\n\n

I began with Claude’s free web interface. There was no IDE integration and no coding plug-in. I described the interface, supplied the mockup, copied the result into the project, and reported the next problem. Tailwind CSS 4 had changed enough to create some confusion during setup, so Gemini provided a little help there.<\/p>\n\n\n\n

The first version was a React application created with Vite and styled with Tailwind CSS. It proved that the board itself worked: lanes could be displayed side by side, cards could be dragged, and the interface could keep the original three-row structure.<\/p>\n\n\n\n

That first success was also the start of the real work. A board that merely looks correct is not yet useful. Titles needed in-place editing; lanes and cards needed to be created and removed; cards needed tags, colours, priority flags, dates, and completion behaviour. Each improvement exposed another small edge case.<\/p>\n\n\n\n

Making the board useful<\/h2>\n\n\n\n

The current interface is still recognisably based on the original mockup, but it has grown into the board I now use for real projects.<\/p>\n\n\n\n

\"Current
Get Craftly 1.3.0 in use. The account address has been blurred for privacy.<\/figcaption><\/figure>\n\n\n\n

Every lane represents a project or area of work. Inside it, cards move between Planned<\/em>, WIP<\/em>, and Done<\/em>. A card can have a due date, a priority flag, one or more coloured tags, and a completion state. Titles are edited directly on the board instead of through a separate form.<\/p>\n\n\n\n