Build a Twitter Clone

Start watching Add to bookmarks

88 episodes•10 hrs 57 mins•4 years ago

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

Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

Episodes

0%

Your progress

Total: 10h 57m
Played: 0m
Remaining: 10h 57m

01. Introduction and demo

02. Setting up Laravel

03. Authentication with Sanctum (formerly Airlock)

04. Follower relationship

05. Getting tweets from who we’re following

06. Getting started on the timeline

07. Swapping out Bootstrap for Tailwind

08. Styling the base template

09. Rendering tweets on the timeline

10. Let’s use Vuex

11. Infinite scroll to load more timeline items

12. Styling the compose tweet form

13. Posting a simple tweet

14. Setting up for realtime

15. Updating the timeline with tweets in realtime

16. Filtering tweets that are already visible

17. Monitoring with Laravel Telescope

18. Defining tweet types

19. Retweet structure

20. Rendering dynamic components for tweet types

21. Showing quoted tweets

22. Automatically adjusting the textarea height

23. Designing tweets actions

24. Setting up for likes

25. Showing the like count on tweets

26. A performant way to show liked tweets

27. Liking tweets

28. Updating tweet likes in realtime

29. Updating our own likes in realtime

30. Updating like counts on retweets and quotes

31. Retweet dropdown menu

32. Showing retweet counts

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

34. Retweeting and unretweeting tweets

35. Updating retweets on the timeline in realtime

36. Realtime updates for unretweeting

37. Designing the tweet limit indicator

38. Hooking up the tweet limit indicator

39. Adding !important CSS variants to Tailwind

40. Selecting media to attach to tweets

41. Filtering allowed media

42. Displaying selected media

43. Removing selected media

44. Installing the MediaLibrary package

45. Uploading media

46. Returning a list of media IDs

47. Preparing media to be uploaded

48. Attaching media to tweets

49. Displaying images in tweets

50. Displaying video in tweets

51. Showing a progress bar for uploads

52. Reverting upload progress

53. Checking database media queries with Telescope

54. Getting modals working

55. Quote tweet modal

56. Refactoring tweet composing to a mixin

57. Storing a quoted retweet

58. Setting up tweet replies

59. Reply modal

60. Storing a reply

61. Updating tweet replies in realtime

62. Notifications setup

63. Tweet like notification

64. Using a custom database channel for notifications

65. Notification endpoint

66. Listing notifications

67. Dynamic notification types

68. Tweet reply notification type

69. Making our notifications act like our timeline

70. Updating notification tweets in realtime

71. Tweaking performance for notification tweet loading

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

73. Extracting entities with regular expressions

74. Storing entities from tweets

75. Extracting mentions

76. Storing entity types as constants

77. Output entities with tweets

78. Dynamically rendering the tweet body

79. Rendering entities as Vue components

80. Getting users mentioned in a tweet

81. User mention notifications

82. Reviewing Telescope with mentions

83. Getting a tweet with it's parents

84. Getting tweet replies

85. Creating the conversation view

86. Showing parent and child tweets

87. Updating the conversation view in realtime

88. Adding a replying to indicator