Playing
01. Introduction and demo

Transcript

00:00
So I'm sure you've seen a comment system before, but let's take a look at exactly what we're covering in this course. Now, the first thing to say is that we're currently on this article page here, and we have the ability to comment on an article.
00:15
Now, what we're going to be doing here is setting this up so we can attach comments to any model type. So we're going to use an article as an example, but then you can pretty much just take this entire comments component, drop it into anywhere and
00:30
have this work for any type of model. For example, you might have articles or you might have courses that also need to have comments enabled for. So we can see this in the code.
00:40
If we just open this up, this is all we need to drop in here. And as you can see that we just pass in the model. And of course there are a couple of things that we need to attach to each of the models that need comments, but we can very, very easily add that in.
00:55
Okay. Let's go ahead and just post a comment in here and see what happens. And yeah, sure enough, you can see that this comment has been posted. We don't have avatars right now, and this date's a little bit funny, but we're
01:05
going to be sorting that throughout the course. Okay. So let's go ahead and edit this. So very, very simple.
01:11
We switched to a text area again. I'm going to hit edit and yeah, sure enough, that gets edited. We can also delete this and we have a very basic confirmation here. And let's go ahead and reply.
01:21
So we have nested replies here. These are capped at one level deep, but you can go ahead and adjust this if you need to. So let's just go ahead and post in hello here.
01:30
And yeah, there we go. Sure enough, we get this and we can do exactly the same thing for any of the nested replies that we own. Now, of course, if someone else comments here, we won't get the
01:40
ability to edit or delete this. So we'll be attaching permissions to this to guard against people editing or deleting other people's comments. So very, very simple system.
01:51
The beauty of this is, like I said, you can just drop it anywhere that you need and it will just work. And then you can go ahead and expand on any of the features that you need in this comment system.

Episode summary

In this intro episode, we kick things off by taking a look at the full-featured comment system we'll be building together. You'll see how comments can be attached to any model—whether that's an article, a course, or anything else in your app. The idea is to make a reusable component: drop it in anywhere, pass in your model, and it's ready to go.

We walk through posting a comment, editing it, deleting, and replying (including nested replies, which are capped at one level to keep things simple but can be adjusted later). Although the demo's a bit rough right now (no fancy avatars and the date formatting needs some love), we talk about how these details will be cleaned up as we go through the course.

Permissions are covered too—you'll only be able to edit or delete your own comments, and we'll see how to handle that properly. So by the end of the series, you'll have a comment system that's super easy to integrate and extend for just about any use case.

Episode discussion

No comments, yet. Be the first!