Topaz

In the summer of 2023, I needed a side project to work on.

I've always liked Trello, but it felt like it had 80% of the features I wanted. Then later, I was introduced to Favro, which is what I always wanted out of Trello, but it had like 200% of the features I wanted. Hotwire was still new on the Rails scene so I figured this seemed like a good project to practice on.

Before I get too deep, let's define a few words that I'll use when talking about Topaz.

A Project is a collection of Boards. When you look at a page in Topaz, you are seeing the entire project loaded on that page.

A Board is a collection of Lists.

A List is a collection of Cards. A List can be in only one Board.

A Card represents a 'unit of work', or a todo, or anything really that we want to track. A Card can be in a List at most once, and it can be reordered within that List. A Card can only be in a Board once across all of the Boards Lists - it can't be both in "Development" and in "Done" at the same time, for instance.

The main thing I find missing with Trello is that you can only see one board on the page at once. In Favro, boards are stacked vertically on top of each other and you're able to collapse them so you don't need to see the details if you don't want. By introducing multiple boards, there are new inherent complexities that arise when you drag a card into a different board. A few examples:

  1. When you drag a card from one board to another, do you remove it from the source or do you duplicate the card and have it listed in both boards (within the respective list)?
  2. If you drag a card from one board to a list in another board and a duplicate of the card is already in yet another list within the destination board, do you duplicate it, move the existing card, or do nothing since it was already there?
  3. Another feature Favro has is the ability to "hide" cards. A hidden card is still in the list where it was hidden, but it's no longer shown. So what happens if you drag a card from Board A to List C in Board B, and List C has a hidden duplicate of the dragged card already?
  4. And then to combine the last two points, what happens if you drag a card from Board A to List C that is in Board B, and Board B has another list (List D) with a hidden duplicate of the dragged card?

Gets pretty complex quickly, doesn't it?

Want to know how I solved those problems? 💬 Let's chat! 💬

In the meantime, here's a brief tour of the application.

Here we see all the boards for this project, collapsed. We have the next few Releases planned on their respective board, the Kanban board which will be used for the day-to-day, and a Timeline board which is where cards will end up once they are completed.
Topaz screenshot
A look at the opened Release 1 milestone board
Topaz screenshot
And a look at the opened timeline board to see what was done, and when.
Topaz screenshot

When dragging a card into a list, but the card already exists in a list within the same board, we should move the card that's in the other list so as to avoid duplicating a card.

Notice the light gray subtext on the Card. It lists out other Boards and Lists so you can see at a glance where else this card is. I never got around to it, but I'd have liked to have color coded this.

Topaz screenshot

It's also possible to "Hide" cards or "Delete" cards.

"Hiding" cards is great for when a card is moved to the "Done" column. You no longer want to see them there (it'd get too long), but you want "Done (Kanban) to show on the card in the Release boards. The cards can moved to the Timeline board and then hidden in "Done".

"Deleting" removes the card completely from the list where the delete was initiated.

"Delete Everywhere" completely removes the card everywhere.

Topaz screenshot
And of course, changes are broadcast across browsers. Thanks TurboStreams!
Topaz screenshot