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"
    ]
  }
}

i am also facing this error

i am also facing this error

please send your error photos and scourceCode

let me check!!

been getting this error but stopped once I put the "X-RapidAPI-Key" as it is
"X-RapidAPI-Key": process.env.REACT_APP_RAPID_API_KEY, this one gave me 403 errors (not error but errors )
but using it as it is was better no errors

My Component is not generating the array of videos, it's showing a status of 403 and 429

help?

My Component is not generating the array of videos, it's showing a status of 403 and 429

same happens with me brother...if you find the solution please let me know.

Getting a "Request failed with status code 403 " eeror, even with exact Base URL and my own api key from Rapid API

Any solutions please

brother if you find the solution of this then please let me know because i am also facing this error

You will check rapid api and Solve this problem.i am also fetching this error and I will resolve this error

been getting this error but stopped once I put the "X-RapidAPI-Key" as it is "X-RapidAPI-Key": process.env.REACT_APP_RAPID_API_KEY, this one gave me 403 errors (not error but errors ) but using it as it is was better no errors

if you are quoting your API key as a string then remove that single or double commas in env file I hope it will resolve the problem and if they don't then copy the fetchfromAPI file from this project and paste it into yours

'X-RapidAPI-Host': 'youtube-v31.p.rapidapi.com'

I am using Vite and it says process unidentified

Same using vite also says to me Process is undefined .

this is an imorting problem you can define categories object in component were you want to use it ok

'X-RapidAPI-Host': 'youtube-v31.p.rapidapi.com'

I am using Vite and it says process unidentified

Did you find any solution of this ?

Getting a "Request failed with status code 403 " eeror, even with exact Base URL and my own api key from Rapid API
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

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