This episode is for members only

Level up with a premium membership

Full access to hundreds of courses

Download episodes to watch offline

Access to source code

Already a member? Sign in to continue

Playing

89. Adding a replying to indicator

88 episodes•10 hrs 57 mins•4 years ago

Course overview

Let's recreate Twitter with Laravel! Completely from scratch, we'll use Laravel and Vue to build out a Twitter Clone with as many features as we can. Includes a timeline, notifications, media uploads, hashtags, mentions, granular search and much more. To top it off, everything is updated in true realtime.

Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

Comments

No coments, yet. Be the first to leave a comment.

Episodes

0%

Your progress

Total: 10 hrs 57 mins
Played: 0 mins
Remaining: 10 hrs 57 mins

Join or sign in to track your progress

02. Introduction and demo

03. Setting up Laravel

04. Authentication with Sanctum (formerly Airlock)

05. Follower relationship

06. Getting tweets from who we’re following

07. Getting started on the timeline

08. Swapping out Bootstrap for Tailwind

09. Styling the base template

10. Rendering tweets on the timeline

11. Let’s use Vuex

12. Infinite scroll to load more timeline items

13. Styling the compose tweet form

14. Posting a simple tweet

15. Setting up for realtime

16. Updating the timeline with tweets in realtime

17. Filtering tweets that are already visible

18. Monitoring with Laravel Telescope

19. Defining tweet types

20. Retweet structure

21. Rendering dynamic components for tweet types

22. Showing quoted tweets

23. Automatically adjusting the textarea height

24. Designing tweets actions

25. Setting up for likes

26. Showing the like count on tweets

27. A performant way to show liked tweets

28. Liking tweets

29. Updating tweet likes in realtime

30. Updating our own likes in realtime

31. Updating like counts on retweets and quotes

32. Retweet dropdown menu

33. Showing retweet counts

34. Using the same performant pattern to show if we've retweeted

35. Retweeting and unretweeting tweets

36. Updating retweets on the timeline in realtime

37. Realtime updates for unretweeting

38. Designing the tweet limit indicator

39. Hooking up the tweet limit indicator

40. Adding !important CSS variants to Tailwind

41. Selecting media to attach to tweets

42. Filtering allowed media

43. Displaying selected media

44. Removing selected media

45. Installing the MediaLibrary package

46. Uploading media

47. Returning a list of media IDs

48. Preparing media to be uploaded

49. Attaching media to tweets

50. Displaying images in tweets

51. Displaying video in tweets

52. Showing a progress bar for uploads

53. Reverting upload progress

54. Checking database media queries with Telescope

55. Getting modals working

56. Quote tweet modal

57. Refactoring tweet composing to a mixin

58. Storing a quoted retweet

59. Setting up tweet replies

60. Reply modal

61. Storing a reply

62. Updating tweet replies in realtime

63. Notifications setup

64. Tweet like notification

65. Using a custom database channel for notifications

66. Notification endpoint

67. Listing notifications

68. Dynamic notification types

69. Tweet reply notification type

70. Making our notifications act like our timeline

71. Updating notification tweets in realtime

72. Tweaking performance for notification tweet loading

73. Setting up entities (hashtags, mentions, etc)

74. Extracting entities with regular expressions

75. Storing entities from tweets

76. Extracting mentions

77. Storing entity types as constants

78. Output entities with tweets

79. Dynamically rendering the tweet body

80. Rendering entities as Vue components

81. Getting users mentioned in a tweet

82. User mention notifications

83. Reviewing Telescope with mentions

84. Getting a tweet with it's parents

85. Getting tweet replies

86. Creating the conversation view

87. Showing parent and child tweets

88. Updating the conversation view in realtime

89. Adding a replying to indicator