Youtube clone
15h 41m 20s
English
Paid
April 12, 2024
What is "clone coding"? Services that actually exist. Sweat. Sweat. Practical 100% educational method to learn while creating Clone coding is a way of learning while creating real services such as Instagram, KakaoTalk, YouTube, Uber, etc. Are you still studying difficult theories? Even before I even start, my motivation to study would disappear!? There is no way to study as fast and effective as learning while making a real-world service with your own hands. Come to the practical programming world!
More
Features to implement and concepts to learn
Finally, we will develop a full stack that runs the entire cycle including front + back + distribution.
- This is a fully reproduced YouTube clone coding. Users can view videos, upload videos, record their own videos, comment on each other's videos, and search videos.
- YouTube backend clones: MongoDB, NodeJS, ES6, AWS, Heroku
- YouTube frontend clone: 100% Vanilla JS! SaSS, ES6, WebPack, Pug
As a result, after this class...
- Finally, we will develop a full stack that runs the entire cycle including front + back + distribution.
- JavaScript developer! Overall JS technology is upgraded.
- See the finished look: https://polar-sea-27980.herokuapp.com/
Watch Online Youtube clone
Join premium to watch
Go to premium
# | Title | Duration |
---|---|---|
1 | #0.1 What are we building | 02:12 |
2 | #0.2 The State of Fullstack | 05:52 |
3 | #0.3 Websites vs Webapps | 04:45 |
4 | #1.0 What is NodeJS | 03:18 |
5 | #1.1 Use Cases for NodeJS | 08:38 |
6 | #1.2 Who Uses NodeJS | 03:22 |
7 | #1.3 Installing NodeJS | 02:45 |
8 | #2.0 What is a Server | 02:59 |
9 | #2.1 What is Express | 03:33 |
10 | #2.2 Installing Express with NPM | 11:20 |
11 | #2.3 Your First Express Server | 11:14 |
12 | #2.4 Handling Routes with Express | 09:58 |
13 | #2.5 ES6 on NodeJS using Babel | 10:40 |
14 | #2.6 Express Core: Middlewares | 09:38 |
15 | #2.7 Express Core: Middlewares part Two | 09:23 |
16 | #2.8 Express Core: Routing | 11:23 |
17 | #2.9 MVC Pattern part One | 08:03 |
18 | #2.10 MVC Pattern part Two | 11:10 |
19 | #2.11 MVC Pattern part Three | 08:38 |
20 | #2.12 Recap | 04:24 |
21 | #2.13 Installing Pug | 06:37 |
22 | #2.14 Layouts with Pug | 09:37 |
23 | #2.15 Partials with Pug | 09:13 |
24 | #2.16 Local Variables in Pug | 09:04 |
25 | #2.17 Template Variables in Pug | 04:40 |
26 | #2.18 Search Controller | 10:43 |
27 | #2.19 Join : Log In HTML | 11:18 |
28 | #2.20 Change Profile HTML | 06:56 |
29 | #2.21 Home Controller | 11:02 |
30 | #2.22 Home Controller part Two | 10:55 |
31 | #2.23 Join Controller | 12:09 |
32 | #2.24 Log In and User Profile Controller | 10:28 |
33 | #2.25 More Controlers | 10:34 |
34 | #3.0 MongoDB and Mongoose | 06:33 |
35 | #3.1 Connecting to MongoDB | 09:17 |
36 | #3.2 Configuring Dot Env | 03:15 |
37 | #3.3 Video Model | 07:18 |
38 | #3.4 Comment Model | 07:50 |
39 | #3.5 Home Controller Finished | 09:26 |
40 | #3.6 Uploading and Creating a Video | 13:52 |
41 | #3.7 Uploading and Creating a Video part Two | 08:51 |
42 | #3.8 Getting Video by ID | 11:54 |
43 | #3.9 Editing a Video | 14:31 |
44 | #3.10 Deleting a Video | 06:56 |
45 | #3.11 Installing ESLint | 14:17 |
46 | #3.12 Searching Videos | 11:51 |
47 | #4.0 Introduction to Webpack | 09:33 |
48 | #4.1 Styles with Webpack part One | 10:31 |
49 | #4.2 Styles with Webpack part Two | 11:48 |
50 | #4.3 ES6 with Webpack | 10:33 |
51 | #5.0 SCSS and Making the Header | 11:14 |
52 | #5.1 Footer and Login / Join | 09:00 |
53 | #5.2 Everything else! | 14:25 |
54 | #6.0 Introduction to PassportJS | 05:04 |
55 | #6.1 Local Authentication with Passport part One | 11:17 |
56 | #6.2 Local Authentication with Passport part Two | 09:59 |
57 | #6.3 Loggin the User In | 10:25 |
58 | #6.4 Sessions on Express | 11:22 |
59 | #6.5 MongoStore and Middlewares | 10:38 |
60 | #6.6 Github Log In part One | 08:24 |
61 | #6.7 Github Log In part Two | 13:46 |
62 | #6.8 Github Log In part Three | 08:44 |
63 | #6.9 Recap and User Profile | 12:34 |
64 | #6.10 User Detail + Facebook Login Part One | 13:08 |
65 | #6.11 Facebook Login Part Two | 13:48 |
66 | #6.12 Facebook Log In part Three | 08:46 |
67 | #7.0 User Profile | 08:24 |
68 | #7.1 Edit User Password | 10:41 |
69 | #7.2 Change Password | 10:23 |
70 | #7.3 Adding Creator to Video | 10:23 |
71 | #7.4 Protecting Video Routes | 08:25 |
72 | #8.0 Starting the Video Player | 12:27 |
73 | #8.1 Play Pause Functionallity | 11:52 |
74 | #8.2 Mute Unmute | 08:22 |
75 | #8.3 Enter Fullscreen Exit Fullscreen | 11:44 |
76 | #8.4 Total Time and Current Time | 12:33 |
77 | #8.5 Volume Bar part One | 09:26 |
78 | #8.6 Volume Bar part Two | 09:51 |
79 | #9.0 Getting User Media | 13:32 |
80 | #9.1 Recording Video part One | 09:54 |
81 | #9.2 Recording video part Two | 13:03 |
82 | #10.0 API Registering a View part One | 12:25 |
83 | #10.1 API Registering a View part Two | 08:39 |
84 | #10.2 API Adding a Comment part One | 09:05 |
85 | #10.3 API Adding a Comment part Two | 09:37 |
86 | #10.4 API Adding a Comment part Three | 09:21 |
87 | #10.5 Conclusions | 03:29 |
88 | #11.0 Introduction to AWS S3 | 09:17 |
89 | #11.1 Multer Uploads to AWS S3 | 13:28 |
90 | #11.2 Blob Duration Bug | 06:43 |
91 | #11.3 Migrating the DB to MongoLab | 06:24 |
92 | #11.3.1 MongoLab is Dead Update | 08:00 |
93 | #11.4 Building for Production | 13:01 |
94 | #11.5 Deploying to Heroku part One | 10:44 |
95 | #11.6 Deploying to Heroku part Two | 05:36 |
96 | #11.7 Flash Messages part One | 09:51 |
97 | #11.8 Flash Messages part Two | 13:02 |
98 | #11.10 Intro to Prisma part One | 09:54 |
99 | #11.11 Intro to Prisma part Two | 14:23 |
Similar courses to Youtube clone
![Learn Node](https://cdn.courseflix.net/courses/100x56/learn-node.jpg)
Learn Node
Duration 9 hours 52 minutes 53 seconds
Course
![MERN Stack Web Development with Ultimate Authentication](https://cdn.courseflix.net/courses/100x56/mern-stack-web-development-with-ultimate-authentication.jpg)
MERN Stack Web Development with Ultimate Authentication
Duration 9 hours 24 minutes 59 seconds
Course
![Node with React: Fullstack Web Development](https://cdn.courseflix.net/courses/100x56/node-with-react-fullstack-web-development.jpg)
Node with React: Fullstack Web Development
Duration 25 hours 36 minutes 19 seconds
Course
![JavaScript: Understanding the Weird Parts](https://cdn.courseflix.net/courses/100x56/javascript-understanding-the-weird-parts.jpg)
JavaScript: Understanding the Weird Parts
Duration 12 hours 10 minutes 48 seconds
Course
![Test Driven Development with Node js](https://cdn.courseflix.net/courses/100x56/test-driven-development-with-node-js.jpg)
Test Driven Development with Node js
Duration 22 hours 5 minutes 3 seconds
Course
![20 Web Projects With Vanilla JavaScript](https://cdn.courseflix.net/courses/100x56/20-web-projects-with-vanilla-javascript.jpg)
20 Web Projects With Vanilla JavaScript
Duration 16 hours 8 minutes 55 seconds
Course
![Zero to Full Stack Hero](https://cdn.courseflix.net/courses/100x56/zero-to-full-stack-hero.jpg)
Zero to Full Stack Hero
Duration 101 hours 29 minutes 59 seconds
Course
![Crash Course: Build a Full-Stack Web App in a Weekend!](https://cdn.courseflix.net/courses/100x56/crash-course-build-a-full-stack-web-app-in-a-weekend.jpg)
Crash Course: Build a Full-Stack Web App in a Weekend!
Duration 12 hours 13 minutes 30 seconds
Course
![The Node.js Master Class - No Frameworks, No NPM | Node v8.x](https://cdn.courseflix.net/courses/100x56/the-node-js-master-class-no-frameworks-no-npm-node-v8-x.jpg)
The Node.js Master Class - No Frameworks, No NPM | Node v8.x
Duration 15 hours 24 minutes 23 seconds
Course
![Build Incredible Chatbots](https://cdn.courseflix.net/courses/100x56/build-incredible-chatbots.jpg)
Build Incredible Chatbots
Duration 7 hours 51 minutes
Course