Creating Twitch Clone - Practical MERN Stack Course 2023

Focused View

Marek Gryszkiewicz

11:26:13

40 View

1 - App Preview and Theory Introduction

1 - Application Preview.mp4

03:53

2 - Architecture.mp4

01:21

3 - MongoDB NoSQL Database.mp4

01:51

4 - Express Nodejs web application framework.mp4

01:36

5 - React Client Side Library.mp4

01:35

6 - Nodejs Server Side.mp4

01:31

7 - SocketIO Realtime Communication.mp4

02:02

8 - MERN Stack Advantages.mp4

02:57

2 - Creating Express Server

9 - Nodejs installation.mp4

02:12

10 - Project initialization.mp4

02:14

11 - Installing dependencies.mp4

05:44

12 - Creating Express Server.mp4

07:36

13 - Complete Section Code.html

13 - S01E04.zip

3 - Authentication Routes

14 - Creating Auth Routes.mp4

05:41

15 - Testing Authentication Routes with Postman.mp4

02:55

16 - Authentication Controllers.mp4

05:43

17 - Validation middleware.mp4

02:54

18 - Validation with Joi.mp4

09:30

4 - MongoDB Connection

19 - Creating MongoDB Database.mp4

07:49

20 - Connecting with Database.mp4

05:34

21 - Saving Data in Database.mp4

09:20

22 - Complete Section Code.html

22 - S03E03.zip

5 - Implementing JWT Authentication

23 - Introduction to JWT.mp4

05:23

24 - Encrypting User Password.mp4

05:20

25 - Issuing JWT Token.mp4

06:32

26 - Testing Registration.mp4

03:42

27 - Creating Login Logic.mp4

07:03

28 - Testing Login Funcionallity.mp4

05:48

29 - Complete Section Code.html

29 - S04E06.zip

6 - Creating React Application with Authentication Form

30 - Module Introduction.mp4

01:04

31 - Creating React Application.mp4

02:21

32 - Clean up of initial project.mp4

02:55

33 - Routing reactrouterdom package.mp4

09:26

34 - Creating first components.mp4

06:45

35 - Login Form Basic Structure.mp4

05:17

35 - authpage.zip

36 - Logo Component.mp4

04:55

36 - logoplaceholder.zip

37 - Creating Reusable Input Component.mp4

07:24

38 - Handling Input Value Changes.mp4

08:43

39 - Creating Validation Functions.mp4

12:09

39 - validateemail.zip

39 - validatepassword.zip

39 - validatepasswordconf.zip

39 - validateusername.zip

40 - Connecting validation with our Form.mp4

09:46

41 - Registration Form.mp4

07:39

42 - Preparing for HTTP requests.mp4

05:26

43 - Creating useLogin hook.mp4

12:55

44 - Creating useRegister hook.mp4

04:55

45 - Notifications reacthottoast.mp4

05:28

46 - Testing Auth Forms.mp4

08:53

47 - Complete Section Code.html

47 - S05E17.zip

7 - Server Side Creating Routes

48 - Routes Module Introduction.mp4

02:26

49 - Preparing Database Models.mp4

12:39

50 - Creating Channel Document with Registration.mp4

06:38

51 - Which Routes should be secured JWT.mp4

03:38

52 - Channel Details.mp4

09:32

53 - Fetching Real Channel Data from DB.mp4

07:23

54 - Fetching Channels.mp4

09:39

55 - Authentication Middleware validating JWT Token.mp4

08:52

55 - auth.zip

56 - Get Channel Settings Route.mp4

08:34

57 - Fetching Settings from DB.mp4

05:23

58 - Updating Channel Settings Route.mp4

16:27

59 - Solving bug DB query returns old data.mp4

01:33

60 - Route Change Password.mp4

08:54

61 - Testing Change Password Route.mp4

02:41

62 - Follow Channel Route with Testing.mp4

08:39

63 - Route Get Followed Channels.mp4

04:21

64 - Complete Section Code.html

64 - S06E16.zip

8 - Client Side Creating Dashboard

65 - Dashboard Preview.mp4

01:35

66 - Router Adjustments.mp4

05:08

66 - dashboardpage.zip

67 - Dashboard Components.mp4

06:13

68 - Creating Navbar.mp4

07:48

69 - Rendering List of Followed Channels.mp4

06:30

70 - Nested Routing.mp4

05:17

71 - Rendering Channels.mp4

13:08

72 - Rendering Channel View.mp4

07:09

73 - Channel View Description.mp4

05:57

74 - Settings Page Stream key.mp4

05:06

75 - Auth Input Refactor.mp4

03:45

76 - Preparing Channel Settings Form.mp4

04:26

77 - Validators for Channel Settings.mp4

06:00

77 - validateavatarurl.zip

78 - Rendering inputs through mapping.mp4

06:40

79 - Form Handlers.mp4

05:15

80 - Form Button.mp4

04:00

81 - Change Password Form.mp4

09:54

82 - Complete Section Code.html

82 - S07E17.zip

9 - Connecting Client Dashboard with API

83 - User Details hook.mp4

07:41

84 - Navigating between Pages.mp4

02:44

85 - Handling logout Functionality.mp4

05:15

86 - useChannelSettings hook.mp4

10:11

87 - Loading Spinner with Fetching Settings Data.mp4

07:01

88 - Debugging not working Channel Settings Route.mp4

03:32

89 - Attaching Token to the Requests.mp4

05:13

90 - Saving Channel Settings.mp4

05:46

91 - Channel Settings Validation.mp4

02:26

92 - useChangePassword hook.mp4

08:00

93 - Fetching Channels Hook.mp4

13:33

94 - Filtering Channels Array.mp4

01:57

95 - Preparing to render real Channels.mp4

04:46

96 - Displaying Real Followed Channels.mp4

04:51

97 - Channel Page.mp4

02:57

98 - Fetching Channel Details.mp4

05:43

99 - Displaying Channel Details.mp4

07:05

100 - Rendering Follow Button.mp4

03:18

101 - Following Channel.mp4

08:13

102 - Refetching Followed Channels.mp4

07:20

103 - Fixing Bug with Refetching.mp4

02:32

104 - Complete Section Code.html

104 - S08E22.zip

10 - OBS with RTMP Server Connecting Streams

105 - RTMP Theory Introduction.mp4

04:04

106 - NodeMediaServer package Introduction.mp4

03:20

107 - Starting Media Server.mp4

04:46

108 - OBS Quick Introduction.mp4

03:48

109 - Streaming from OBS to Media Server.mp4

05:26

110 - Displaying Stream From Media Server.mp4

05:35

111 - Passing Correct Stream URL for every Channel.mp4

05:17

112 - Fixing Bug With Channel Id.mp4

05:36

113 - Checking if Channel is Online.mp4

13:02

114 - Channels Online Status.mp4

02:44

115 - Complete Section Code.html

115 - S09E10.zip

11 - Chat with SocketIO

116 - Creating Chat Components.mp4

03:24

117 - Messages Container.mp4

04:24

118 - New Message Input.mp4

04:54

119 - Introduction to SocketIO.mp4

07:16

120 - Connecting with SocketIO from Client Side.mp4

07:57

121 - Preparing Event for Chat History at Server Side.mp4

07:44

122 - Getting Chat History at Client Side.mp4

10:43

123 - Fixing Bug with Mongoose Model.mp4

04:49

124 - Creating Logic of Saving Messages.mp4

06:23

Description

Build a Twitch-like Streaming Site with MERN: From Zero to Hero

What You'll Learn?

Understand the MERN Stack: Gain foundational knowledge of MongoDB, Express, React and Node
Build a Streaming Platform: Create a basic version of a web-based streaming platform, similar to Twitch
Implement User Authentication: Set up user login and registration
Implement User Authentication: Set up user login and registration systems
Integrate with OBS: Learn to connect a platform with OBS for live broadcasting
Add Real-time Chat: Create a chat system using Socket IO for user interactions
Test APIs with Postman: Develop and test platform APIs to ensure functionality
Develop with React: Understand how to use React for building interactive web interfaces

Who is this for?

Students who want to learn about live streaming with the MERN stack

What You Need to Know?

JavaScript knowledge and some basics related with React

More details

Description
Have you ever thought about how sites like Twitch let people stream videos? Join our course to learn how to make your own streaming website using some great tools!
In this course, we'll show you how to build a streaming app step by step. We'll use:
MongoDB to keep all our data.
Express to manage our website's server.
React to design the parts of our website that users see and interact with.
Node to run everything behind the scenes.
But that's not all. We'll also use OBS to let people stream their videos on our site. And with SocketIO, we'll add a chat so viewers can talk to each other while watching. We'll also use Postman to check that our site works well and fix any problems.
We made this course simple and easy to understand, even if English isn't your first language. We'll do real projects, so you can practice what you learn right away.
What will you get from this course?
Learn to make a streaming website using MongoDB, Express, React, and Node.
Add a live chat to your site with SocketIO.
Use Postman to make sure everything works well.
At the end of this course, you'll have your own streaming website to show off and lots of new skills. If you want to make a website where people can stream and chat, this course is for you. Join us and start learning!
Who this course is for:
Students who want to learn about live streaming with the MERN stack

User Reviews

Rating

average 0

Total votes0

Focused display

My main goal is to improve as a developer and share my knowledge. I am working as full stack web developer and my main interests are programming and boxing. I like learning new stuff and programming makes me happy when I can share my knowledge. I will do my best to show you how you can create amazing apps.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.