Youtube Clone Frontend

Youtube clone using PERN stack (Postgres, Express, React, Node).

This is the frontend repository, built with React + Redux. If you are looking for the backend repository, click here

Check out the deployed site

Core packages

1. Redux - State Management
2. React Router - Routing
3. Styling - Styled Components
4. Toast Notifications - React Toastify
5. Network calls - Axios
6. Video player - Videojs

Video uploads

I am using cloudinary for hosting videos and the thumbnails are generated automatically once we upload the video to cloudinary

Features

1. Login/Signup
2. Upload video
3. Search video by channel name
4. Search video by title, description
5. Like/Dislike video
6. Subscribe/Unsubscribe from channels
7. Add comment
8. Edit profile (avatar, cover)
9. Liked videos
10. History

Running locally

At the root of your project create an .env file with the following contents:

REACT_APP_BACKEND_URL=<YOUR_BACKEND_URL>
REACT_APP_CLOUDINARY_ENDPOINT=https://api.cloudinary.com/v1_1/<YOUR_CLOUD_NAME>

Then run npm i and npm start to see the youtube clone in action

Watch the Demo

UI

Home

Trending

Watch

Suggestions

Channel

Edit Profile

Library

Search

My Clone Trilogy

With this clone, I am finishing what I call 'my clone trilogy'. If you are interested, you can visit my other clones that are part of this trilogy

1. Twitter

   • Frontend
   • Backend

2. Instagram

   • Frontend
   • Backend