Build and Deploy a Modern YouTube Clone Application in React JS with Material UI 5

constants.js

import MusicNoteIcon from '@mui/icons-material/MusicNote';
import HomeIcon from '@mui/icons-material/Home';
import CodeIcon from '@mui/icons-material/Code';
import OndemandVideoIcon from '@mui/icons-material/OndemandVideo';
import SportsEsportsIcon from '@mui/icons-material/SportsEsports';
import LiveTvIcon from '@mui/icons-material/LiveTv';
import SchoolIcon from '@mui/icons-material/School';
import FaceRetouchingNaturalIcon from '@mui/icons-material/FaceRetouchingNatural';
import CheckroomIcon from '@mui/icons-material/Checkroom';
import GraphicEqIcon from '@mui/icons-material/GraphicEq';
import TheaterComedyIcon from '@mui/icons-material/TheaterComedy';
import FitnessCenterIcon from '@mui/icons-material/FitnessCenter';
import DeveloperModeIcon from '@mui/icons-material/DeveloperMode';

export const logo = 'https://i.ibb.co/s9Qys2j/logo.png';

export const categories = [
  { name: 'New', icon: <HomeIcon />, },
  { name: 'JS Mastery', icon: <CodeIcon />, },
  { name: 'Coding', icon: <CodeIcon />, },
  { name: 'ReactJS', icon: <CodeIcon />, },
  { name: 'NextJS', icon: <CodeIcon />, },
  { name: 'Music', icon: <MusicNoteIcon /> },
  { name: 'Education', icon: <SchoolIcon />, },
  { name: 'Podcast', icon: <GraphicEqIcon />, },
  { name: 'Movie', icon: <OndemandVideoIcon />, },
  { name: 'Gaming', icon: <SportsEsportsIcon />, },
  { name: 'Live', icon: <LiveTvIcon />, },
  { name: 'Sport', icon: <FitnessCenterIcon />, },
  { name: 'Fashion', icon: <CheckroomIcon />, },
  { name: 'Beauty', icon: <FaceRetouchingNaturalIcon />, },
  { name: 'Comedy', icon: <TheaterComedyIcon />, },
  { name: 'Gym', icon: <FitnessCenterIcon />, },
  { name: 'Crypto', icon: <DeveloperModeIcon />, },
];

export const demoThumbnailUrl = 'https://i.ibb.co/G2L2Gwp/API-Course.png';
export const demoChannelUrl = '/channel/UCmXmlB4-HJytD7wek0Uo97A';
export const demoVideoUrl = '/video/GDa8kZLNhJ4';
export const demoChannelTitle = 'JavaScript Mastery';
export const demoVideoTitle = 'Build and Deploy 5 JavaScript & React API Projects in 10 Hours - Full Course | RapidAPI';
export const demoProfilePicture = 'http://dergipark.org.tr/assets/app/images/buddy_sample.png'

index.css

html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: black;
}

::-webkit-scrollbar {
  width: 0px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(114, 113, 113);
  border-radius: 10px;
  height: 200px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

.category-btn:hover {
  background-color: #FC1503 !important;
  color: white !important;
}

.category-btn:hover span{
  color: white !important;
}

.react-player {
  height: 77vh !important;
  width: 100% !important;
}

.search-bar{
  border:none;
  outline:none;
  width:350px;
}

.category-btn{
  font-weight: bold !important;
  text-transform: capitalize;
  display: flex;
  align-items: center;
  justify-content: start;
  cursor:pointer;
  background: transparent;
  outline: none;
  border: none;

  padding: 7px 15px;
  margin: 10px 0px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

@media screen and (max-width: 900px) {
  .category-btn{
    margin: 10px;
  }
}

@media screen and (max-width:800px){
  .copyright{
    display:none !important;
  }
}

@media screen and (max-width: 600px) {
  .scroll-horizontal {
    overflow: auto !important;
  }

  .react-player {
    height: 45vh !important;
  }
  .search-bar{
    width:200px;
  }
}

package.json

{
  "name": "project_youtube_video_player",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.9.3",
    "axios": "^0.27.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-player": "^2.10.1",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

If you are new in coding always to build newer project that published on YouTube this will help you lot to boost your confidence

…

On Sun, 12 Nov, 2023, 11:58 am MONIKA_KUMARI, ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Getting a "Request failed with status code 403 " eeror, even with exact Base URL and my own api key from Rapid API [image: Screenshot 2023-04-24 215527] <https://user-images.githubusercontent.com/73063741/234057474-7cb3d9d4-8acf-4fd2-a11f-e671fc0f1b21.png> Any solutions please brother if you find the solution of this then please let me know because i am also facing this error replace the env file and use the api key directly — Reply to this email directly, view it on GitHub <https://gist.github.com/adrianhajdin/9725da94fa1f08c9668d856d3c94dd47#gistcomment-4758018> or unsubscribe <https://github.com/notifications/unsubscribe-auth/A47YUNWT2MSICPJ3SEI3XVLYEBT67BFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTCOBQGMYDCOBTU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

Actually i was using commas for holding url but they are backticks so try holding the url in backticks maybe you find the solution

…

On Sun, Nov 12, 2023, 11:27 AM MONIKA_KUMARI ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Getting a "Request failed with status code 403 " eeror, even with exact Base URL and my own api key from Rapid API [image: Screenshot 2023-04-24 215527] <https://user-images.githubusercontent.com/73063741/234057474-7cb3d9d4-8acf-4fd2-a11f-e671fc0f1b21.png> Any solutions please brother if you find the solution of this then please let me know because i am also facing this error replace the env file and use the api key directly — Reply to this email directly, view it on GitHub <https://gist.github.com/adrianhajdin/9725da94fa1f08c9668d856d3c94dd47#gistcomment-4758018> or unsubscribe <https://github.com/notifications/unsubscribe-auth/A4D2YINJC73MNSV3VZZ5LSDYEBT67BFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTCOBQGMYDCOBTU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

i faced the same issue with the env file. Had to put the API key directly

check your version which your using in code are update or match according to youtube tutorial

And if i dont use env file and directly add the key, it works fine.

What could be the error ?

i face the same issue with enve file.

And if i dont use env file and directly add the key, it works fine.

What could be the error ?

Please help me to solve this error.

How did you fix it ?, please help me

Please help me to solve this error.

How did you fix it ?, please help me

the problem is in the .env file and i had to move api key outside the env file to direct to the code itself

while fetching data for channelDetail I am getting the id value undefined

BRO NOT WORKING PLEASE HELP ME

import { Stack } from "@mui/material";
import { categories } from "../utils/constants";

const selectedCategory = "New";

const Sidebar = () => (
<Stack
direction="row"
sx={{
overflowY: 'auto',
height: { sx: 'auto', md: '95%'},
flexDirection: { md: 'column' },
}}
>
{categories.map((category) =>(

{category.icon}
{category.name}

))}

</Stack>

)
MY CODE

import MusicNoteIcon from '@mui/icons-material/MusicNote';
import HomeIcon from '@mui/icons-material/Home';
import CodeIcon from '@mui/icons-material/Code';
import OndemandVideoIcon from '@mui/icons-material/OndemandVideo';
import SportsEsportsIcon from '@mui/icons-material/SportsEsports';
import LiveTvIcon from '@mui/icons-material/LiveTv';
import SchoolIcon from '@mui/icons-material/School';
import FaceRetouchingNaturalIcon from '@mui/icons-material/FaceRetouchingNatural';
import CheckroomIcon from '@mui/icons-material/Checkroom';
import GraphicEqIcon from '@mui/icons-material/GraphicEq';
import TheaterComedyIcon from '@mui/icons-material/TheaterComedy';
import FitnessCenterIcon from '@mui/icons-material/FitnessCenter';
import DeveloperModeIcon from '@mui/icons-material/DeveloperMode';

export const logo = 'https://i.ibb.co/s9Qys2j/logo.png';

export const categories = [
{ name: 'New', icon: , },
{ name: 'JS Mastery', icon: , },
{ name: 'Coding', icon: , },
{ name: 'ReactJS', icon: , },
{ name: 'NextJS', icon: , },
{ name: 'Music', icon: },
{ name: 'Education', icon: , },
{ name: 'Podcast', icon: , },
{ name: 'Movie', icon: , },
{ name: 'Gaming', icon: , },
{ name: 'Live', icon: , },
{ name: 'Sport', icon: , },
{ name: 'Fashion', icon: , },
{ name: 'Beauty', icon: , },
{ name: 'Comedy', icon: , },
{ name: 'Gym', icon: , },
{ name: 'Crypto', icon: , },
];

export const demoThumbnailUrl = 'https://i.ibb.co/G2L2Gwp/API-Course.png';
export const demoChannelUrl = '/channel/UCmXmlB4-HJytD7wek0Uo97A';
export const demoVideoUrl = '/video/GDa8kZLNhJ4';
export const demoChannelTitle = 'JavaScript Mastery';
export const demoVideoTitle = 'Build and Deploy 5 JavaScript & React API Projects in 10 Hours - Full Course | RapidAPI';
export const demoProfilePicture = 'http://dergipark.org.tr/assets/app/images/buddy_sample.png'

![Untitled](https://user-images.githubusercontent.com/83503804/237677622-5fca3353-3ec5-4f96-9990-3bf85f2d1504.png
instead of using saperate env file give the api key there itself it will work fine

please help me, i need help!

I have fixed some errors when i changed the url link FROM THIS

url: 'https://youtube-v31.p.rapidapi.com/captions',

TO THINS ==========================

const BASE_URL = "https://youtube-v31.p.rapidapi.com";

this is in fetchFromAPI.jsx file

Thank you, I edited it successfully. I get an error because, in my URL, there is still a 'search'

how u solve this error can u tell me bro

Hello, I am finding an error css mistake and I just can not see what is the problem, the cards appear not align in my browser, well, in somme channels the cards are align an centered and in other channels it just doesn't, I have try to play around the css but then the channel card move around and is a litle bit messy, I try for very long and I wanted to ask some help.

Thanks!

while fetching data for channelDetail I am getting the id value undefined

i am also facing same issue

I m facing some isue can anyone help me resolve it

If any one is facing issue just remove the key from .env file and leave it as it was in fetchFromApi.js file