All Projects → manikandanraji → Youtubeclone Frontend

manikandanraji / Youtubeclone Frontend

Licence: mit
Youtube Clone Frontend (React + Redux)

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

Projects that are alternatives of or similar to Youtubeclone Frontend

Prettyembed.js
Prettier embeds for your YouTubes - with nice options like high-res preview images, advanced customization of embed options, and optional FitVids support.
Stars: ✭ 1,078 (-7.15%)
Mutual labels:  youtube
Live Chat Overlay
Restyle the YouTube "popout chat" window so you can key it over a video to show comments on a livestream
Stars: ✭ 59 (-94.92%)
Mutual labels:  youtube
Youtubeexplode.converter
Muxes and converts videos from YoutubeExplode
Stars: ✭ 68 (-94.14%)
Mutual labels:  youtube
Ubo Youtube
Easier way to exempt your favorite YouTube channels from adblocking.
Stars: ✭ 57 (-95.09%)
Mutual labels:  youtube
Youtube In Background
YiB is an Android app, which extracts audio from YouTube videos and plays them in background.
Stars: ✭ 58 (-95%)
Mutual labels:  youtube
Musicbot
🎶 A Discord music bot that's easy to set up and run yourself!
Stars: ✭ 1,109 (-4.48%)
Mutual labels:  youtube
Keyring
Keyring is an authentication framework for WordPress. It comes with definitions for a variety of HTTP Basic, OAuth1 and OAuth2 web services. Use it as a common foundation for working with other web services from within WordPress code.
Stars: ✭ 52 (-95.52%)
Mutual labels:  youtube
Hitomi Downloader
🍰 Desktop application to download images/videos/music/text from Hitomi.la and other sites, and more.
Stars: ✭ 1,154 (-0.6%)
Mutual labels:  youtube
Rey
RE-imagined Youtube music player for web (& desktop)
Stars: ✭ 59 (-94.92%)
Mutual labels:  youtube
Spotify Onthego
Download Spotify playlists by searching for audio files on YouTube
Stars: ✭ 66 (-94.32%)
Mutual labels:  youtube
Youtube Play Icon
Material style morphing play-pause drawable for Android
Stars: ✭ 57 (-95.09%)
Mutual labels:  youtube
Russia It Podcast
Список русскоязычных подкастов на тему информационных технологий
Stars: ✭ 1,095 (-5.68%)
Mutual labels:  youtube
Go Videos Ru
Каталог докладов, лекций и других видеоматериалов по Go
Stars: ✭ 64 (-94.49%)
Mutual labels:  youtube
Serie Api Rest Node
Código da série de API REST com NodeJS no Youtube
Stars: ✭ 55 (-95.26%)
Mutual labels:  youtube
Youtube ads 4 pi Hole
YouTube script to add the new Ads list for Pi-hole
Stars: ✭ 1,151 (-0.86%)
Mutual labels:  youtube
Skip Ad
A simple lightweight Chrome extension that automatically skips YouTube Ads.
Stars: ✭ 54 (-95.35%)
Mutual labels:  youtube
Streamly
Portable, independent, web-based, simple streaming YouTube video queues and playlists for music videos, audiobooks, etc.
Stars: ✭ 60 (-94.83%)
Mutual labels:  youtube
Splashloginsignup
Source code for the Splash, Login and Signup Screen for Android | UI to Code - Timelapse YouTube Video
Stars: ✭ 69 (-94.06%)
Mutual labels:  youtube
Automator
Various Automator and AppleScript workflow and scripts for simplifying life
Stars: ✭ 68 (-94.14%)
Mutual labels:  youtube
Spotivy
🎼 Download music videos from Spotify playlists
Stars: ✭ 64 (-94.49%)
Mutual labels:  youtube

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:

# 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

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].