Day 12 - Implementing Document Tagging with Custom Labels
Nader Fkih Hassen

Nader Fkih Hassen @nader_fh

About: Newly graduated computer science student exploring full-stack development. Interested in clean design, practical solutions, and growing one step at a time.

Joined:
Jun 12, 2025

Day 12 - Implementing Document Tagging with Custom Labels

Publish Date: Jun 27
0 0

I worked on adding tagging functionality to documents inside each case in the Lura Lawyer Management System. Tags are essential for legal teams who often manage hundreds of documents per case and need quick ways to categorize, filter, and find relevant files.

🏷️ Why Tagging Matters
In traditional legal systems, documents are usually stored with vague folder structures or naming conventions. That quickly becomes overwhelming. By allowing users to assign custom tags to each document, we add a powerful, flexible layer of metadata to improve organization and retrieval.

🧩 Goals of Today’s Feature:

  • Allow users to create and assign custom tags
  • Display assigned tags under each document
  • Support filtering documents by tag
  • Ensure tags are scoped to the workspace (no cross-contamination between teams)
  • Prevent tag duplication

⚙️ How I Built It
📦 Backend (NestJS + Prisma)
I created a new Tag model and added a many-to-many relationship between tags and documents.

prisma
model Tag {
  id        String   @id @default(uuid())
  name      String
  workspaceId String
  documents Document[] @relation("DocumentTags")
}

model Document {
  id        String   @id @default(uuid())
  title     String
  tags      Tag[]    @relation("DocumentTags")
}
Enter fullscreen mode Exit fullscreen mode

Using Prisma’s relations, I connected tags with documents and ensured each tag belongs to a workspace.

Then I built endpoints to:

  • Create a new tag (POST /tags)
  • Assign tags to documents (POST /documents/:id/tags)
  • Filter documents by tag (GET /documents?tag=...)

💻 Frontend (Next.js + TailwindCSS)
I built a Tag Selector UI using a Select dropdown with the option to create new tags inline. Each document now shows colored tag badges below the filename, and the filter panel includes a tag-based filter.

tsx
{document.tags.map(tag => (
  <span className="badge">{tag.name}</span>
))}
Enter fullscreen mode Exit fullscreen mode

For filters, I used query parameters to dynamically fetch documents by selected tag.

🔒 Permissions

  • Only users with write access to a case can assign or remove tags.
  • Tag creation is open to all workspace members, but duplicates are prevented by slugging names and checking for existing ones.

✅ Key Takeaways

  • Tagging systems add structure without enforcing hierarchy, making them ideal for flexible workflows.
  • Prisma made it straightforward to build many-to-many relationships with custom logic.
  • A clean, responsive UI makes or breaks this feature — tags must feel instant and intuitive.

❓Question
How do you design tagging systems in your apps — and do you allow freeform or controlled vocabularies?

Comments 0 total

    Add comment