https://github.com/abej-rijwi/react-youtube-clone
Build and Deploy a Modern YouTube Clone Application in React JS with Material UI 5
https://github.com/abej-rijwi/react-youtube-clone
material-ui react reactjs
Last synced: about 2 months ago
JSON representation
Build and Deploy a Modern YouTube Clone Application in React JS with Material UI 5
- Host: GitHub
- URL: https://github.com/abej-rijwi/react-youtube-clone
- Owner: Abej-Rijwi
- Created: 2025-06-29T15:58:43.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-07-04T17:48:33.000Z (11 months ago)
- Last Synced: 2025-07-18T06:34:17.302Z (11 months ago)
- Topics: material-ui, react, reactjs
- Language: JavaScript
- Homepage: https://react-youtube-clone-rho.vercel.app/
- Size: 302 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Full Stack YouTube Clone
Build this project step by step with our detailed tutorial on JavaScript Tutorial YouTube. Join the JSM family!
## 📋 Table of Contents
1. 🤖 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🤸 [Quick Start](#quick-start)
## 🚨 Tutorial
This repository contains the code corresponding to an in-depth tutorial available on our YouTube
channel, JavaScript Tutorial.
If you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects
like these step-by-step in a beginner-friendly manner!
Welcome to the YouTube Clone – a fully responsive and interactive web application built using React JS. This project replicates core features of YouTube, including video browsing, search functionality, video playback, and channel information.
- React
- Axios
- Rapid API
- TailwindCSS
- Material UI
- React Router DOM
## 🔋 Features
👉 **Homepage Feed**: Displays trending and category-based videos fetched via YouTube API.
👉 **Video Playback Page**: Responsive video player with title, description, views, likes, and comments section.
👉 **Search Functionality**: Real-time video search with instant result updates.
👉 **Channel Pages**: Dedicated pages showing channel info and all uploaded videos.
👉 **Related Videos Sidebar**: Suggests similar videos alongside the current one.
👉 **Responsive Design**: Optimized for desktops, tablets, and mobile devices.
👉 **Routing with React Router**: Smooth page navigation using client-side routing.
👉 **API Integration**: Powered by RapidAPI’s YouTube Data API v3.
👉 **Material UI Components**: Clean and modern user interface with consistent styling.
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Cloning the Repository**
```bash
git clone https://github.com/Abej-Rijwi/react-youtube-clone.git
cd react-youtube-clone
```
**Installation**
Install the project dependencies using npm:
```bash
npm install
```
**Set Up Environment Variables**
Create a new file named `.env` in the root of your project and add the following content:
```env
REACT_APP_RAPID_API_KEY=
REACT_APP_YOUTUBE_API_KEY=
ESLINT_NO_DEV_ERRORS=true
```
Replace the placeholder values with your actual credentials. You can obtain these credentials by signing up on the corresponding websites from [Rapid API You-Tube Search](https://rapidapi.com/h0p3rwe/api/youtube-search-and-download) to [Rapid API You-Tube v311](https://rapidapi.com/Glavier/api/youtube-v311/)
**Running the Project**
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.