Projects vs Tags: Adding Site Organization

Last weekend, I improved Browser Atlas by removing the concept of projects for organizing sites and instead using tags. From the start, this project was built for me to solve my own problem: how to store a lot of links to internal and external resources in an actionable way.

For the first iteration of the app, which focused on building a solution I would be happy using myself, I added projects as a way to group links. Projects felt familiar and would fulfill my requirement of splitting work and personal links from one large group. My target from the start of this project has been to implement the simplest version of a solution and build on it if the limitations prevent a smooth user experience.

The difference between projects and tags is that a site can only be attached to a single project, while it can have multiple tags. Having a single project would be easier to build but would result in links fitting partially in multiple projects, with no best option for organization. I want to reduce the organizational fatigue of Browser Atlas, making it easy to add links.

Experimenting with Projects

As I anticipated, adding projects was quick, and I was able to start sorting my tasks. I used projects for about a week before noticing that I needed a more flexible solution to group work links into smaller buckets while also having a large bucket over all of them. I started having to many small projects with no way to view a larger picture. This proof of concept helped me realize that moving to tags is a better option to resolve the constraints.

Moving to Tags

With projects being too limited I started working on tags starting at the most basic implementation.

{
  name: v.string(),
  description: v.optional(v.string()),
  user: v.id("users"),
}

The user experience of adding tags was a major concern. It was also the reason for not building tags originally, as the complexity was higher than I wanted for a proof of concept. Most component libraries, including Scadcn, don't include a tag input component. After doing some research, I decided to use the combobox component from Mantine. It provided flexibility while being simple to integrate and consistent with the components from the UI library. The library also contains well-designed solutions to common problems like forms, hooks, and extensions.