added Youtube-Clone under React-JS-Projects/Intermediate

React-JS-Projects/Intermediate/Youtube-Clone/.env.example

@@ -0,0 +1,2 @@
+REACT_APP_RAPID_API_KEY = ''
+# your rapid api yt key

React-JS-Projects/Intermediate/Youtube-Clone/README.md

@@ -0,0 +1,81 @@
+<h1 align='center'><b>💥 YOUTUBE CLONE 💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
+
+<div align='center'>
+
+  ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
+  ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
+  <!-- ![Bootstrap](https://img.shields.io/badge/bootstrap-%238511FA.svg?style=for-the-badge&logo=bootstrap&logoColor=white) -->
+  ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
+  <!-- ![jQuery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white) -->
+  ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
+  <!-- ![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white) -->
+  <!-- ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) -->
+  <!-- ![Web3.js](https://img.shields.io/badge/web3.js-F16822?style=for-the-badge&logo=web3.js&logoColor=white) -->
+  <!-- ![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB) -->
+  <!-- ![Angular.js](https://img.shields.io/badge/angular.js-%23E23237.svg?style=for-the-badge&logo=angularjs&logoColor=white) -->
+  <!-- ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) -->
+  <!-- ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white) -->
+  <!-- ![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D) -->
+  <!-- ![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white) -->
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+  <!-- <p>Add Description of the project</p> -->
+    <p>A YouTube clone frontend using modern web development technologies to replicate the core user interface and experience of YouTube. The application features a responsive design that adjusts seamlessly across devices, offering users an intuitive and familiar layout for browsing, searching, and viewing video content.</p>
+</div>
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+<!-- Add steps how to run this project -->
+1. Move to Directory. React-JS-Projects -> Intermediate -> Youtube-Clone
+2. In terminal run command : "npm i"
+3. Go to Rapid Api to get API Key <a href="https://rapidapi.com/ytdlfree/api/youtube-v31">Link</a>
+4. Create a .env file in directory, put yout API Key in .env file
+5. run command "npm run start"
+
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+<!-- add the screenshot of the project (Mandatory) -->
+![img](./screenshot.webp)
+
+## :zap: Working Video 📹
+<!-- directly add the link of video (If, possible) -->
+
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Sourabh Singh Rawat</i></b> 👦</h4>
+<p align='center'>
+  <a href='https://www.linkedin.com/in/sourabh782/'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/Sourabh782'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
+

React-JS-Projects/Intermediate/Youtube-Clone/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "youtube_clone",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.7",
+    "@mui/material": "^5.15.7",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.6.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-player": "^2.14.1",
+    "react-router-dom": "^6.22.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "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"
+    ]
+  }
+}

React-JS-Projects/Intermediate/Youtube-Clone/public/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

React-JS-Projects/Intermediate/Youtube-Clone/public/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="https://i.ibb.co/s9Qys2j/logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="https://i.ibb.co/s9Qys2j/logo.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" />
+
+    <title>Youtube Clone</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

React-JS-Projects/Intermediate/Youtube-Clone/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

React-JS-Projects/Intermediate/Youtube-Clone/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

React-JS-Projects/Intermediate/Youtube-Clone/src/App.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
+import { Box } from '@mui/material'
+import { Navbar, Feed, VideoDetail, ChannelDetail, SearchFeed } from './components'
+
+const App = () => {
+  return ( 
+    <BrowserRouter>
+        <Box sx={{backgroundColor: '#000', height: "100vh", overflow: 'hidden'}}>
+            <Navbar />
+            <Routes>
+                <Route path='/' exact element={ <Feed /> } />
+                <Route path='/video/:id' element={ <VideoDetail /> } />
+                <Route path='/channel/:id' element={ <ChannelDetail /> } />
+                <Route path='/search/:searchTerm' element={ <SearchFeed /> } />
+            </Routes>
+        </Box>
+    </BrowserRouter>
+  )
+}
+
+export default App

React-JS-Projects/Intermediate/Youtube-Clone/src/components/ChannelCard.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { Box, CardContent, CardMedia, Typography } from '@mui/material'
+import { CheckCircle } from '@mui/icons-material'
+import { Link } from 'react-router-dom'
+import { demoProfilePicture } from '../utils/constants'
+
+const ChannelCard = ( {channelDetail, marginTop } ) => {
+
+  return (
+    <Box
+      sx={{
+        boxShadow:'none', 
+        borderRadius: '20px', 
+        display:'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: { xs: '100%', md: '300px'},
+        height: 'auto',
+        margin:'auto',
+        marginTop
+      }}
+    >
+      <Link to={`/channel/${channelDetail?.id?.channelId}`}>
+        <CardContent sx={{display: 'flex', flexDirection: 'column', justifyContent: 'center',alignItems:'center' , textAlign:'center', color: '#fff'}}>
+          <CardMedia 
+            image={channelDetail?.snippet?.thumbnails?.high?.url || demoProfilePicture}
+            alt={channelDetail?.snippet?.title}
+            sx={{borderRadius: '50%', height: '180px', width: '180px', mb: 2, border: '1px solid #e3e3e3'}}
+          />
+          <Typography variant='h6'>
+            {channelDetail?.snippet?.title}
+            <CheckCircle sx={{fontSize: 16, color:'gray', ml:'10px'}} />
+          </Typography>
+
+          {channelDetail?.statistics?.subscriberCount && (
+            <Typography>
+              {parseInt(channelDetail?.statistics?.subscriberCount).toLocaleString()} Subscribers
+            </Typography>
+          )}
+        </CardContent>
+      </Link>
+    </Box>
+  )
+}
+
+export default ChannelCard

React-JS-Projects/Intermediate/Youtube-Clone/src/components/ChannelDetail.jsx

@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import { Box } from '@mui/material'
+import { Videos, ChannelCard } from './'
+import { fetchFromAPI } from '../utils/fetchFromAPI'
+
+const  ChannelDetail = () => {
+
+  const { id } = useParams();
+  const [data, setData] = useState(null);
+  const [videos, setVideos] = useState([]);
+
+  useEffect(() => {
+    fetchFromAPI(`channels?part=snippet&id=${id}`).then((data)=> setData(data?.items[0]));
+
+    fetchFromAPI(`search?channelId=${id}&part=snippet&order=date`).then((data)=> setVideos(data?.items))
+  }, [id])
+
+
+  return (
+    <Box height={'95vh'} sx={{overflowY: 'auto'}}>
+      <Box>
+        <div style={{ background: `linear-gradient(90deg, rgba(0,238,247,1) 0%, rgba(236,3,184,1) 100%, rgba(0,212,255,1) 100%) `, height: '200px', zIndex: '10'}} />
+
+        <ChannelCard channelDetail={data} marginTop='-100px'/>
+
+      </Box>
+      <Box display='flex' p='2'>
+        <Box sx={{mr: {sm: '100px'}}} />
+        <Videos videos={videos} />
+      </Box>
+    </Box>
+  )
+}
+
+export default ChannelDetail

React-JS-Projects/Intermediate/Youtube-Clone/src/components/Feed.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { useState, useEffect } from 'react'
+import { Box, Stack, Typography } from '@mui/material'
+import Sidebar from './Sidebar'
+import Videos from './Videos'
+import { fetchFromAPI } from '../utils/fetchFromAPI'
+
+const Feed = () => {
+
+  const [selected, setSelected] = useState("New");
+  const [videos, setVideos] = useState([]);
+
+  useEffect(() => {
+    fetchFromAPI(`search?part=snippet&q=${selected}`).then((data)=>{
+      setVideos(data.items)
+    })
+  }, [selected]);
+
+
+  return (
+    <Stack sx={{flexDirection: {sm: 'column', md: 'row'}}}>
+      <Box sx={{height: {sx: 'auto', md:'90vh'}, borderRight:'1px solid #3d3d3d', px:{ sx:0, md:2}}}>
+        <Sidebar 
+          selected = {selected}
+          setSelected = {setSelected}
+        />
+        <Typography className='copyright' variant='body2' sx={{mt: 1.5, color: '#fff'}}>
+          Copyright 2024 Youtube Clone
+        </Typography>
+      </Box>
+
+      <div>
+        <Box py={2} sx={{overflowX: 'auto', height:'90vh', flex: 2, width: '100%'}}>
+          <Typography variant='h4' fontWeight="bold" px={2} mb={2} sx={{color: 'white'}}>
+            {selected} <span style={{color: "#f31503"}}>videos</span>
+          </Typography>
+
+          <Videos videos={videos} />
+        </Box>
+      </div>
+    </Stack>
+  )
+}
+
+export default Feed

React-JS-Projects/Intermediate/Youtube-Clone/src/components/Navbar.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Stack } from '@mui/material'
+import { Link } from 'react-router-dom'
+import { logo } from '../utils/constants'
+import Searchbar from './Searchbar'
+
+const Navbar = () => {
+  return (
+    <div>
+      <Stack direction="row" 
+        alignItems="center" 
+        p={2} 
+        sx={{position: 'sticky', background: '#000', top: 0, justifyContent: 'space-between'}}
+      >
+        <Link to={"/"} style={{display:'flex', alignItems: 'center'}} >
+          <img src={logo} alt="logo" height={45} />
+        </Link>
+
+        <Searchbar />
+      </Stack>
+    </div>
+  )
+}
+
+export default Navbar