DEV Community

Cover image for Full Stack Youtube Clone (5 hours free tutorial)

Posted on

Full Stack Youtube Clone (5 hours free tutorial)

Hi friends, I'm Safak. I am a full-stack web developer and I'm sharing open source web projects on my dev blog and their tutorials on my YouTube channel. I've shared 3 full-stack projects so far and I want to share my 5 hours "Full Stack Video Sharing App" tutorial for free. You can find the playlist here.

What technologies are used?


Node.js Express Framework


MongoDB, Firebase


JWT, Cookies, Firebase Google Auth

Front-End Framework:

React.js with hooks

UI library:

Styled Components

State Management Library:


File Storage:

Firebase Storage

Design Part of the Video Sharing App

In this part, I've designed a YouTube-like video sharing app using React.js functional components, hooks and Styled Components. For the layout I preferred using Flexbox.

The app includes 4 pages and 7 small components.

  • src
    • pages
      • Home.jsx
      • Search.jsx
      • Video.jsx
      • SignIn.jsx
    • components
      • Card.jsx
      • Comments.jsx
      • Comment.jsx
      • Menu.jsx
      • Navbar.jsx
      • Recommendation.jsx
      • Upload.jsx

Full Stack Part of the Youtube Clone

In this part of the video, I've created an API using Node.js Express server with a MongoDB connection. Then created necessary models, routes and controllers in order to handle CRUD operations.

  • root
    • models
      • User.model.js
      • Video.model.js
      • Comment.model.js
    • routes
      • auth.js
      • users.js
      • videos.js
      • comments.js
    • controllers
      • auth.controller.js
      • user.controller.js
      • video.controller.js
      • comment.controller.js

As you realize, there is an additional route and controller to take care of user authentication. To provide a security I've used bcryptjs and JWT library with cookies in the auth controller.

export const signin = async (req, res, next) => {
  try {
    const user = await User.findOne({ name: });
    if (!user) return next(createError(404, "User not found!"));

    const isCorrect = await, user.password);

    if (!isCorrect) return next(createError(400, "Wrong Credentials!"));

    const token = jwt.sign({ id: user._id }, process.env.JWT);
    const { password, ...others } = user._doc;

      .cookie("access_token", token, {
        httpOnly: true,
  } catch (err) {
Enter fullscreen mode Exit fullscreen mode

And finally, I've combined the API with the UI Design in order to make the application dynamic. To fetch data and make other API requests axios was used and to handle state management, I preferred using redux-toolkit.

I hope it was useful. If you want to learn more about web development and practice with real-world projects, you can check out my channel and other posts.

Other Posts

🛍️ Full Stack E-Commerce App (+8 Hours free tutorial)
📺 Full Stack Netflix App (+7 Hours free tutorial)
🧑‍🤝‍🧑 Full Stack Social Media App (+7 Hours free tutorial)

Lama Dev

🔥 Lama Dev YouTube Channel
⚡️ Lama Dev Facebook
👾 Source Code

Top comments (5)

andrewbaisden profile image
Andrew Baisden

Amazing tutorial well done!

paras231 profile image

awesome lama dev

cornblakes profile image

Looks great <3

abhishekrajputweb profile image

That's for sharing very helpful 🙂

tsukuyomi808 profile image
Froilan Abellanosa

This looks Awesome! 👍