├── screenshots
    ├── Readme.md
    ├── first.PNG
    ├── second.PNG
    └── third.PNG
├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── src
    ├── index.js
    ├── Components
    │   ├── Loader.jsx
    │   ├── Navbar.jsx
    │   ├── index.js
    │   ├── Videos.jsx
    │   ├── SearchFeed.jsx
    │   ├── Sidebar.jsx
    │   ├── SearchBar.jsx
    │   ├── Feed.jsx
    │   ├── ChannelDetail.jsx
    │   ├── VideoCard.jsx
    │   ├── ChannelCard.jsx
    │   └── VideoDetail.jsx
    ├── Utils
    │   ├── fetchFromAPI.js
    │   └── Constants.js
    ├── App.js
    └── index.css
├── README.md
├── .gitignore
└── package.json


/screenshots/Readme.md:
--------------------------------------------------------------------------------
1 | images
2 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chandran-jr/YouTubeRapidAPI/main/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chandran-jr/YouTubeRapidAPI/main/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chandran-jr/YouTubeRapidAPI/main/public/logo512.png


--------------------------------------------------------------------------------
/screenshots/first.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chandran-jr/YouTubeRapidAPI/main/screenshots/first.PNG


--------------------------------------------------------------------------------
/screenshots/second.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chandran-jr/YouTubeRapidAPI/main/screenshots/second.PNG


--------------------------------------------------------------------------------
/screenshots/third.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chandran-jr/YouTubeRapidAPI/main/screenshots/third.PNG


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM  from 'react-dom/client';
3 | import App from './App';
4 | import './index.css'
5 | 
6 | const root = ReactDOM.createRoot(document.getElementById('root'));
7 | 
8 | root.render(<App/>);


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # YouTube RapidAPI App
2 | ## A cool YouTube clone built using React.js and Material UI for frontend, and RapidAPI for youtube api calls, integrated with various endpoints, search functionality, and different UIs.
3 | 
4 | <img src="screenshots/first.PNG" />
5 | <img src="screenshots/second.PNG" />
6 | <img src="screenshots/third.PNG" />
7 | 


--------------------------------------------------------------------------------
/src/Components/Loader.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, CircularProgress, Stack } from '@mui/material';
 3 | 
 4 | const Loader = () =>  (
 5 |   <Box minHeight="95vh">
 6 |     <Stack direction='row' justifyContent='center' alignItems='center' height='80vh' >
 7 |       <CircularProgress />
 8 |     </Stack>
 9 |   </Box>
10 | );
11 | 
12 | export default Loader;


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/Utils/fetchFromAPI.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | 
 3 | export const BASE_URL = 'https://youtube-v31.p.rapidapi.com';
 4 | 
 5 | const options = {
 6 |   method: 'GET',
 7 |   url: BASE_URL,
 8 |   params: {
 9 |     maxResults: '50'
10 |   },
11 |   headers: {
12 |     'X-RapidAPI-Key': 'PUT YOUR API KEY HERE',
13 |     'X-RapidAPI-Host': 'youtube-v31.p.rapidapi.com'
14 |   }
15 | };
16 | 
17 | export const fetchFromAPI = async (url) => {
18 |   const { data } = await axios.get(`${BASE_URL}/${url}`, options);
19 | 
20 |   return data;
21 | }; 
22 | 


--------------------------------------------------------------------------------
/src/Components/Navbar.jsx:
--------------------------------------------------------------------------------
 1 | import { Stack } from "@mui/material";
 2 | import { Link } from "react-router-dom";
 3 | 
 4 | import { logo } from "../Utils/Constants";
 5 | import { SearchBar } from "./";
 6 | 
 7 | const Navbar = () => (
 8 |   <Stack direction="row" alignItems="center" p={2} sx={{ position:  "sticky", background: '#000', top: 0, justifyContent: "space-between" }}>
 9 |     <Link to="/" style={{ display: "flex", alignItems: "center" }}>
10 |       <img src={logo} alt="logo" height={45} />
11 |     </Link>
12 |     <SearchBar />
13 |   </Stack>
14 | );
15 | 
16 | export default Navbar;


--------------------------------------------------------------------------------
/src/Components/index.js:
--------------------------------------------------------------------------------
 1 | export { default as ChannelCard } from './ChannelCard';
 2 | export { default as VideoCard } from './VideoCard';
 3 | export { default as ChannelDetail } from './ChannelDetail';
 4 | export { default as Feed } from './Feed';
 5 | export { default as Loader } from './Loader';
 6 | export { default as Navbar } from './Navbar';
 7 | export { default as SearchBar } from './SearchBar';
 8 | export { default as VideoDetail } from './VideoDetail';
 9 | export { default as SearchFeed } from './SearchFeed';
10 | export { default as Videos } from './Videos';
11 | export { default as Sidebar } from './Sidebar';


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/Components/Videos.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Stack, Box } from "@mui/material";
 3 | 
 4 | import { ChannelCard, Loader, VideoCard } from "./";
 5 | 
 6 | const Videos = ({ videos, direction }) => {
 7 |   if(!videos?.length) return <Loader />;
 8 |   
 9 |   return (
10 |     <Stack direction={direction || "row"} flexWrap="wrap" justifyContent="start" alignItems="start" gap={2}>
11 |       {videos.map((item, idx) => (
12 |         <Box key={idx}>
13 |           {item.id.videoId && <VideoCard video={item} /> }
14 |           {item.id.channelId && <ChannelCard channelDetail={item} />}
15 |         </Box>
16 |       ))}
17 |     </Stack>
18 |   );
19 | }
20 | 
21 | export default Videos;


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { BrowserRouter, Routes, Route } from 'react-router-dom';
 3 | import {Box} from '@mui/material';
 4 | import {Navbar, Feed,  ChannelDetail, VideoDetail, SearchFeed} from './Components';
 5 | 
 6 | const App = () => (
 7 |     <BrowserRouter>
 8 | 
 9 |         <Box sx={{ backgroundColor: '#000' }}>
10 |             <Navbar/>
11 |             <Routes>
12 |                 <Route path="/" exact element={<Feed/>} />
13 |                 <Route path="/video/:id" element={<VideoDetail/>} />
14 |                 <Route path="/channel/:id" element={<ChannelDetail/>} />
15 |                 <Route path="/search/:searchTerm" element={<SearchFeed/>} />
16 |             </Routes>
17 |         </Box>
18 | 
19 |     </BrowserRouter>
20 |   
21 | )
22 | 
23 | export default App


--------------------------------------------------------------------------------
/src/Components/SearchFeed.jsx:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from "react";
 2 | import { Typography, Box } from "@mui/material";
 3 | import { useParams } from "react-router-dom";
 4 | 
 5 | import { fetchFromAPI } from "../Utils/fetchFromAPI";
 6 | import { Videos } from "./";
 7 | 
 8 | const SearchFeed = () => {
 9 |   const [videos, setVideos] = useState(null);
10 |   const { searchTerm } = useParams();
11 | 
12 |   useEffect(() => {
13 |     fetchFromAPI(`search?part=snippet&q=${searchTerm}`)
14 |       .then((data) => setVideos(data.items))
15 |   }, [searchTerm]);
16 | 
17 |   return (
18 |     <Box p={2} minHeight="95vh">
19 |       <Typography variant="h4" fontWeight={900}  color="white" mb={3} ml={{ sm: "100px"}}>
20 |         Search Results for <span style={{ color: "#FC1503" }}>{searchTerm}</span> videos
21 |       </Typography>
22 |       <Box display="flex">
23 |         <Box sx={{ mr: { sm: '100px' } }}/>
24 |         {<Videos videos={videos} />}
25 |       </Box>
26 |     </Box>
27 |   );
28 | };
29 | 
30 | export default SearchFeed;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "youtubeapi",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@emotion/react": "^11.10.0",
 7 |     "@emotion/styled": "^11.10.0",
 8 |     "@mui/icons-material": "^5.8.4",
 9 |     "@mui/material": "^5.9.3",
10 |     "axios": "^0.27.2",
11 |     "react": "^18.2.0",
12 |     "react-dom": "^18.2.0",
13 |     "react-player": "^2.10.1",
14 |     "react-router-dom": "^6.3.0",
15 |     "react-scripts": "^5.0.1"
16 |   },
17 |   "scripts": {
18 |     "start": "react-scripts start",
19 |     "build": "react-scripts build",
20 |     "test": "react-scripts test",
21 |     "eject": "react-scripts eject"
22 |   },
23 |   "eslintConfig": {
24 |     "extends": [
25 |       "react-app",
26 |       "react-app/jest"
27 |     ]
28 |   },
29 |   "browserslist": {
30 |     "production": [
31 |       ">0.2%",
32 |       "not dead",
33 |       "not op_mini all"
34 |     ],
35 |     "development": [
36 |       "last 1 chrome version",
37 |       "last 1 firefox version",
38 |       "last 1 safari version"
39 |     ]
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/Components/Sidebar.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Stack } from "@mui/material";
 3 | 
 4 | import { categories } from "../Utils/Constants";
 5 | 
 6 | const Categories = ({ selectedCategory, setSelectedCategory }) => (
 7 |   <Stack
 8 |     direction="row"
 9 |     sx={{
10 |       overflowY: "auto",
11 |       height: { sx: "auto", md: "95%" },
12 |       flexDirection: { md: "column" },
13 |     }}
14 |   >
15 |     {categories.map((category) => (
16 |       <button
17 |         className="category-btn"
18 |         onClick={() => setSelectedCategory(category.name)}
19 |         style={{
20 |           background: category.name === selectedCategory && "#FC1503",
21 |           color: "white",
22 |         }}
23 |         key={category.name}
24 |       >
25 |         <span style={{ color: category.name === selectedCategory ? "white" : "red", marginRight: "15px" }}>
26 |           {category.icon}
27 |         </span>
28 |         <span style={{ opacity: category.name === selectedCategory ? "1" : "0.8" }}>
29 |           {category.name}
30 |         </span>
31 |       </button>
32 |     ))}
33 |   </Stack>
34 | );
35 | 
36 | export default Categories;


--------------------------------------------------------------------------------
/src/Components/SearchBar.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import { useNavigate } from "react-router-dom";
 3 | import { Paper, IconButton } from '@mui/material';
 4 | import SearchIcon from '@mui/icons-material/Search';
 5 | 
 6 | const SearchBar = () => {
 7 |   const [searchTerm, setSearchTerm] = useState('');
 8 |   const navigate = useNavigate();
 9 | 
10 |   const onhandleSubmit = (e) => {
11 |     e.preventDefault();
12 | 
13 |     if (searchTerm) {
14 |       navigate(`/search/${searchTerm}`);
15 | 
16 |       setSearchTerm('');
17 |     }
18 |   };
19 | 
20 |   return (
21 |     <Paper
22 |       component='form'
23 |       onSubmit={onhandleSubmit}
24 |       sx={{
25 |         borderRadius: 20,
26 |         border: '1px solid #e3e3e3',
27 |         pl: 2,
28 |         boxShadow: 'none',
29 |         mr: { sm: 5 },
30 |       }}
31 |     >
32 |       <input
33 |         className='search-bar'
34 |         placeholder='Search...'
35 |         value={searchTerm}
36 |         onChange={(e) => setSearchTerm(e.target.value)}
37 |       />
38 |       <IconButton type='submit' sx={{ p: '10px', color: 'red' }} aria-label='search'>
39 |         <SearchIcon />
40 |       </IconButton>
41 |     </Paper>
42 |   );
43 | };
44 | 
45 | export default SearchBar;


--------------------------------------------------------------------------------
/src/Components/Feed.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import { Box, Stack, Typography } from "@mui/material";
 3 | 
 4 | import { fetchFromAPI } from "../Utils/fetchFromAPI";
 5 | import { Videos, Sidebar } from "./";
 6 | 
 7 | const Feed = () => {
 8 |   const [selectedCategory, setSelectedCategory] = useState("New");
 9 |   const [videos, setVideos] = useState(null);
10 | 
11 |   useEffect(() => {
12 |     setVideos(null);
13 | 
14 |     fetchFromAPI(`search?part=snippet&q=${selectedCategory}`)
15 |       .then((data) => setVideos(data.items))
16 |     }, [selectedCategory]);
17 | 
18 |   return (
19 |     <Stack sx={{ flexDirection: { sx: "column", md: "row" } }}>
20 |       <Box sx={{ height: { sx: "auto", md: "92vh" }, borderRight: "1px solid #3d3d3d", px: { sx: 0, md: 2 } }}>
21 |         <Sidebar selectedCategory={selectedCategory} setSelectedCategory={setSelectedCategory} />
22 |         
23 |         <Typography className="copyright" variant="body2" sx={{ mt: 1.5, color: "#fff", }}>
24 |           Copyright © 2023 Govind Chandran
25 |         </Typography>
26 |       </Box>
27 | 
28 |       <Box p={2} sx={{ overflowY: "auto", height: "90vh", flex: 2 }}>
29 |         <Typography variant="h4" fontWeight="bold" mb={2} sx={{ color: "white" }}>
30 |           {selectedCategory} <span style={{ color: "#FC1503" }}>videos</span>
31 |         </Typography>
32 | 
33 |         <Videos videos={videos} />
34 |       </Box>
35 |     </Stack>
36 |   );
37 | };
38 | 
39 | export default Feed;


--------------------------------------------------------------------------------
/src/Components/ChannelDetail.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import { useParams } from "react-router-dom";
 3 | import { Box } from "@mui/material";
 4 | 
 5 | import { Videos, ChannelCard } from "./";
 6 | import { fetchFromAPI } from "../Utils/fetchFromAPI";
 7 | 
 8 | const ChannelDetail = () => {
 9 |   const [channelDetail, setChannelDetail] = useState();
10 |   const [videos, setVideos] = useState(null);
11 | 
12 |   const { id } = useParams();
13 | 
14 |   useEffect(() => {
15 |     const fetchResults = async () => {
16 |       const data = await fetchFromAPI(`channels?part=snippet&id=${id}`);
17 | 
18 |       setChannelDetail(data?.items[0]);
19 | 
20 |       const videosData = await fetchFromAPI(`search?channelId=${id}&part=snippet%2Cid&order=date`);
21 | 
22 |       setVideos(videosData?.items);
23 |       console.log(JSON.stringify(videosData))
24 |     };
25 | 
26 |     fetchResults();
27 |   }, [id]);
28 | 
29 |   return (
30 |     <Box minHeight="95vh">
31 |       <Box>
32 |         <div style={{
33 |           height:'300px',
34 |           background: 'linear-gradient(90deg, rgba(0,238,247,1) 0%, rgba(206,3,184,1) 100%, rgba(0,212,255,1) 100%)',
35 |           zIndex: 10,
36 |         }} />
37 |         <ChannelCard channelDetail={channelDetail} marginTop="-93px" />
38 |       </Box>
39 |       <Box p={2} display="flex">
40 |       <Box sx={{ mr: { sm: '100px' } }}/>
41 |         <Videos videos={videos} />
42 |       </Box>
43 |     </Box>
44 |   );
45 | };
46 | 
47 | export default ChannelDetail;


--------------------------------------------------------------------------------
/src/Components/VideoCard.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Link } from "react-router-dom"; 
 3 | import { Typography, Card, CardContent, CardMedia } from "@mui/material";
 4 | import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 5 | 
 6 | import { demoThumbnailUrl, demoVideoUrl, demoVideoTitle, demoChannelUrl, demoChannelTitle } from "../Utils/Constants";
 7 | 
 8 | const VideoCard = ({ video: { id: { videoId }, snippet } }) => (
 9 |   <Card sx={{ width: { xs: '100%', sm: '358px', md: "320px", }, boxShadow: "none", borderRadius: 0 }}>
10 |     <Link to={videoId ? `/video/${videoId}` : `/video/cV2gBU6hKfY` }>
11 |       <CardMedia image={snippet?.thumbnails?.high?.url || demoThumbnailUrl} alt={snippet?.title} 
12 |         sx={{ width: { xs: '100%', sm: '358px'}, height: 180 }} 
13 |       />
14 |     </Link>
15 |     <CardContent sx={{ backgroundColor: "#1E1E1E", height: '106px' }}>
16 |       <Link to={videoId ? `/video/${videoId}` : demoVideoUrl } >
17 |         <Typography variant="subtitle1" fontWeight="bold" color="#FFF">
18 |           {snippet?.title.slice(0, 60) || demoVideoTitle.slice(0, 60)}
19 |         </Typography>
20 |       </Link>
21 |       <Link to={snippet?.channelId ? `/channel/${snippet?.channelId}` : demoChannelUrl} >
22 |         <Typography variant="subtitle2" color="gray">
23 |           {snippet?.channelTitle || demoChannelTitle}
24 |           <CheckCircleIcon sx={{ fontSize: "12px", color: "gray", ml: "5px" }} />
25 |         </Typography>
26 |       </Link>
27 |     </CardContent>
28 |   </Card>
29 | );
30 | 
31 | export default VideoCard


--------------------------------------------------------------------------------
/src/Components/ChannelCard.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, CardContent, CardMedia, Typography } from '@mui/material';
 3 | import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 4 | import { Link } from 'react-router-dom';
 5 | import { demoProfilePicture } from '../Utils/Constants';
 6 | 
 7 | const ChannelCard = ({ channelDetail, marginTop }) => (
 8 |   <Box
 9 |     sx={{
10 |       boxShadow: 'none',
11 |       borderRadius: '20px',
12 |       display: 'flex',
13 |       justifyContent: 'center',
14 |       alignItems: 'center',
15 |       width: { xs: '356px', md: '320px' },
16 |       height: '326px',
17 |       margin: 'auto',
18 |       marginTop,
19 |     }}
20 |   >
21 |     <Link to={`/channel/${channelDetail?.id?.channelId}`}>
22 |       <CardContent sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', textAlign: 'center', color: '#fff' }}>
23 |         <CardMedia
24 |           image={channelDetail?.snippet?.thumbnails?.high?.url || demoProfilePicture}
25 |           alt={channelDetail?.snippet?.title}
26 |           sx={{ borderRadius: '50%', height: '180px', width: '180px', mb: 2, border: '1px solid #e3e3e3' }}
27 |         />
28 |         <Typography variant="h6">
29 |           {channelDetail?.snippet?.title}{' '}
30 |           <CheckCircleIcon sx={{ fontSize: '14px', color: 'gray', ml: '5px' }} />
31 |         </Typography>
32 |         {channelDetail?.statistics?.subscriberCount && (
33 |           <Typography sx={{ fontSize: '15px', fontWeight: 500, color: 'gray' }}>
34 |             {parseInt(channelDetail?.statistics?.subscriberCount).toLocaleString('en-US')} Subscribers
35 |           </Typography>
36 |         )}
37 |       </CardContent>
38 |     </Link>
39 |   </Box>
40 | );
41 | 
42 | export default ChannelCard;


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |     margin: 0;
 4 |     padding: 0;
 5 |     box-sizing: border-box;
 6 | }
 7 | 
 8 | a {
 9 |     text-decoration: none;
10 |     color: black;
11 | }
12 | 
13 | ::-webkit-scrollbar {
14 |     width: 0px;
15 |     height: 5px;
16 | }
17 | 
18 | ::-webkit-scrollbar-thumb {
19 |     background-color: rgb(114, 113, 113);
20 |     border-radius: 10px;
21 |     height: 200px;
22 | }
23 | 
24 | ::-webkit-scrollbar-track {
25 |     background-color: transparent;
26 | }
27 | 
28 | .category-btn:hover {
29 |     background-color: #FC1503 !important;
30 |     color: white !important;
31 | }
32 | 
33 | .category-btn:hover span {
34 |     color: white !important;
35 | }
36 | 
37 | .react-player {
38 |     height: 77vh !important;
39 |     width: 100% !important;
40 | }
41 | 
42 | .search-bar {
43 |     border: none;
44 |     outline: none;
45 |     width: 350px;
46 | }
47 | 
48 | .category-btn {
49 |     font-weight: bold !important;
50 |     text-transform: capitalize;
51 |     display: flex;
52 |     align-items: center;
53 |     justify-content: start;
54 |     cursor: pointer;
55 |     background: transparent;
56 |     outline: none;
57 |     border: none;
58 | 
59 |     padding: 7px 15px;
60 |     margin: 10px 0px;
61 |     border-radius: 20px;
62 |     transition: all 0.3s ease;
63 | }
64 | 
65 | @media screen and (max-width: 900px) {
66 |     .category-btn {
67 |         margin: 10px;
68 |     }
69 | }
70 | 
71 | @media screen and (max-width:800px) {
72 |     .copyright {
73 |         display: none !important;
74 |     }
75 | }
76 | 
77 | @media screen and (max-width: 600px) {
78 |     .scroll-horizontal {
79 |         overflow: auto !important;
80 |     }
81 | 
82 |     .react-player {
83 |         height: 45vh !important;
84 |     }
85 | 
86 |     .search-bar {
87 |         width: 200px;
88 |     }
89 | }


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <link
19 |       rel="stylesheet"
20 |       href="https://fonts.googleapis.com/icon?family=Material+Icons"
21 |     />
22 |     <link
23 |       rel="stylesheet"
24 |       href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
25 |     />
26 |     <!--
27 |       Notice the use of %PUBLIC_URL% in the tags above.
28 |       It will be replaced with the URL of the `public` folder during the build.
29 |       Only files inside the `public` folder can be referenced from the HTML.
30 | 
31 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
32 |       work correctly both with client-side routing and a non-root public URL.
33 |       Learn how to configure a non-root public URL by running `npm run build`.
34 |     -->
35 |     <title>YouTube Rapid API</title>
36 |   </head>
37 |   <body>
38 |     <noscript>You need to enable JavaScript to run this app.</noscript>
39 |     <div id="root"></div>
40 |     <!--
41 |       This HTML file is a template.
42 |       If you open it directly in the browser, you will see an empty page.
43 | 
44 |       You can add webfonts, meta tags, or analytics to this file.
45 |       The build step will place the bundled scripts into the <body> tag.
46 | 
47 |       To begin the development, run `npm start` or `yarn start`.
48 |       To create a production bundle, use `npm run build` or `yarn build`.
49 |     -->
50 |   </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/src/Utils/Constants.js:
--------------------------------------------------------------------------------
 1 | import MusicNoteIcon from '@mui/icons-material/MusicNote';
 2 | import HomeIcon from '@mui/icons-material/Home';
 3 | import CodeIcon from '@mui/icons-material/Code';
 4 | import OndemandVideoIcon from '@mui/icons-material/OndemandVideo';
 5 | import SportsEsportsIcon from '@mui/icons-material/SportsEsports';
 6 | import LiveTvIcon from '@mui/icons-material/LiveTv';
 7 | import SchoolIcon from '@mui/icons-material/School';
 8 | import FaceRetouchingNaturalIcon from '@mui/icons-material/FaceRetouchingNatural';
 9 | import CheckroomIcon from '@mui/icons-material/Checkroom';
10 | import GraphicEqIcon from '@mui/icons-material/GraphicEq';
11 | import TheaterComedyIcon from '@mui/icons-material/TheaterComedy';
12 | import FitnessCenterIcon from '@mui/icons-material/FitnessCenter';
13 | import DeveloperModeIcon from '@mui/icons-material/DeveloperMode';
14 | 
15 | export const logo = 'https://i.ibb.co/s9Qys2j/logo.png';
16 | 
17 | export const categories = [
18 |   { name: 'New', icon: <HomeIcon />, },
19 |   { name: 'Coding', icon: <CodeIcon />, },
20 |   { name: 'ReactJS', icon: <CodeIcon />, },
21 |   { name: 'NextJS', icon: <CodeIcon />, },
22 |   { name: 'Music', icon: <MusicNoteIcon /> },
23 |   { name: 'Education', icon: <SchoolIcon />, },
24 |   { name: 'Podcast', icon: <GraphicEqIcon />, },
25 |   { name: 'Movie', icon: <OndemandVideoIcon />, },
26 |   { name: 'Gaming', icon: <SportsEsportsIcon />, },
27 |   { name: 'Live', icon: <LiveTvIcon />, },
28 |   { name: 'Sport', icon: <FitnessCenterIcon />, },
29 |   { name: 'Fashion', icon: <CheckroomIcon />, },
30 |   { name: 'Beauty', icon: <FaceRetouchingNaturalIcon />, },
31 |   { name: 'Comedy', icon: <TheaterComedyIcon />, },
32 |   { name: 'Gym', icon: <FitnessCenterIcon />, },
33 |   { name: 'Crypto', icon: <DeveloperModeIcon />, },
34 | ];
35 | 
36 | export const demoThumbnailUrl = 'https://i.ibb.co/G2L2Gwp/API-Course.png';
37 | export const demoChannelUrl = '/channel/UCmXmlB4-HJytD7wek0Uo97A';
38 | export const demoVideoUrl = '/video/GDa8kZLNhJ4';
39 | export const demoChannelTitle = 'JavaScript Mastery';
40 | export const demoVideoTitle = 'Build and Deploy 5 JavaScript & React API Projects in 10 Hours - Full Course | RapidAPI';
41 | export const demoProfilePicture = 'http://dergipark.org.tr/assets/app/images/buddy_sample.png'


--------------------------------------------------------------------------------
/src/Components/VideoDetail.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import { Link, useParams } from "react-router-dom";
 3 | import ReactPlayer from "react-player";
 4 | import { Typography, Box, Stack } from "@mui/material";
 5 | import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 6 | 
 7 | import { Videos, Loader } from "./";
 8 | import { fetchFromAPI } from "../Utils/fetchFromAPI";
 9 | 
10 | const VideoDetail = () => {
11 |   const [videoDetail, setVideoDetail] = useState(null);
12 |   const [videos, setVideos] = useState(null);
13 |   const { id } = useParams();
14 | 
15 |   useEffect(() => {
16 |     fetchFromAPI(`videos?part=snippet,statistics&id=${id}`)
17 |       .then((data) => setVideoDetail(data.items[0]))
18 | 
19 |     fetchFromAPI(`search?part=snippet&relatedToVideoId=${id}&type=video`)
20 |       .then((data) => setVideos(data.items))
21 |   }, [id]);
22 | 
23 |   if(!videoDetail?.snippet) return <Loader />;
24 | 
25 |   const { snippet: { title, channelId, channelTitle }, statistics: { viewCount, likeCount } } = videoDetail;
26 | 
27 |   return (
28 |     <Box minHeight="95vh">
29 |       <Stack direction={{ xs: "column", md: "row" }}>
30 |         <Box flex={1}>
31 |           <Box sx={{ width: "100%", position: "sticky", top: "86px" }}>
32 |             <ReactPlayer url={`https://www.youtube.com/watch?v=${id}`} className="react-player" controls />
33 |             <Typography color="#fff" variant="h5" fontWeight="bold" p={2}>
34 |               {title}
35 |             </Typography>
36 |             <Stack direction="row" justifyContent="space-between" sx={{ color: "#fff" }} py={1} px={2} >
37 |               <Link to={`/channel/${channelId}`}>
38 |                 <Typography variant={{ sm: "subtitle1", md: 'h6' }}  color="#fff" >
39 |                   {channelTitle}
40 |                   <CheckCircleIcon sx={{ fontSize: "12px", color: "gray", ml: "5px" }} />
41 |                 </Typography>
42 |               </Link>
43 |               <Stack direction="row" gap="20px" alignItems="center">
44 |                 <Typography variant="body1" sx={{ opacity: 0.7 }}>
45 |                   {parseInt(viewCount).toLocaleString()} views
46 |                 </Typography>
47 |                 <Typography variant="body1" sx={{ opacity: 0.7 }}>
48 |                   {parseInt(likeCount).toLocaleString()} likes
49 |                 </Typography>
50 |               </Stack>
51 |             </Stack>
52 |           </Box>
53 |         </Box>
54 |         <Box px={2} py={{ md: 1, xs: 5 }} justifyContent="center" alignItems="center" >
55 |           <Videos videos={videos} direction="column" />
56 |         </Box>
57 |       </Stack>
58 |     </Box>
59 |   );
60 | };
61 | 
62 | export default VideoDetail;


--------------------------------------------------------------------------------