Laravel Mentions
Playing
01. Introduction and demo

Episodes

0%
Your progress
  • Total: 1h 52m
  • Played: 0m
  • Remaining: 1h 52m
Join or sign in to track your progress

Transcript

00:00
If you need to add mentions to anywhere in your application, this course is going to show you how. So we're going to be building out an example comment form here with Livewire,
00:09
but if you are not dealing with a comment system, that's absolutely fine, this is going to work in exactly the same way. And if you're not working with Livewire, that's absolutely fine too. The core functionality of this, which is independent of the front end, works in pretty much the same way.
00:24
We are going to look at an example of showing this on the UI, but as far as submitting the data through, detecting mentions, and then going ahead and syncing them in the database and notifying users, this will work independently of the client side. So let's take a look at how this works.
00:42
So I've got two users in the application at the moment, and we're working with username mentions, which you can change this to anything at all. It could be mentioning projects, GitHub issues, anything like that. So I'm just going to start by typing, and I'm just going to hit the at symbol here. And you can see that on the client side, we've got a suggested list of users that we can
01:01
go ahead and mention. So I'm Alex, so I'm going to go ahead and mention Tabby here, and I'm going to go ahead and post this through. Now it kind of looks like nothing's happened here, but a couple of things have happened. The first thing is we've synced this up in the database, so this is now associated with this comment. So we know who has been mentioned in what comment,
01:21
or which discussion, or project, whatever you're dealing with. The other thing that's happened here is we have gone ahead and notified the user. Now in our case, we're just working with email, but you could push this to the database, you could push it to SMS, Slack, anything that Laravel Notification supports. But you can see here, you were mentioned in a comment
01:42
by Alex. I can click on that, and then that goes down to the comment that we actually posted. And if there were more comments here, it would push this down to the bottom. So the other thing that we're doing is using Markdown to not only link through to a user's profile like this, but we're also in the back-end checking if this user exists or not before we make
02:06
this a Markdown link. So if, for example, Tabby deleted their account, this would become unclickable. So we're covering as much as possible here to give you a really well-rounded system of mentions. We'll be running tests alongside this as well, so we can ensure that these things are actually getting synced up properly in the database. And really importantly, making sure
02:27
that we're not sending too many notifications every time we say edit a comment. So if I go ahead and edit this, and I, you know, add some more text in here, it doesn't really matter what we want to do, and hit edit, that is not then going to go ahead and re-notify that user, even though they're still mentioned inside of the comment. Okay, let's go ahead and start to
02:48
build this out from scratch. We'll build this comment system up just so we've got an idea of how everything is working, and of course you can skip that if you just want to go through the core functionality and get this built into your own application. But let's get started and we'll end up with all of this ready to go and use in your own projects.

Episode summary

Welcome to the course! In this introductory episode, we talk about how to add a mentions feature (like @username) to your app. We kick things off by showing a demo where you can mention users in a comment form, and see how the system recognizes mentions, stores them in the database, and notifies users automatically.

Don't worry if your use case isn't a comment system, or if you're not using Livewire—the core concepts you're about to learn can be applied anywhere mentions are needed, and the core logic isn't locked to any specific front-end. The episode also covers how to keep things flexible, like mentioning projects or GitHub issues instead of just users.

You'll see how we detect mentions from user input, auto-complete usernames, and send notifications (which could be via email, Slack, SMS, or anything Laravel notifications support). We also make sure that mentions aren't broken (say, if the user is deleted) and prevent duplicate notifications if you edit a comment. Plus, we'll run tests as we go so everything is robust!

By the end of the episode, you'll have a clear understanding of what we're building and how you can make it fit your own needs. Ready? Let's get started building this mentions system from scratch.

Episode discussion

No comments, yet. Be the first!