Full Stack Youtube Clone (5 hours free tutorial)
Tags: react, javascript, webdev, node
Published: 2022-07-17 11:35:59

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](https://youtube.com/playlist?list=PLj-4DlPRT48mDB819AYgn3mQoTfCuheCX). 
___
##What technologies are used?
#####Backend:
Node.js Express Framework
#####Database:
MongoDB, Firebase
#####Auth:
JWT, Cookies, Firebase Google Auth
#####Front-End Framework:
React.js with hooks
#####UI library:
Styled Components
#####State Management Library:
Redux
#####File Storage:
Firebase Storage
___

## Design Part of the Video Sharing App
{% youtube yIaXoop8gl4 %}
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
{% youtube CCF-xV3RSSs %}
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.

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

    const isCorrect = await bcrypt.compare(req.body.password, 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;

    res
      .cookie("access_token", token, {
        httpOnly: true,
      })
      .status(200)
      .json(others);
  } catch (err) {
    next(err);
  }
};
```

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 Dev.to Posts
🛍️ [Full Stack E-Commerce App (+8 Hours free tutorial)](https://dev.to/safak/full-stack-e-commerce-app-8-hours-free-tutorial-10pb)
📺 [Full Stack Netflix App (+7 Hours free tutorial)](https://dev.to/safak/full-stack-netflix-app-7-hours-free-tutorial-1o6l)
🧑‍🤝‍🧑 [Full Stack Social Media App (+7 Hours free tutorial)](https://dev.to/safak/social-media-app-using-mern-stack-4ic6)

######Lama Dev
🔥 [Lama Dev YouTube Channel](https://www.youtube.com/c/lamadev)
⚡️ [Lama Dev Facebook](https://www.facebook.com/groups/lamadev)
👾 [Source Code](https://github.com/safak/youtube2022/tree/fullstack-youtube-clone)