Skip to content

Instantly share code, notes, and snippets.

@adrianhajdin

adrianhajdin/constants.js

Created August 26, 2022 11:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save adrianhajdin/9725da94fa1f08c9668d856d3c94dd47 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save adrianhajdin/9725da94fa1f08c9668d856d3c94dd47 to your computer and use it in GitHub Desktop.
Download ZIP
Build and Deploy a Modern YouTube Clone Application in React JS with Material UI 5
Raw
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'
Raw
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;
}
}
Raw
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"
]
}
}
@mrshri
Copy link

mrshri commented Feb 10, 2024

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

@AakashRam70
Copy link

AakashRam70 commented Feb 14, 2024

error
BRO NOT WORKING PLEASE HELP ME

@AakashRam70
Copy link

AakashRam70 commented Feb 14, 2024

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

@AakashRam70
Copy link

AakashRam70 commented Feb 14, 2024

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'

@prasanth2103
Copy link

prasanth2103 commented Feb 27, 2024

![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

@AnhTuanVip
Copy link

AnhTuanVip commented Feb 29, 2024

image
image
please help me, i need help!

@nikola-tk2system
Copy link

nikola-tk2system commented Apr 5, 2024 •
edited
Loading

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

@sparsh-sharma12
Copy link

sparsh-sharma12 commented Apr 11, 2024

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

@Arteinsana7
Copy link

Arteinsana7 commented Jul 4, 2024

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!

@ard0103
Copy link

ard0103 commented Jul 17, 2024

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

i am also facing same issue

@05Ashutosh
Copy link

05Ashutosh commented Jul 25, 2024

I m facing some isue can anyone help me resolve it
Screenshot_2024-07-25_23_25_17

@hassan1818
Copy link

hassan1818 commented Oct 3, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment