Introduction and demo: Build a Forum with Inertia and Laravel

Build a Forum with Inertia and Laravel

Sign in Get started

Playing

01. Introduction and demo

Episodes

0%

Your progress

Total: 6h 54m
Played: 0m
Remaining: 6h 54m

Join or sign in to track your progress

01. Introduction and demo

02. Getting set up

03. Modifying registration for usernames

04. Figuring out the forum layout

05. Creating and listing topics

06. Basic discussion listing

07. Pinning discussions

08. Tackling pagination in Inertia

09. Customising pagination text in Laravel

10. Showing a discussion

11. Setting up discussion posts

12. Listing through discussion posts

13. Adding more data to posts

14. Adding pagination to posts

15. Adding a post preview to discussions

16. Adding the last reply to discussions

17. Outputting discussion participants

18. Limiting participants in the UI

19. Ordering discussions by last post

20. Handling deleted users

21. Counting replies

22. Building our first filter

23. Highlighting current filters, and merging with pagination

24. Adding auth specific filters

25. Adding the topic filter

26. Scaffolding the new discussion form

27. Toggling the create discussion form

28. Keeping form state

29. Storing a new discussion

30. Discussion validation and authorization

31. Generating markdown for posts

32. Toggling the markdown preview

33. Fetching and displaying markdown

34. Adding a markdown shortcut toolbar

35. Dealing with SVG icons

36. Creating the reply form

37. Basic Inertia permission checking

38. Creating replies to discussions

39. Jumping to posts

40. Automatically scrolling to posts

41. Toggling post editing

42. Editing posts

43. Deleting posts

44. Deleting discussions

45. Setting up for best answers

46. Toggling the best discussion answer

47. Solved and unsolved filters

48. Indexing discussions for search

49. Searching discussions

50. Debouncing search

51. Adding mentionable functionality to forms

52. Indexing users for mentioning

53. Hooking up users for mentions

54. Detecting and storing mentioned users

55. Adding the mentioned filter

56. Adding mentions to the markdown toolbar

57. Adding mentions to the reply form

58. Fixing up some unauthenticated state

59. Fixing up post scrolling

60. Reviewing SSR (Server-side rendering)

61. Preventing parent posts from being deleted

62. Improving solution marking

Transcript

00:00

So welcome to this course on building a forum with Inertia with Laravel on the back end and Vue on the front end.

00:06

In this episode, I'm going to guide you through all of the features that we're going to be building. And let's jump in and take a look. So as you can see here, I am not logged in at the moment. We've got no discussions and you can just see a few filters on the left hand side here.

00:20

I'm going to go ahead and log in with an account that I've already created here. And you can see that a couple of things have changed. We've got a button just up here now that we can use to start a discussion. And we've got some more filters here as well.

00:31

So topics or discussions that we're participating in and things that we've been mentioned in. So we're going to be building the ability to mention users by their username. We can modify our username as well over in our profile section. So we can change that here as well.

00:46

And that will be on the registration process as well. So let's go ahead and create out a discussion here. You can see we get this pop up just down here. The reason that we're doing it like this is if we wanted to navigate between different pages to reference other things while we're creating a discussion,

01:02

this will actually persist on the page. It means that we can click through topics to find out more information, perhaps copy and paste stuff into here. And this state will hang around for as long as the page isn't refreshed. So let's go ahead and just give this a discussion title.

01:17

We'll just say need help. And we'll just say, hey, I need some help with this code. And let's go ahead and use Markdown here to just write out some JavaScript code. You can see down here as well. We have some Markdown shortcut buttons.

01:33

What we can do with that is highlight things and click just to convert this to Markdown. Or you can just click these on their own and then just start writing things within here. And there are a ton more that you can implement here. We're going to be using a package for this, which has loads of other options.

01:47

So you can add more once you're done with the course. So I'm just going to grab some JavaScript code here just to kind of test this out. We'll just go ahead and paste all of this into here. And I think that should be it. Now, we can also mention users.

02:00

So let's go ahead and just mention another user in here. As soon as we start typing here, you can see that we get this list of users come up and you can just go ahead and mention a user in there. And that will then appear in their mention list. And you can even trigger this to send an email to them to let them know that they've been mentioned.

02:17

So I'll go ahead and just, yeah, we'll keep that because we'll switch over to Maple's account in a minute and see that they're being mentioned. Let's go ahead and choose a topic first. I've only included two here, but of course you can add more. And let's go ahead and switch that to inertia. And we also have this Markdown preview. So we can click this, which basically just toggles between these two views.

02:36

And that's you basically just preview Markdown here. So we'll go ahead and start this discussion. We're put straight over to the discussion that we've just created. This user will have been tagged in this or mentioned in this in the back end. And you can see we've got this code highlighted nicely here as well.

02:54

So there's a couple of things that we can do from here. Of course, we can reply. We can reply from here or we can reply from here. And if we do reply from here, that will add the original author of that post. So it's just a little bit of a convenient way to notify them that you've replied to a specific post.

03:12

We can, of course, edit these posts as well. Cancel this off. It works pretty much as you expect a forum to work. So I'm going to hop over to Mabel's account, which obviously now we see this new discussion that's just appeared here. No replies. And you can see that the last reply of the last post was by me.

03:28

So I can jump in here and just reply. And you can see that we can't obviously edit this because it's not ours. So I'm just going to go ahead and say, here's the solution. I think that will do for now. Let's hit reply on this. And there we go. Now, you also notice that that jumped down to the post after we had posted it.

03:48

This is actually fairly difficult to do because we're implementing pagination as part of this course. What's going to happen is if we are on, say, page three and or page one, and we post a topic and that goes over to page two in the back end, we're going to need to calculate which page we need to push the user over to.

04:08

And then, of course, we also need to work on this scroll functionality as well. So that looks pretty simple. There are some pretty advanced things in here that we can use to calculate all that stuff. We're going to try and keep this clean as possible. So it works really nicely. What that also means is you can reference any post on any discussion from anywhere in your app,

04:27

and it will always go to the correct page and it will always scroll down to the position of that post. So, of course, we're going to cover that in the course. OK, so I'm just going to reply again here, just say, hey, and we'll just look at the deletion functionality. It's pretty simple. It just gives you a little window up here to set this and that just gets deleted.

04:46

You can also delete topics as well. So we'll be including that. And as part of all of these actions that we can see here, we're going to be implementing, of course, authorization to make sure that the user can do these things. We're also going to be passing that through to the client side using view or to view.

05:03

So we can actually show these buttons based on the authorizations that we've set inside of Laravel. So that would be a really good lesson on how to authorize within an inertia app as well. So we can mark the best answer here. We can mark our answer as the best answer as well on purpose, because we may edit this to add in a solution. So we can click to mark the best answer.

05:26

And that's going to go ahead and just add this round it. And that will now be solved. So with that done, these filters now become a little bit more useful. So unsolved topics, we don't have any at the moment. Solved topics we do. So we can filter by whether something has been solved.

05:40

We've got a filter for whether or not things don't have any replies. So if we just say, hey, and just create a new topic in here really quickly or a new discussion, and we see no replies, that now appears. Unsolved, that now appears as well. We've also got a my discussions list. So the discussions that we've created.

05:59

Now, this is participating, which means things that we haven't created, but we have replied to. So on Mabel's account, we know that she has participated in this need help topic. So of course, filters are going to be different for everyone. We also have mentioned as well, which I haven't been mentioned in anything just yet.

06:16

However, Mabel has been mentioned in this need help discussion. So it means you can see which discussions you are being mentioned in as well. So aside from that, we also have, of course, the ability to search. So let's search for help and that appears.

06:30

We can also choose by topic as well. So we can filter this down by the topics that we want to see. And generally, there's a whole lot more we're going to cover here behind the scenes. On the face of this, it looks pretty simple. But actually, when we start to dive down into this, there's a huge amount to learn from building a forum.

06:47

And a lot of this knowledge you can take over to other projects. And it's a great thing to build to have all of this stuff in your toolkit. So now we've seen how this works. Let's hop over to the next episode, do a little bit of setup and then start building this out.

Episode summary

Welcome to the course! In this first episode, we kick things off by introducing what you'll learn and demoing the forum app that we'll build together. The stack we're using is Laravel for the backend and Vue (with Inertia.js) on the frontend.

I walk you through the main features of the forum, starting with how it looks for a logged-out user, and then logging in to see the changes. You get to see the discussion creation process, including Markdown support (and its handy shortcut buttons), how to mention users with @username, and how you can edit your username from your profile. We'll also see how persistent the discussion form is even while you browse around the app.

There's a demo of replying to discussions, editing and deleting posts, and how pagination and scrolling work, even in tricky cases. We cover the ability to mark answers as the "best answer" (marking topics as solved), and using various filters: unsolved, solved, no replies, your own discussions, those you participate in, and where you've been mentioned. There's also search and topic filtering.

Throughout, I highlight some of the advanced but hidden logic we'll cover—like keeping track of post positions with pagination, making sure only authorized users see the right actions, and how those state changes are handled on both the backend and frontend. We wrap up by talking about why building forums is such a great learning experience, and tease what we'll do next. In the next episode, we'll get our app set up and start building!

Episode discussion

No comments, yet. Be the first!