Screenshot of @ mentions in action

@-mention system for project discussions

In this fullstack project, I implemented a full @-mention feature within a PHP-based CMS discussion system. The project spanned database design, back-end models/controllers, front-end UX, and notification workflows.

AI tools in Cursor were used to speed up development and refactoring.

Goals

Enable users to mention project collaborators in discussion messages using @username, with:

  • Real-time autocomplete
  • Back-end validation
  • Persistent mention tracking
  • Email notifications
  • Clickable, formatted mentions in the UI

Architecture and Design Decisions

Data Model

Created a dedicated relational table—cmsanl_project_discussion_mention— instead of embedding mentions in JSON or message text.

Back-end Implementation (PHP)

Introduced a new Discussion_Mention model responsible for creating mention records and tracking notification state. Extended the discussion model to parse mentions from text, validate collaborators, and more. Updated the controller to extract and process mentions.

Front-end Implementation (JS/CSS)

Integrated Tribute.js for @ autocomplete in message textareas. Added key event handlers.

Challenges & Solutions

This project helped me understand a much larger potion of the CMS codebase than I had before, between creating a new data model, updating an existing model, working with the controller, and integrating Tribute.js into the front end. In previous projects, using an AI agent was not always reliable, but I had success in this project by spending most of my time with the agent in Plan mode before implementing changes in the codebase. Working through all the details of implementation in the MD file before building helped both me and the agent (I would think) see the larger-scope effects of changes I was asking to it make. Using the AI agent was a good way of learning about unfamiliar ares of the codebase and thinking through development decisions.