Build a Twitter Clone

88 episodes
10 hours  57 mins

About this course

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.

Your teacher

Alex Garrett-Smith
Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

course episodes (88)

01. Introduction and demo

9m 34s

02. Setting up Laravel

13m 15s

03. Authentication with Sanctum (formerly Airlock)

10m 22s

04. Follower relationship

5m 44s

05. Getting tweets from who we’re following

7m 42s

06. Getting started on the timeline

10m 50s

07. Swapping out Bootstrap for Tailwind

5m 39s

08. Styling the base template

7m 36s

09. Rendering tweets on the timeline

13m 31s

10. Let’s use Vuex

12m 30s

11. Infinite scroll to load more timeline items

10m 59s

12. Styling the compose tweet form

9m 52s

13. Posting a simple tweet

11m 25s

14. Setting up for realtime

10m 29s

15. Updating the timeline with tweets in realtime

16m 32s

16. Filtering tweets that are already visible

2m 50s

17. Monitoring with Laravel Telescope

4m 3s

18. Defining tweet types

4m 24s

19. Retweet structure

6m 25s

20. Rendering dynamic components for tweet types

6m 52s

21. Showing quoted tweets

4m 24s

22. Automatically adjusting the textarea height

9m 23s

23. Designing tweets actions

8m 7s

24. Setting up for likes

2m 59s

25. Showing the like count on tweets

4m 39s

26. A performant way to show liked tweets

15m 3s

27. Liking tweets

10m 25s

28. Updating tweet likes in realtime

8m 24s

29. Updating our own likes in realtime

6m 34s

30. Updating like counts on retweets and quotes

2m 49s

31. Retweet dropdown menu

13m 58s

32. Showing retweet counts

3m 27s

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

13m 34s

34. Retweeting and unretweeting tweets

14m 29s

35. Updating retweets on the timeline in realtime

8m 17s

36. Realtime updates for unretweeting

6m 51s

37. Designing the tweet limit indicator


38. Hooking up the tweet limit indicator

6m 17s

39. Adding !important CSS variants to Tailwind

3m 37s

40. Selecting media to attach to tweets

8m 27s

41. Filtering allowed media

9m 48s

42. Displaying selected media

8m 44s

43. Removing selected media

5m 29s

44. Installing the MediaLibrary package

4m 35s

45. Uploading media

18m 9s

46. Returning a list of media IDs

2m 51s

47. Preparing media to be uploaded

7m 50s

48. Attaching media to tweets

2m 59s

49. Displaying images in tweets

13m 44s

50. Displaying video in tweets

4m 4s

51. Showing a progress bar for uploads

8m 4s

52. Reverting upload progress

1m 2s

53. Checking database media queries with Telescope

4m 3s

54. Getting modals working

7m 15s

55. Quote tweet modal

3m 52s

56. Refactoring tweet composing to a mixin

7m 29s

57. Storing a quoted retweet

7m 43s

58. Setting up tweet replies

6m 39s

59. Reply modal

5m 59s

60. Storing a reply

7m 14s

61. Updating tweet replies in realtime

4m 14s

62. Notifications setup

5m 7s

63. Tweet like notification

7m 23s

64. Using a custom database channel for notifications

9m 9s

65. Notification endpoint

5m 17s

66. Listing notifications

10m 46s

67. Dynamic notification types

5m 16s

68. Tweet reply notification type

4m 24s

69. Making our notifications act like our timeline

17m 38s

70. Updating notification tweets in realtime

2m 27s

71. Tweaking performance for notification tweet loading

2m 46s

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

5m 4s

73. Extracting entities with regular expressions

4m 43s

74. Storing entities from tweets

12m 19s

75. Extracting mentions

4m 5s

76. Storing entity types as constants

1m 39s

77. Output entities with tweets

3m 27s

78. Dynamically rendering the tweet body

7m 16s

79. Rendering entities as Vue components

9m 52s

80. Getting users mentioned in a tweet

9m 27s

81. User mention notifications

5m 46s

82. Reviewing Telescope with mentions

1m 9s

83. Getting a tweet with it's parents

8m 36s

84. Getting tweet replies

2m 26s

85. Creating the conversation view

11m 37s

86. Showing parent and child tweets

11m 19s

87. Updating the conversation view in realtime

2m 8s

88. Adding a replying to indicator

3m 42s
Want to stay in the loop about new content?
Of course you do.

© 2024 Codecourse Ltd. All Rights Reserved. Born in the UK.