Mô tả

Do you want to become an expert in JavaScript, Node.js and MongoDB?

Do you want to build a real social network just like Twitter?

If so, you’re in the right place! This course will guide you step by step in creating your own Twitter clone COMPLETELY from scratch.

We’re talking the kind of website that will amaze anybody that sees it. The kind of website that will get you hired in no time!

Why let me teach you?

I work as a Software Engineer at Microsoft where I build products used by millions of people all over the world! I want to take the skills I’ve gained through years of working with some of the best developers in the world and transfer them directly to you!

I’ve taught tens of thousands of students here on Udemy and created some of the most popular development courses available!

Okay so what’s the course about?

I will personally guide you, step by step, in creating your own social network site just like Twitter complete with:

  • Tweets

  • Likes, comments and retweets

  • Profile pages

  • Following and followers support

  • Instant messaging in real time

  • Group chat support

  • Profile pictures

  • Cover photos

  • and much more!

Whether you are a beginner* or an experienced programmer, this course will be massively beneficial to you.

Why should I take the course?

In the programming world, the “big 4” often consists of Google, Microsoft, Facebook and Amazon. To get a job at any of these companies, you absolutely MUST know the essentials: HTML, CSS and JavaScript. As well as this, it is becoming increasingly important to have experience with technologies such as Node.js and database systems such as MongoDB.

If you take this course, you will have nothing to worry about because we use all of these skills extensively!

Support: 

By enrolling in this course, you will have the COMPLETE support of a Microsoft Software Engineer (me). I'm always ready to answer any question you may have. Programming issues, errors, feature requests, general programming advice - it doesn't matter, I'm always happy to help! I always aim to respond to questions within a few hours and it's also worth noting that I've answered EVERY SINGLE question asked so far.

Future course discounts:

By enrolling in this course, you will get access to ALL of my current and future courses for the lowest possible discount we as instructors are capable of offering on Udemy - FOREVER

Project portfolio:

The site you create in this course will be the highlight of your project portfolio! Any potential employer who see's this project on your resume will want to hear all about it. The reason? They know that a project like this means you're familiar with the wide range of technical skills they need their employees to know.  

Fun!

Finally, this project is a lot of fun and I know you'll have a great time implementing your own unique ideas as well as the ones we implement together. What are you waiting for? 


* Although this course is suitable for beginners, it is not an introduction to development course. I won't go into much detail when explaining the basic programming concepts but I'm here to help if you want more of an explanation - just let me know!

Bạn sẽ học được gì

How to create a social network just like Twitter

Node JS

Socket IO

JavaScript

MongoDB

Mongoose

HTML

CSS

Yêu cầu

  • At least a basic programming understanding is recommended

Nội dung khoá học

31 sections

Node JS Basic Overview

8 lectures
Course promo video (from course home page)
01:27
Setup and creating our first app
08:08
Creating a server
07:25
How to quit/stop the app from running
00:07
Rendering content on the web page
04:34
Supporting additional pages
03:58
Adding a routing file
04:48
Handling POST/GET requests (form submissions)
06:31

Using NPM

4 lectures
npm init
07:50
Installing our first npm package
04:25
npm install
02:43
Telling git to ignore node_modules (skip if not using git)
02:19

Template Engines (Pug)

7 lectures
Setting up our project
05:38
Installing Express
05:24
Rendering some content on the web page
03:27
Creating our first Pug template
08:15
Rendering a dynamic page title
02:39
Extending another pug template file
04:22
Quick html improvements
01:47

Registration/Login System

23 lectures
Middleware: Redirecting the user if not logged in
06:07
Adding the login route
07:26
Creating the login page
08:36
Adding Bootstrap
07:00
Serving static files
07:51
Login CSS
13:58
Creating the register page
06:53
Checking that the passwords match
06:26
Adding body parser
05:36
Checking for empty fields
09:37
Getting started with MongoDB
06:17
Connecting to the database
10:36
Creating a reusable database connection
09:18
Creating the User Schema (mongoose)
09:22
Checking if username or emails are already in use
07:37
Async and Await explanation
04:06
Checking if the username or email are already in use
04:58
Inserting a user into the collection
05:29
Adding timestamps to our data
03:25
Hashing the password
06:40
Sessions
07:45
Passing the logged in user to the client
03:15
Logging in
13:38

Creating the site's main layout

8 lectures
Bootstrap grid intro
09:45
Creatig a responsive layout
08:33
Adding FontAwesome
04:00
Choosing our navigation bar icons
07:14
Styling the navigation bar
05:38
Navigation icon colours
07:28
Logging out
03:27
Adding the page title
08:51

Creating the post form

7 lectures
Mixins
09:51
Setting the default profile picture
04:40
Styling the post form container
05:43
Styling the textarea
07:33
Adding a common javascript file
06:49
Getting the entered text from the textbox
05:31
Enabling the submit button when the user types
03:44

Styling the posts

12 lectures
Adding a click handler to the post button
05:48
Rest API basic explanation
05:40
Post API route
06:28
Sending a bad request when the data is invalid
03:48
Creating the posts Mongoose schema
05:53
Inserting the post into the database
10:20
Handling the response from the server
05:07
Outputting the post content
06:48
Outputting the user info from the post
05:16
Styling the post body
08:09
Styling the comment, retweet and like buttons
09:17
Hover styles of the comment, retweet and like buttons
05:01

Outputting posts onto the newsfeed

7 lectures
Creating the home page JavaScript file
04:56
Getting posts from the database
06:18
Outputting posts on the page
05:34
Populating the posted by data
04:18
Populating our login details to save us time
02:10
Calculating the timestamp of the posts
05:54
Ordering the posts by newest first
01:01

The like button

13 lectures
Adding the likes field to the schemas
02:50
Like button click handler
03:50
Getting the post id from the clicked element
09:09
Rest API request types overview
03:37
Making a PUT request
06:15
Checking if if the user has already like the post
05:29
Inserting the like
09:03
Unliking posts
04:40
Returning the like result to the client
03:08
Updating the button to show the new number of likes
06:51
Passing the user logged in info to the client
05:40
Changing button colour when post is liked
06:34
Showing correct button colour when page loads
01:47

Retweeting posts

9 lectures
Setting up the retweet route
04:33
Adding the retweet fields to the schema
06:39
Retweeting posts
06:27
Retweeting posts - Fix
02:26
Showing the number of retweets next to the button
07:16
Setting retweet button colour when page is loaded
01:22
Rendering the retweet
07:59
Populating the retweet's postedBy field
03:04
Adding the retweet message indicator
05:58

Replying to posts

12 lectures
Opening the reply modal popup
07:10
Adding the post form in the modal
03:04
Enabling the submit reply button when the user types
03:19
Making the request to get the post when modal opens
07:12
Refactoring the get posts function
05:04
Getting a single post by ID
05:12
Outputting the post into the reply modal
04:55
Clearing the reply modal when it is closed
04:20
Sending the reply to the server
08:33
Inserting the reply into the database
02:41
Reloading the page after a reply is submitted
02:21
Outputting the reply
08:33

Creating the posts page

6 lectures
Sending the user to the posts page on click
03:51
Creating the posts route
06:33
Loading the post on the post page
03:41
Loading the replies to the post on the post page
10:54
Fixing a bug in the replies
02:27
Large font size for the post we're viewing
06:26

Deleting posts

5 lectures
Adding the delete button to our own posts
11:29
Styling the delete button
02:36
Getting the id of the post we want to delete
03:27
Making the ajax call to delete a post
06:09
Deleting the post
06:19

Profile Page

14 lectures
Creating the profile route file
03:15
Creating the profile page pug file
03:01
Accessing the profile page by username
08:10
User not found error message
03:02
Accessing the profile page by ID
03:14
Styling the profile image + cover photo
08:22
Message button style
08:18
Styling the follow button
05:51
Outputting the user details
04:59
Styling the user details
04:48
Creating the profile tabs
07:48
Loading posts on the profile page
05:10
Including/excluding the replies
07:40
Implementing the replies tab
06:37

Following and followers

15 lectures
Following and followers schema changes
04:09
Getting the user ID when we press the follow button
05:45
Creating the follow endpoint
05:41
Checking if the user is already following the person
05:59
Following and unfollowing the user
06:50
Updating the button when we follow/unfollow a user
08:22
Updating the text of the button when we follow/unfollow a user
00:52
Updating the following/followers count
07:21
Creating the following/followers page
04:31
Getting the following/followers data from the database
09:14
Outputting the users
08:05
Styling the users list
02:55
Adding the follow button to the user list
05:21
Only showing posts from people we're following
06:02
Following count bug fix
03:14

Uploading profile pictures

10 lectures
Adding the profile picture upload button
05:28
Creating the image upload modal
02:54
Adding Cropper JS (the cropping library)
04:01
Loading the image preview into the modal
09:44
Adding the cropper functionality
06:37
Converting the image upload data to a blob
04:46
Image upload ajax call
03:56
Accessing the image on the server
09:20
Storing the uploaded image in the correct location
06:41
Updating the user's profile picture in the database
11:08

Uploading a cover photo

4 lectures
Adding the upload button to the cover photo section
06:55
Cover photo upload modal popup
02:20
Cover photo cropping
02:31
Uploading the cover photo
07:01

Pinning posts

6 lectures
Pin post modal
05:41
Pinning posts
09:14
Changing the icon colour for the pinned post
02:56
Pinned post label
03:00
Displaying the pinned post on the profile
07:29
Unpinning posts
06:00

Search page

7 lectures
Creating the search page
08:01
Styling the search box
06:55
Creating the search timer
08:16
Searching for posts
06:17
Outputting the search posts
02:03
Searching for users
06:20
Outputting the search users
02:30

Creating group chats

14 lectures
Creating the inbox page routes
07:23
Creating the new message button
03:33
New message page elements
03:04
Styling the new message page elements
07:25
Adding the user search timer
06:10
Output selectable users
05:19
Selecting users
06:35
Leaving selected users out of the search results
03:14
Outputting the selected users
05:11
Styling the selected users
04:14
Removing the selected user
07:31
Creating the chat schema
05:39
Creating the chat routes
06:11
Creating chats
07:07

Chat list

7 lectures
Getting the chats
07:01
Outputting the chat elements
05:34
Styling the chat items
03:32
Getting the chat name
07:10
Showing the chat images
06:45
Styling the chat images
05:36
Ellipsis for overflowing text
03:15

Accessing chats

5 lectures
Creating the chat page
02:20
Getting the chat data for the page
05:55
Checking that the chat exists
06:47
Accessing the chat by user ID
10:46
Sorting the chats by most recent first
01:30

Chat page UI

8 lectures
Adding the chat page elements
03:01
Making the page take up the fill window height
04:25
Styling the chat title bar
04:35
Styling the message text box
05:14
Styling the chat messages container
03:46
Group chat images
03:09
Styling the group chat images
03:43
Limiting the number of displayed chat images
10:46

Changing the chat name

5 lectures
Adding the chat name modal popup
04:10
Making the ajax call to change the name
03:55
Updating the chat name in the database
03:29
Get chat route
06:00
Get chat data by chat ID
02:08

Sending messages

4 lectures
Message submitted event handlers
06:20
Send message function
03:21
Creating the message schema
04:25
Sending the message to the database
05:49

Outputting messages

15 lectures
Creating the message html
07:12
Adding the main style for the messages
04:22
Styling our own messages
06:04
Handling a send message failure
03:22
Outputting the latest message
07:46
Getting the messages from the database
04:00
Outputting all the chat messages
04:32
Adding classes to the first and last messages in a group of messages
08:32
Setting the border radius of our messages
04:00
Setting the border radius of their messages
02:24
Outputting the sender name
04:08
Outputting the sender profile picture
05:32
Fixing a bug in the scrolling of messages
01:58
Scrolling messages to the bottom automatically
05:41
Showing a loading spinner while messages are loading
06:08

Real time messages (Socket.IO)

11 lectures
Installing socket io
03:53
Connecting to socket io from the client
04:27
Creating our setup socket event handler
09:36
Joining a chat room
03:34
Sending typing notifications
06:42
Safari messages bug fix
01:53
Showing the typing dots gif when user is typing
05:34
Hiding the typing dots when the user stops typing
09:07
Hiding the typing dots when a message is sent
01:24
Sending a new message event
05:38
Handling incoming messages
06:51

Sending notifications

6 lectures
Creating the notification page
03:21
Creating the notification schema
04:59
Inserting notifications
05:56
Sending a follow notification
04:28
Sending notifications for likes, retweets and replies
09:37
Sending notifications for messages
08:44

Displaying notifications

9 lectures
Creating the notifications api route
03:40
Retrieving notifications from the database
07:23
Creating the notifications html
07:20
Creating the notification text
05:59
Creating the notification links
04:19
Setting the active class on the notifications
02:09
Marking a notification as opened
06:53
Notification click handlers
10:48
Marking all notifications as read
04:09

Unread notification/messages badges

4 lectures
Adding the notifications/messages badge to the nav bar
06:24
Getting the number of unread chats
05:26
Adding the number to the unread messages badge
01:51
Adding the number to the unread notifications badge
06:11

Real time notifications

9 lectures
Sending the notification socket event
06:23
Handling incoming notifications
03:06
Outputting the popup notification
06:09
Styling the popup notification list
05:26
Making the notifications slide into view
02:15
Outputting the popup messages
05:06
Marking all messages as read
06:05
Making unread messages have a blue background
03:49
Incoming message fix
03:26

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.