Full Stack Youtube Clone (5 hours free tutorial)

#react #javascript #webdev #node

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?

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

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: 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.