Этот материал находится в платной подписке. Оформи премиум подписку и смотри или слушай Create a Twitter Clone with Node.js, Socket.IO and MongoDB, а также все другие курсы, прямо сейчас!
Премиум
  • Урок 1. 00:01:28
    Course promo video (from course home page)
  • Урок 2. 00:08:09
    Setup and creating our first app
  • Урок 3. 00:07:26
    Creating a server
  • Урок 4. 00:04:35
    Rendering content on the web page
  • Урок 5. 00:03:59
    Supporting additional pages
  • Урок 6. 00:04:49
    Adding a routing file
  • Урок 7. 00:06:32
    Handling POST/GET requests (form submissions)
  • Урок 8. 00:07:51
    npm init
  • Урок 9. 00:04:26
    Installing our first npm package
  • Урок 10. 00:02:44
    npm install
  • Урок 11. 00:02:20
    Telling git to ignore node_modules (skip if not using git)
  • Урок 12. 00:05:39
    Setting up our project
  • Урок 13. 00:05:25
    Installing Express
  • Урок 14. 00:03:28
    Rendering some content on the web page
  • Урок 15. 00:08:16
    Creating our first Pug template
  • Урок 16. 00:02:40
    Rendering a dynamic page title
  • Урок 17. 00:04:23
    Extending another pug template file
  • Урок 18. 00:01:48
    Quick html improvements
  • Урок 19. 00:06:08
    Middleware: Redirecting the user if not logged in
  • Урок 20. 00:07:27
    Adding the login route
  • Урок 21. 00:08:37
    Creating the login page
  • Урок 22. 00:07:01
    Adding Bootstrap
  • Урок 23. 00:07:52
    Serving static files
  • Урок 24. 00:13:59
    Login CSS
  • Урок 25. 00:06:54
    Creating the register page
  • Урок 26. 00:06:27
    Checking that the passwords match
  • Урок 27. 00:05:37
    Adding body parser
  • Урок 28. 00:09:38
    Checking for empty fields
  • Урок 29. 00:06:18
    Getting started with MongoDB
  • Урок 30. 00:10:37
    Connecting to the database
  • Урок 31. 00:09:19
    Creating a reusable database connection
  • Урок 32. 00:09:23
    Creating the User Schema (mongoose)
  • Урок 33. 00:07:38
    Checking if username or emails are already in use
  • Урок 34. 00:04:07
    Async and Await explanation
  • Урок 35. 00:04:59
    Checking if the username or email are already in use
  • Урок 36. 00:05:30
    Inserting a user into the collection
  • Урок 37. 00:03:26
    Adding timestamps to our data
  • Урок 38. 00:06:41
    Hashing the password
  • Урок 39. 00:07:46
    Sessions
  • Урок 40. 00:03:16
    Passing the logged in user to the client
  • Урок 41. 00:13:39
    Logging in
  • Урок 42. 00:09:46
    Bootstrap grid intro
  • Урок 43. 00:08:34
    Creatig a responsive layout
  • Урок 44. 00:04:01
    Adding FontAwesome
  • Урок 45. 00:07:15
    Choosing our navigation bar icons
  • Урок 46. 00:05:39
    Styling the navigation bar
  • Урок 47. 00:07:29
    Navigation icon colours
  • Урок 48. 00:03:28
    Logging out
  • Урок 49. 00:08:52
    Adding the page title
  • Урок 50. 00:09:52
    Mixins
  • Урок 51. 00:04:41
    Setting the default profile picture
  • Урок 52. 00:05:44
    Styling the post form container
  • Урок 53. 00:07:34
    Styling the textarea
  • Урок 54. 00:06:50
    Adding a common javascript file
  • Урок 55. 00:05:32
    Getting the entered text from the textbox
  • Урок 56. 00:03:45
    Enabling the submit button when the user types
  • Урок 57. 00:05:49
    Adding a click handler to the post button
  • Урок 58. 00:05:41
    Rest API basic explanation
  • Урок 59. 00:06:29
    Post API route
  • Урок 60. 00:03:49
    Sending a bad request when the data is invalid
  • Урок 61. 00:05:54
    Creating the posts Mongoose schema
  • Урок 62. 00:10:21
    Inserting the post into the database
  • Урок 63. 00:05:08
    Handling the response from the server
  • Урок 64. 00:06:49
    Outputting the post content
  • Урок 65. 00:05:17
    Outputting the user info from the post
  • Урок 66. 00:08:10
    Styling the post body
  • Урок 67. 00:09:18
    Styling the comment, retweet and like buttons
  • Урок 68. 00:05:02
    Hover styles of the comment, retweet and like buttons
  • Урок 69. 00:04:57
    Creating the home page JavaScript file
  • Урок 70. 00:06:19
    Getting posts from the database
  • Урок 71. 00:05:35
    Outputting posts on the page
  • Урок 72. 00:04:19
    Populating the posted by data
  • Урок 73. 00:02:11
    Populating our login details to save us time
  • Урок 74. 00:05:55
    Calculating the timestamp of the posts
  • Урок 75. 00:01:02
    Ordering the posts by newest first
  • Урок 76. 00:02:51
    Adding the likes field to the schemas
  • Урок 77. 00:03:51
    Like button click handler
  • Урок 78. 00:09:10
    Getting the post id from the clicked element
  • Урок 79. 00:03:38
    Rest API request types overview
  • Урок 80. 00:06:16
    Making a PUT request
  • Урок 81. 00:05:30
    Checking if if the user has already like the post
  • Урок 82. 00:09:04
    Inserting the like
  • Урок 83. 00:04:41
    Unliking posts
  • Урок 84. 00:03:09
    Returning the like result to the client
  • Урок 85. 00:06:52
    Updating the button to show the new number of likes
  • Урок 86. 00:05:41
    Passing the user logged in info to the client
  • Урок 87. 00:06:35
    Changing button colour when post is liked
  • Урок 88. 00:01:48
    Showing correct button colour when page loads
  • Урок 89. 00:04:34
    Setting up the retweet route
  • Урок 90. 00:06:40
    Adding the retweet fields to the schema
  • Урок 91. 00:06:28
    Retweeting posts
  • Урок 92. 00:02:27
    Retweeting posts - Fix
  • Урок 93. 00:07:17
    Showing the number of retweets next to the button
  • Урок 94. 00:01:23
    Setting retweet button colour when page is loaded
  • Урок 95. 00:08:00
    Rendering the retweet
  • Урок 96. 00:03:05
    Populating the retweet's postedBy field
  • Урок 97. 00:05:59
    Adding the retweet message indicator
  • Урок 98. 00:07:11
    Opening the reply modal popup
  • Урок 99. 00:03:05
    Adding the post form in the modal
  • Урок 100. 00:03:20
    Enabling the submit reply button when the user types
  • Урок 101. 00:07:13
    Making the request to get the post when modal opens
  • Урок 102. 00:05:05
    Refactoring the get posts function
  • Урок 103. 00:05:13
    Getting a single post by ID
  • Урок 104. 00:04:56
    Outputting the post into the reply modal
  • Урок 105. 00:04:21
    Clearing the reply modal when it is closed
  • Урок 106. 00:09:38
    Sending the reply to the server
  • Урок 107. 00:02:42
    Inserting the reply into the database
  • Урок 108. 00:02:22
    Reloading the page after a reply is submitted
  • Урок 109. 00:08:34
    Outputting the reply
  • Урок 110. 00:03:52
    Sending the user to the posts page on click
  • Урок 111. 00:06:34
    Creating the posts route
  • Урок 112. 00:03:42
    Loading the post on the post page
  • Урок 113. 00:10:55
    Loading the replies to the post on the post page
  • Урок 114. 00:02:28
    Fixing a bug in the replies
  • Урок 115. 00:06:27
    Large font size for the post we're viewing
  • Урок 116. 00:11:30
    Adding the delete button to our own posts
  • Урок 117. 00:02:37
    Styling the delete button
  • Урок 118. 00:03:28
    Getting the id of the post we want to delete
  • Урок 119. 00:06:10
    Making the ajax call to delete a post
  • Урок 120. 00:06:20
    Deleting the post
  • Урок 121. 00:03:16
    Creating the profile route file
  • Урок 122. 00:03:02
    Creating the profile page pug file
  • Урок 123. 00:08:11
    Accessing the profile page by username
  • Урок 124. 00:03:03
    User not found error message
  • Урок 125. 00:03:15
    Accessing the profile page by ID
  • Урок 126. 00:08:23
    Styling the profile image + cover photo
  • Урок 127. 00:08:19
    Message button style
  • Урок 128. 00:05:52
    Styling the follow button
  • Урок 129. 00:05:00
    Outputting the user details
  • Урок 130. 00:04:49
    Styling the user details
  • Урок 131. 00:07:49
    Creating the profile tabs
  • Урок 132. 00:05:11
    Loading posts on the profile page
  • Урок 133. 00:07:41
    Including/excluding the replies
  • Урок 134. 00:06:38
    Implementing the replies tab
  • Урок 135. 00:04:10
    Following and followers schema changes
  • Урок 136. 00:05:46
    Getting the user ID when we press the follow button
  • Урок 137. 00:05:42
    Creating the follow endpoint
  • Урок 138. 00:06:00
    Checking if the user is already following the person
  • Урок 139. 00:06:51
    Following and unfollowing the user
  • Урок 140. 00:08:23
    Updating the button when we follow/unfollow a user
  • Урок 141. 00:00:53
    Updating the text of the button when we follow/unfollow a user
  • Урок 142. 00:07:22
    Updating the following/followers count
  • Урок 143. 00:04:32
    Creating the following/followers page
  • Урок 144. 00:09:15
    Getting the following/followers data from the database
  • Урок 145. 00:08:06
    Outputting the users
  • Урок 146. 00:02:56
    Styling the users list
  • Урок 147. 00:05:22
    Adding the follow button to the user list
  • Урок 148. 00:06:03
    Only showing posts from people we're following
  • Урок 149. 00:03:15
    Following count bug fix
  • Урок 150. 00:05:29
    Adding the profile picture upload button
  • Урок 151. 00:02:55
    Creating the image upload modal
  • Урок 152. 00:04:02
    Adding Cropper JS (the cropping library)
  • Урок 153. 00:09:45
    Loading the image preview into the modal
  • Урок 154. 00:06:38
    Adding the cropper functionality
  • Урок 155. 00:04:47
    Converting the image upload data to a blob
  • Урок 156. 00:03:57
    Image upload ajax call
  • Урок 157. 00:09:21
    Accessing the image on the server
  • Урок 158. 00:06:42
    Storing the uploaded image in the correct location
  • Урок 159. 00:11:09
    Updating the user's profile picture in the database
  • Урок 160. 00:06:56
    Adding the upload button to the cover photo section
  • Урок 161. 00:02:21
    Cover photo upload modal popup
  • Урок 162. 00:02:32
    Cover photo cropping
  • Урок 163. 00:07:02
    Uploading the cover photo
  • Урок 164. 00:05:42
    Pin post modal
  • Урок 165. 00:09:15
    Pinning posts
  • Урок 166. 00:02:57
    Changing the icon colour for the pinned post
  • Урок 167. 00:03:01
    Pinned post label
  • Урок 168. 00:07:30
    Displaying the pinned post on the profile
  • Урок 169. 00:06:01
    Unpinning posts
  • Урок 170. 00:08:02
    Creating the search page
  • Урок 171. 00:06:56
    Styling the search box
  • Урок 172. 00:08:17
    Creating the search timer
  • Урок 173. 00:06:18
    Searching for posts
  • Урок 174. 00:02:04
    Outputting the search posts
  • Урок 175. 00:06:21
    Searching for users
  • Урок 176. 00:02:31
    Outputting the search users
  • Урок 177. 00:07:24
    Creating the inbox page routes
  • Урок 178. 00:03:34
    Creating the new message button
  • Урок 179. 00:03:05
    New message page elements
  • Урок 180. 00:07:26
    Styling the new message page elements
  • Урок 181. 00:06:11
    Adding the user search timer
  • Урок 182. 00:05:20
    Output selectable users
  • Урок 183. 00:06:36
    Selecting users
  • Урок 184. 00:03:15
    Leaving selected users out of the search results
  • Урок 185. 00:05:12
    Outputting the selected users
  • Урок 186. 00:04:15
    Styling the selected users
  • Урок 187. 00:07:32
    Removing the selected user
  • Урок 188. 00:05:40
    Creating the chat schema
  • Урок 189. 00:06:12
    Creating the chat routes
  • Урок 190. 00:07:08
    Creating chats
  • Урок 191. 00:07:02
    Getting the chats
  • Урок 192. 00:05:35
    Outputting the chat elements
  • Урок 193. 00:03:33
    Styling the chat items
  • Урок 194. 00:07:11
    Getting the chat name
  • Урок 195. 00:06:46
    Showing the chat images
  • Урок 196. 00:05:37
    Styling the chat images
  • Урок 197. 00:03:16
    Ellipsis for overflowing text
  • Урок 198. 00:02:21
    Creating the chat page
  • Урок 199. 00:05:56
    Getting the chat data for the page
  • Урок 200. 00:06:48
    Checking that the chat exists
  • Урок 201. 00:10:47
    Accessing the chat by user ID
  • Урок 202. 00:01:31
    Sorting the chats by most recent first
  • Урок 203. 00:03:02
    Adding the chat page elements
  • Урок 204. 00:04:26
    Making the page take up the fill window height
  • Урок 205. 00:04:36
    Styling the chat title bar
  • Урок 206. 00:05:15
    Styling the message text box
  • Урок 207. 00:03:47
    Styling the chat messages container
  • Урок 208. 00:03:10
    Group chat images
  • Урок 209. 00:03:44
    Styling the group chat images
  • Урок 210. 00:10:47
    Limiting the number of displayed chat images
  • Урок 211. 00:04:11
    Adding the chat name modal popup
  • Урок 212. 00:03:56
    Making the ajax call to change the name
  • Урок 213. 00:03:30
    Updating the chat name in the database
  • Урок 214. 00:06:01
    Get chat route
  • Урок 215. 00:02:09
    Get chat data by chat ID
  • Урок 216. 00:06:21
    Message submitted event handlers
  • Урок 217. 00:03:22
    Send message function
  • Урок 218. 00:04:26
    Creating the message schema
  • Урок 219. 00:05:50
    Sending the message to the database
  • Урок 220. 00:07:13
    Creating the message html
  • Урок 221. 00:04:23
    Adding the main style for the messages
  • Урок 222. 00:06:05
    Styling our own messages
  • Урок 223. 00:03:23
    Handling a send message failure
  • Урок 224. 00:07:47
    Outputting the latest message
  • Урок 225. 00:04:01
    Getting the messages from the database
  • Урок 226. 00:04:33
    Outputting all the chat messages
  • Урок 227. 00:08:33
    Adding classes to the first and last messages in a group of messages
  • Урок 228. 00:04:01
    Setting the border radius of our messages
  • Урок 229. 00:02:25
    Setting the border radius of their messages
  • Урок 230. 00:04:09
    Outputting the sender name
  • Урок 231. 00:05:33
    Outputting the sender profile picture
  • Урок 232. 00:01:59
    Fixing a bug in the scrolling of messages
  • Урок 233. 00:05:42
    Scrolling messages to the bottom automatically
  • Урок 234. 00:06:09
    Showing a loading spinner while messages are loading
  • Урок 235. 00:03:54
    Installing socket io
  • Урок 236. 00:04:28
    Connecting to socket io from the client
  • Урок 237. 00:09:37
    Creating our setup socket event handler
  • Урок 238. 00:03:35
    Joining a chat room
  • Урок 239. 00:06:43
    Sending typing notifications
  • Урок 240. 00:01:54
    Safari messages bug fix
  • Урок 241. 00:05:35
    Showing the typing dots gif when user is typing
  • Урок 242. 00:09:08
    Hiding the typing dots when the user stops typing
  • Урок 243. 00:01:25
    Hiding the typing dots when a message is sent
  • Урок 244. 00:05:39
    Sending a new message event
  • Урок 245. 00:06:52
    Handling incoming messages
  • Урок 246. 00:03:22
    Creating the notification page
  • Урок 247. 00:05:00
    Creating the notification schema
  • Урок 248. 00:05:57
    Inserting notifications
  • Урок 249. 00:04:29
    Sending a follow notification
  • Урок 250. 00:09:38
    Sending notifications for likes, retweets and replies
  • Урок 251. 00:08:45
    Sending notifications for messages
  • Урок 252. 00:03:41
    Creating the notifications api route
  • Урок 253. 00:07:24
    Retrieving notifications from the database
  • Урок 254. 00:07:21
    Creating the notifications html
  • Урок 255. 00:06:00
    Creating the notification text
  • Урок 256. 00:04:20
    Creating the notification links
  • Урок 257. 00:02:10
    Setting the active class on the notifications
  • Урок 258. 00:06:54
    Marking a notification as opened
  • Урок 259. 00:10:49
    Notification click handlers
  • Урок 260. 00:04:10
    Marking all notifications as read
  • Урок 261. 00:06:25
    Adding the notifications/messages badge to the nav bar
  • Урок 262. 00:05:27
    Getting the number of unread chats
  • Урок 263. 00:01:52
    Adding the number to the unread messages badge
  • Урок 264. 00:06:12
    Adding the number to the unread notifications badge
  • Урок 265. 00:06:24
    Sending the notification socket event
  • Урок 266. 00:03:07
    Handling incoming notifications
  • Урок 267. 00:06:10
    Outputting the popup notification
  • Урок 268. 00:05:27
    Styling the popup notification list
  • Урок 269. 00:02:16
    Making the notifications slide into view
  • Урок 270. 00:05:07
    Outputting the popup messages
  • Урок 271. 00:06:06
    Marking all messages as read
  • Урок 272. 00:03:50
    Making unread messages have a blue background
  • Урок 273. 00:03:27
    Incoming message fix