Youtube Clone Frontend
NOTE: As of 10-06-2022 at 20:00 IST, I am archiving this repository. It was fun while it lasted.
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
Core packages
- Redux - State Management
- React Router - Routing
- Styling - Styled Components
- Toast Notifications - React Toastify
- Network calls - Axios
- 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
- Login/Signup
- Upload video
- Search video by channel name
- Search video by title, description
- Like/Dislike video
- Subscribe/Unsubscribe from channels
- Add comment
- Edit profile (avatar, cover)
- Liked videos
- History
Running locally
At the root of your project create an .env file with the following contents:
# BE stands for Backend Endpoint
REACT_APP_BE=<YOUR_BACKEND_ENDPOINT> # eg: http://localhost:5000/api/v1
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
For more detailed instructions, click here
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