dreamyguy / youtubeclone-frontend

Youtube Clone Frontend (React + Redux)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

Video

UI

Home

Home

Trending

Trending

Watch

Watch

Suggestions

Suggestions

Channel

Trending

Edit Profile

Edit Profile

Trending

Library

Library

Search

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

  2. Instagram

About

Youtube Clone Frontend (React + Redux)

License:MIT License


Languages

Language:JavaScript 99.3%Language:HTML 0.7%