├── .eslintrc.cjs
├── .gitignore
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
├── 404.html
├── _redirects
├── index.html
└── vite.svg
├── src
├── App.jsx
├── Components
│ ├── CategoryList.jsx
│ ├── ChannelVideoPage.jsx
│ ├── ExploreVideos.jsx
│ ├── Header.jsx
│ ├── MainContainer.jsx
│ ├── RelatedVideos.jsx
│ ├── SearchBar.jsx
│ ├── SearchVideoPage.jsx
│ ├── ShimmerUI
│ │ ├── ButtonsShimmer.jsx
│ │ ├── SearchVideoShimmer.jsx
│ │ └── VideoShimmer.jsx
│ ├── SideBar.jsx
│ ├── VideoCard.jsx
│ └── VideoContainer.jsx
├── HomePageContainer
│ ├── Body.jsx
│ ├── CustomError.jsx
│ ├── ExploreVideoPage.jsx
│ ├── SearchResults.jsx
│ ├── SubScriptionPage.jsx
│ ├── WatchPage.jsx
│ └── WatchPageData
│ │ ├── ChannelData.jsx
│ │ ├── ChatMessage.jsx
│ │ ├── Comments.jsx
│ │ ├── CommentsData.jsx
│ │ ├── LiveChat.jsx
│ │ └── RelatedVideoPage.jsx
├── assets
│ ├── MyPic.jpg
│ ├── YouTubeWhite.png
│ ├── YouTube_Logo.png
│ └── react.svg
├── index.css
├── main.jsx
└── utils
│ ├── APIList.jsx
│ ├── appSlice.jsx
│ ├── chatSlice.jsx
│ ├── constants.jsx
│ ├── helper.jsx
│ ├── searchSlice.jsx
│ └── store.jsx
├── tailwind.config.js
└── vite.config.js
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # envFiles
2 | .env
3 |
4 |
5 | # dependencies
6 | /node_modules
7 | /.pnp
8 | .pnp.js
9 |
10 | # testing
11 | /coverage
12 |
13 | # misc
14 | .DS_Store
15 | .env.local
16 | .env.development.local
17 | .env.test.local
18 | .env.production.local
19 |
20 | npm-debug.log*
21 | yarn-debug.log*
22 | yarn-error.log*
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # YOUTUBE CLONE :
2 |
3 | ### Project Overview
4 |
5 | Developed a highly optimized and scalable video streaming application, leveraging YouTube's Live API to deliver seamless live streaming experiences. The application focuses on enhancing user engagement through various optimization techniques and features.
6 |
7 | ### Live Demo : https://my-youtube-ui.netlify.app/
8 |
9 | ### Key Features
10 |
11 | - Optimized Search (debouncing and caching techniques)
12 | - Live Chat Simulation (using API polling)
13 | - Lazy Loading
14 | - Shimmer UI while loading
15 | - Caching Search Suggestions
16 | - Hover to Seek Videos
17 | - Filter Videos by Tags
18 | - Experience on search results and explore pages (e.g., Trending).
19 |
20 | ### Technologies Used
21 |
22 | - React JS
23 | - Redux Toolkit
24 | - Tailwind CSS
25 | - Vite
26 |
27 | ### Getting Started :
28 |
29 | Follow these steps to set up and run the application locally:
30 |
31 | ### Prerequisites :
32 |
33 | - npm (Node Package Manager) installed.
34 | - Vite should be installed.
35 |
36 | ### Installation :
37 |
38 | 1. Clone the repository:
39 |
40 | ```
41 | git clone https://github.com/onkar895/YouTube-UI.git
42 | cd MyYouTube
43 | ```
44 |
45 | LOCALHOST=1234
46 |
47 | 2. Install dependencies:
48 |
49 | ```
50 | cd MyYouTube
51 | npm install
52 | ```
53 |
54 | 3. Run the code
55 | ```
56 | npm run dev
57 | ```
58 |
59 | Screenshots :
60 | 
61 | 
62 | 
63 | 
64 | 
65 | 
66 | 
67 | 
68 | 
69 | 
70 | 
71 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | YouTube
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "myyoutube",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "@reduxjs/toolkit": "^2.0.1",
14 | "dotenv": "^16.3.1",
15 | "framer-motion": "^11.0.3",
16 | "random-avatar-generator": "^2.0.0",
17 | "react": "^18.2.0",
18 | "react-dom": "^18.2.0",
19 | "react-fontawesome": "^1.7.1",
20 | "react-icons": "^4.12.0",
21 | "react-infinite-scroll-component": "^6.1.0",
22 | "react-redux": "^9.0.2",
23 | "react-router": "^6.21.2",
24 | "react-router-dom": "^6.21.1",
25 | "redux": "^5.0.0"
26 | },
27 | "devDependencies": {
28 | "@types/react": "^18.2.37",
29 | "@types/react-dom": "^18.2.15",
30 | "@vitejs/plugin-react": "^4.2.0",
31 | "autoprefixer": "^10.4.16",
32 | "eslint": "^8.53.0",
33 | "eslint-plugin-react": "^7.33.2",
34 | "eslint-plugin-react-hooks": "^4.6.0",
35 | "eslint-plugin-react-refresh": "^0.4.4",
36 | "postcss": "^8.4.31",
37 | "tailwind-scrollbar": "^3.0.5",
38 | "tailwindcss": "^3.3.5",
39 | "vite": "^5.0.0"
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/public/404.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Not Found
7 |
45 |
46 |
47 |
48 |
404 - Page Not Found
49 |
The page you requested could not be found.
50 |
Visit the homepage
51 |
YouTube
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
20 |
21 |
22 |
23 |
24 | Loading...}>
29 |
37 |
38 |
39 |
40 |
41 | );
42 | }
43 |
44 | export default App;
45 |
--------------------------------------------------------------------------------
/src/Components/CategoryList.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-vars */
2 | import React, { useState, useEffect, useRef } from 'react';
3 | import { useNavigate } from 'react-router-dom';
4 | import { useDispatch } from 'react-redux'
5 | import { fetchTagsUrl, YOUTUBE_SEARCH_API } from '../utils/APIList';
6 | import { BiSolidChevronLeftCircle, BiSolidChevronRightCircle } from "react-icons/bi";
7 | import ButtonsShimmer from './ShimmerUI/ButtonsShimmer';
8 | import { TagNames } from '../utils/constants';
9 |
10 | const CategoryList = () => {
11 | const listRef = useRef();
12 | const navigate = useNavigate();
13 | const [selectedButton, setSelectedButton] = useState("All");
14 | const [loading, setLoading] = useState(true);
15 | const [slideNumber, setSlideNumber] = useState(0);
16 | const [tags, setTags] = useState([]);
17 | const [error, setError] = useState(null);
18 | const [isLoading, setIsLoading] = useState(false);
19 |
20 |
21 | const dispatch = useDispatch()
22 |
23 | useEffect(() => {
24 | const timer = setTimeout(() => {
25 | setLoading(false)
26 | }, 1000)
27 |
28 | return () => clearTimeout(timer);
29 | }, []);
30 |
31 | useEffect(() => {
32 | fetchTags();
33 | }, []);
34 |
35 | const fetchTags = async () => {
36 | setLoading(true);
37 | try {
38 | const res = await fetch(fetchTagsUrl);
39 | const data = await res.json();
40 | const items = data.items || []; // Extract items array from the response
41 | const tags = items.map(item => item.snippet.title); // Extract titles from items
42 | setTags(tags);
43 | setLoading(false); // Set loading to false after fetching tags
44 | } catch (error) {
45 | console.error('Error fetching tags:', error);
46 | setError('Failed to fetch tags. Please try again later.');
47 | setLoading(false);
48 | }
49 | };
50 |
51 | const handleExploreButtonClick = (ExploreName) => {
52 | const newQuery = ExploreName.replace(" ", "+");
53 | setSelectedButton(newQuery);
54 | setIsLoading(true); // Start loading
55 | if (newQuery === "All") {
56 | navigate("/");
57 | } else {
58 | navigate(`/explore?eq=${newQuery}`);
59 | }
60 | };
61 |
62 | const handleScroll = (direction) => {
63 | const box = listRef.current;
64 | const slideWidth = box.clientWidth;
65 | const newSlideNumber = direction === "previous" ? slideNumber - 1 : slideNumber + 1;
66 | setSlideNumber(newSlideNumber);
67 | box.scrollLeft += (direction === "previous" ? -slideWidth : slideWidth);
68 | };
69 |
70 | return (
71 |
72 |
73 |
74 | handleScroll("previous")}>
75 |
77 |
78 |
79 | handleScroll("next")}>
80 |
82 |
83 |
84 |
85 |
86 |
87 | {loading ? (
88 |
94 |
95 | {
96 | TagNames.map((item, index) => (
97 | handleExploreButtonClick(name)}>
98 | {item}
99 |
100 | ))
101 | }
102 |
103 |
104 | )
105 | }
106 |
107 | {
108 | tags.length > 0 && (
109 |
110 | navigate('/')} className={`bg-gray-100 hover:bg-gray-900 hover:text-white hover:transition duration-500 px-[12px] py-[6px] rounded-lg ${selectedButton === "All" ? 'bg-gray-900 text-white' : ''}`}>
111 | All
112 |
113 | {
114 | tags.map((name, index) => {
115 | return (
116 | handleExploreButtonClick(name)}>
117 | {name}
118 |
119 | )
120 | })
121 | }
122 |
123 | )
124 | }
125 |
126 | )}
127 |
128 |
129 |
setIsHovered(true)}
68 | onMouseOut={() => setIsHovered(false)}>
69 |
70 | {
71 | isHovered && (
72 |
73 | VIDEO
83 |
84 | )
85 | }
86 |
91 |
92 | {duration}
93 |
94 |
95 |
96 |
97 |
{title}
98 |
99 |
100 |
{channelTitle}
101 |
102 |
103 | {viewCount} Views
104 | •
105 | {calender}
106 |
107 |
108 |
109 |
setIsHovered(true)}
56 | onMouseOut={() => setIsHovered(false)}>
57 |
58 | {
59 | isHovered && (
60 |
61 | VIDEO
71 |
72 | )
73 | }
74 |
75 |
80 |
81 | {duration}
82 |
83 |
84 |
85 |
86 |
{title}
87 |
88 |
89 |
{channelTitle}
90 |
91 |
92 | {viewCount} Views
93 | •
94 | {calender}
95 |
96 |
97 |
98 |
33 |
34 | {/* Logo and Menu Icon */}
35 |
36 |
37 |
39 |
40 |
55 |
56 |
57 |
59 | 9+
60 |
61 |
62 |
63 |
64 |
65 |
67 | );
68 | };
69 |
70 | export default Header;
--------------------------------------------------------------------------------
/src/Components/MainContainer.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-vars */
2 | import React from 'react'
3 | import CategoryList from './CategoryList'
4 | import VideoContainer from '../Components/VideoContainer'
5 |
6 | const MainContainer = () => {
7 |
8 | return (
9 | <>
10 |
11 |
14 |
15 | )
16 | }
17 |
18 | export default MainContainer
--------------------------------------------------------------------------------
/src/Components/RelatedVideos.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/prop-types */
2 | /* eslint-disable no-unused-vars */
3 | import React, { useState } from 'react'
4 | import { timeDuration, formatTime, formatNumberWithSuffix } from '../utils/constants'
5 | import { truncateText } from '../utils/helper'
6 |
7 | const RelatedVideos = ({ info, videoId }) => {
8 | const [isHovered, setIsHovered] = useState(false);
9 |
10 | const { snippet, contentDetails, statistics } = info;
11 | const { title, thumbnails, channelTitle, publishedAt } = snippet;
12 |
13 | const duration = timeDuration(contentDetails.duration);
14 | const calender = formatTime(publishedAt);
15 | const viewCount = statistics?.viewCount ? formatNumberWithSuffix(statistics.viewCount) : 0;
16 |
17 | return (
18 | setIsHovered(true)}
19 | onMouseOut={() => setIsHovered(false)}>
20 |
21 | {
22 | isHovered && (
23 |
24 | VIDEO
34 |
35 | )
36 | }
37 |
38 |
39 |
44 |
45 | {duration}
46 |
47 |
48 |
49 |
50 |
51 |
{truncateText(title, 60)}
52 |
53 | {viewCount} Views
54 | {calender}
55 |
56 |
57 |
58 | {channelTitle}
59 |
60 |
61 |
127 |
128 | {/* Left Arrow Button In sm Search To Move to normal Screen */}
129 | {
130 | showSearch && (
131 |
132 |
133 |
135 |
136 | )
137 | }
138 |
139 | {
140 | isInputFocused && (
141 |
142 |
143 |
145 |
146 | )
147 | }
148 |
149 | {
150 | searchQuery && (
151 |
152 |
153 |
155 |
156 | )
157 | }
158 |
159 |
setSearchQuery(e.target.value)}
166 | onFocus={handleInputFocus}
167 | onBlur={handleInputBlur}
168 | />
169 |
{ handleSearchButtonClick(); handleSearch(event, searchQuery) }}>
170 |
172 |
173 |
174 |
175 | {
176 | searchQuery && showSuggestions && (
177 |
178 | {
179 | suggestions.length === 0 ? (
180 | searchQuery !== "" && (
181 |
{`No Results Found for ${searchQuery}`}
182 | )
183 | ) : (
184 |
185 | {
186 | suggestions.map((suggestion) => (
187 | handleSearch(event, suggestion)} >
188 |
191 | ))
192 | }
193 |
194 | )
195 | }
196 |
197 | )
198 | }
199 |
200 |
setIsHovered(true)} onMouseOut={() => setIsHovered(false)}>
58 |
59 | {
60 | isHovered && (
61 |
62 | VIDEO
72 |
73 | )
74 | }
75 |
76 |
77 |
82 |
83 | {duration}
84 |
85 |
86 |
87 |
88 |
89 |
{truncateText(title, 60)}
90 |
91 | {viewCount} Views
92 | •
93 | {calender}
94 |
95 |
96 |
97 |
98 |
{channelTitle}
99 |
100 |
101 | {truncateText(description, 90)}
102 |
103 |
104 |
7 | {Array(12).fill('').map((_, index) => (
8 |
11 | ))}
12 |
7 | {
8 | // creating a new Array instance using Array() constructor and map through every element of array
9 | Array(50)
10 | .fill("")
11 | .map((_, index) => (
12 |
13 |
27 | ))
28 | }
29 |
7 | {
8 | // creating the new Array instance using Array() constructor and map through every element of array
9 | Array(50)
10 | .fill("")
11 | .map((_, index) => (
12 |
13 |
17 |
24 | {/*
25 |
26 |
27 |
28 |
*/}
29 |
30 |
31 | ))
32 | }
33 |
95 |
96 |
97 | Home
99 |
100 |
101 |
102 | Shorts
104 |
105 |
106 | Subscriptions
108 |
109 |
110 | You
112 |
113 |
121 |
122 |
123 |
125 |
126 |
127 |
128 |
144 |
145 |
146 |
148 |
149 |
150 | SubScriptions
151 | {
152 | Subscriptions.map(({ src, profileId, fullname }) => {
153 | return (
154 |
155 |
handleChannelButtonClick(fullname)}>
156 |
157 |
159 |
{fullname}
160 |
162 |
167 |
168 |
169 |
171 |
172 |
173 | Explore
174 | {
175 | Explore.map(({ icon, name }) => {
176 | return (
177 |
178 |
handleExploreButtonClick(name)}>
179 |
180 | {icon}
181 | {name}
182 |
183 |
184 |
189 |
190 |
191 |
193 |
194 |
195 | More from YouTube
196 | {
197 | Premium.map(({ icon, name }) => {
198 | return (
199 |
200 |
handleExploreButtonClick(name)}>
201 |
202 | {icon}
203 | {name}
204 |
205 |
206 |
211 |
212 |
213 |
215 |
216 |
232 |
233 |
setIsHovered(true)}
42 | onMouseOut={() => setIsHovered(false)}>
43 |
44 | {
45 | isHovered && (
46 |
47 | VIDEO
57 |
58 | )
59 | }
60 |
65 |
66 | {duration}
67 |
68 |
69 |
70 |
71 |
72 |
{title}...
73 |
75 |
76 |
77 |
{channelTitle}
78 |
79 |
80 |
{likeCount} Likes
81 |
83 |
84 |
85 |
86 |
{viewCount} Views
87 |
89 |
90 | {calender}
91 |
92 |
93 |
95 |
50 | {loading ? (
51 |
55 |
57 | ))
58 | )}
59 |
60 | );
61 | };
62 |
63 | export default VideoContainer;
64 |
--------------------------------------------------------------------------------
/src/HomePageContainer/Body.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-vars */
2 | import React from 'react'
3 | import SideBar from '../Components/SideBar'
4 | import { Outlet } from 'react-router-dom'
5 | import { useSelector } from 'react-redux';
6 |
7 | const Body = () => {
8 |
9 | const isMenuOpen = useSelector((store) => store.app.isMenuOpen)
10 |
11 | const mainStyle = isMenuOpen ? 'blur-effect' : ''
12 | return (
13 |
14 |
15 | {/* {
16 | The < Outlet > component from react-router-dom is a special component that is used within a parent route to render the child routes. In this case, it allows the child routes defined in the App component to be rendered inside the Body component.
17 | } */}
18 |
19 |
21 |
13 |
14 |
{message}
15 |
16 |
- This service, powered by free APIs with limitations, may experience interruptions.
17 |
- The API key has reached the maximum number of allowed requests. So, it breaks anytime! Sorry for the inconvenience.
18 |
- For a more reliable experience, kindly consider using the original YouTube platform.
19 |
50 |
51 |
53 |
54 | {
55 | isLoading ? (
56 |
57 | ) : error ? (
58 |
59 |
61 | ) : (
62 | videos.map((video) => (
63 |
64 |
66 | ))
67 | )
68 | }
69 |
70 |
49 |
50 |
52 |
53 | {
54 | !error ? (
55 |
Showing Results for : {searchQuery}
56 | ) : (
57 | Unable to show any Results for : {searchQuery}
58 | )
59 | }
60 |
61 |
62 | {
63 | isLoading ? (
64 |
65 | ) : error ? (
66 |
67 |
69 | ) : (
70 | videos.map((video) => (
71 |
72 |
74 | ))
75 | )
76 | }
77 |
78 |
51 |
52 |
54 |
55 | {
56 | isLoading ? (
57 |
58 | ) : error ? (
59 |
60 |
62 | ) : (
63 | videos.map((video) => (
64 |
65 |
67 | ))
68 | )
69 | }
70 |
71 |
20 |
21 |
22 |
23 |
31 |
32 |
33 |
35 |
36 |
38 |
39 |
40 |
43 |
44 |
45 |
47 |
76 |
77 |
{videoData?.snippet?.title}
78 |
79 |
80 |
81 |
82 |
83 |
84 | {videoData?.snippet?.channelTitle}
85 | {subscriberCount} Subscribers
86 |
87 |
88 |
setSubscribe(!subscribe)}
90 | >
91 | {subscribe ? (
92 |
93 | Subscribed
95 |
97 | ) : (
98 |
99 | Subscribe
100 |
101 | )}
102 |
103 |
104 |
105 |
106 |
107 | {
108 | like ? (
109 | {likeCount}
115 |
116 |
117 |
118 |
119 |
120 | {
121 | disLike ? (
122 |
128 |
129 |
133 |
134 | Download
136 |
137 |
140 |
141 |
142 |
143 |
144 |
{viewCount} views
145 |
146 |
{calender}
147 |
148 |
149 |
150 | {videoData?.snippet?.description}
151 |
152 |
setShowMore(!showMore)}>
153 | {
154 | showMore ? "Show Less" : "Show More..."
155 | }
156 |
157 |
158 |
159 |
9 |
10 |
11 | {info.name}
12 | {info.message}
13 |
14 |
39 |
40 |
41 |
46 |
47 |
48 |
{commentItem?.authorDisplayName}
49 |
{commentItem?.textOriginal}
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 | {like ?
59 | {likeCount > 0 && likeCount}
60 |
61 |
62 | {dislike ?
64 |
65 |
66 | Reply
67 |
68 |
69 |
70 | {info.replies && (
71 | <>
72 |
setShowReply(!showReply)}
75 | >
76 | {showReply ? (
77 |
78 | Hide replies
79 |
81 | ) : (
82 |
83 | Show replies
84 |
86 | )}
87 |
88 | {showReply && info.replies.comments && info.replies.comments.map((item) => (
89 |
90 | ))}
91 |
92 | )}
93 |
94 |
95 |
32 |
33 |
{comments.length} Comments
34 |
35 | Sort by
37 |
38 |
39 |
40 |
41 | {
42 | comments.map((comment, index) => (
43 |
47 |
48 |
75 |
76 | Live Chat
77 |
78 | {
79 | isChatVisible && (
80 |
81 | {chatMessage.map((chat, index) => (
82 |
85 | )
86 | }
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 | Omkar Karale
96 |
97 |
98 |
😊
99 |
100 |
101 |
123 |
124 |
125 |
126 |
128 |
129 | {isChatVisible ? 'Hide Chat' : 'Show Chat'}
130 |
131 |
132 |
42 | {
43 | videos.map((video) => (
44 |
45 |
47 | ))
48 | }
49 |
50 | )
51 | }
52 |
53 | export default RelatedVideoPage
54 |
--------------------------------------------------------------------------------
/src/assets/MyPic.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ItsOnkar-dev/YouTube-UI/edfd7bf57595433fa5baa4909da2c07bd0d94be0/src/assets/MyPic.jpg
--------------------------------------------------------------------------------
/src/assets/YouTubeWhite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ItsOnkar-dev/YouTube-UI/edfd7bf57595433fa5baa4909da2c07bd0d94be0/src/assets/YouTubeWhite.png
--------------------------------------------------------------------------------
/src/assets/YouTube_Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ItsOnkar-dev/YouTube-UI/edfd7bf57595433fa5baa4909da2c07bd0d94be0/src/assets/YouTube_Logo.png
--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
8 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/src/utils/APIList.jsx:
--------------------------------------------------------------------------------
1 | const API_KEY = import.meta.env.VITE_GOOGLE_API_KEY;
2 | // Vite uses the 'import.meta.env' object instead of 'process.env' to access environment variables.
3 |
4 | if (!API_KEY) {
5 | console.error("API key is missing. Make sure you have set up the environment variable.");
6 | }
7 |
8 | export const YOUTUBE_VIDEO_API = "https://youtube.googleapis.com/youtube/v3/videos?part=snippet%2CcontentDetails%2Cstatistics&chart=mostPopular&maxResults=50®ionCode=IN&key=" + API_KEY;
9 |
10 | export const YOUTUBE_SEARCH_SUGGESTION_API =
11 | "https://api.codetabs.com/v1/proxy?quest=" + encodeURIComponent("https://suggestqueries.google.com/complete/search?client=youtube&ds=yt&client=firefox&q=");
12 | // 'https://thingproxy.freeboard.io/fetch/http://suggestqueries.google.com/complete/search?client=youtube&ds=yt&client=firefox&'
13 | // "https://corsproxy.org/?https%3A%2F%2Fsuggestqueries.google.com%2Fcomplete%2Fsearch%3Fclient%3Dfirefox%26ds%3Dyt%26"
14 |
15 | export const CHANNEL_INFO_API = "https://youtube.googleapis.com/youtube/v3/channels?part=snippet%2CcontentDetails%2Cstatistics&key=" + API_KEY
16 |
17 | export const VIDEO_DETAILS_API =
18 | "https://youtube.googleapis.com/youtube/v3/videos?part=snippet%2CcontentDetails%2Cstatistics&key=" +
19 | API_KEY;
20 |
21 | export const YOUTUBE_SEARCH_API = "https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=50&q=&key=" + API_KEY;
22 |
23 | export const YOUTUBE_SEARCHCATEGORY_API = "https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=50&type=video&q=&key=" + API_KEY;
24 |
25 | export const fetchTagsUrl =
26 | "https://youtube.googleapis.com/youtube/v3/videoCategories?part=snippet®ionCode=IN&key=" +
27 | API_KEY;
28 |
29 | export const YOUTUBE_COMMENTS_API = `https://youtube.googleapis.com/youtube/v3/commentThreads?part=snippet%2Creplies&maxResults=50&videoId=&key=${API_KEY}`
30 |
31 |
32 |
--------------------------------------------------------------------------------
/src/utils/appSlice.jsx:
--------------------------------------------------------------------------------
1 | import { createSlice } from "@reduxjs/toolkit";
2 |
3 | const appSlice = createSlice({
4 | name: 'app',
5 | initialState: {
6 | isMenuOpen: false,
7 | },
8 | reducers: {
9 | toggleMenu: (state) => {
10 | state.isMenuOpen = !state.isMenuOpen
11 | },
12 | },
13 | })
14 |
15 | export const { toggleMenu } = appSlice.actions
16 | export default appSlice.reducer
--------------------------------------------------------------------------------
/src/utils/chatSlice.jsx:
--------------------------------------------------------------------------------
1 | import { createSlice } from "@reduxjs/toolkit";
2 | import { LIVE_CHAT_COUNT } from "./constants";
3 |
4 | const chatSlice = createSlice({
5 | name: 'chat',
6 | initialState: {
7 | messages: []
8 | },
9 | reducers: {
10 | addMessage: (state, action) => {
11 | state.messages.splice(LIVE_CHAT_COUNT, 1)
12 | state.messages.unshift(action.payload)
13 | // updates the state by pushing the payload property of the action object into the messages array in the state.
14 | },
15 | },
16 | })
17 | // Overall, this reducer function handles the action of adding a new message to the state. When dispatched, it appends the new message to the existing list of messages in the state.
18 |
19 | export const { addMessage } = chatSlice.actions
20 | export default chatSlice.reducer
--------------------------------------------------------------------------------
/src/utils/constants.jsx:
--------------------------------------------------------------------------------
1 | import { MdHomeFilled } from 'react-icons/md';
2 | import { MdSubscriptions } from 'react-icons/md';
3 | import { SiYoutubeshorts } from 'react-icons/si';
4 | import { IoMdTrendingUp } from "react-icons/io";
5 | import { HiShoppingBag } from "react-icons/hi2";
6 | import { MdMusicNote } from "react-icons/md";
7 | import { BiSolidMoviePlay } from "react-icons/bi";
8 | import { RiLiveFill } from "react-icons/ri";
9 | import { SiYoutubegaming } from "react-icons/si";
10 | import { PiStudentFill } from "react-icons/pi";
11 | import { SiShopify } from "react-icons/si";
12 | import { GiTrophy } from "react-icons/gi";
13 | import { SiGooglenews } from "react-icons/si";
14 | import { FaYoutube } from "react-icons/fa";
15 | import { SiYoutubestudio } from "react-icons/si";
16 | import { SiYoutubemusic } from "react-icons/si";
17 | import { TfiYoutube } from "react-icons/tfi";
18 | import { IoSettingsSharp } from "react-icons/io5";
19 | import { RiChatHistoryFill } from "react-icons/ri";
20 | import { IoMdHelpCircle } from "react-icons/io";
21 | import { MdFeedback } from "react-icons/md";
22 |
23 | export const Home = [
24 | {
25 | icon: {monthsAgo} Month ago ;
195 | } else {
196 | return {monthsAgo} Months ago ;
197 | }
198 | } else {
199 | let daysAgo = Math.ceil(differenceInDays);
200 |
201 | if (daysAgo === 1) {
202 | return {daysAgo} day ago ;
203 | } else {
204 | return {daysAgo} days ago ;
205 | }
206 | }
207 | };
208 |
209 |
210 | export const timeDuration = (isoDuration) => {
211 | let hours = 0;
212 | let minutes = 0;
213 | let seconds = 0;
214 | let minutesIndex;
215 | let hoursIndex;
216 |
217 | if (typeof isoDuration !== 'string' || !isoDuration.trim()) {
218 | return '00:00'; // Default value when isoDuration is not valid
219 | }
220 |
221 | if (isoDuration.includes("H")) {
222 | hoursIndex = isoDuration.indexOf("H");
223 | hours = parseInt(isoDuration.slice(2, hoursIndex));
224 | }
225 |
226 | if (!hoursIndex) {
227 | hoursIndex = 1;
228 | }
229 |
230 | if (isoDuration.includes("M")) {
231 | minutesIndex = isoDuration.indexOf("M");
232 | minutes = parseInt(isoDuration.slice(hoursIndex + 1, minutesIndex));
233 | }
234 | if (!minutesIndex) {
235 | minutesIndex = 1;
236 | }
237 | const secondsIndex = isoDuration.indexOf("S");
238 | if (secondsIndex !== -1) {
239 | seconds = parseInt(isoDuration.slice(minutesIndex + 1, secondsIndex));
240 | }
241 |
242 | // Format the time
243 | if (!hours) {
244 | const formattedTime = `${padZero(minutes)}:${padZero(seconds)}`;
245 | return formattedTime;
246 | } else {
247 | const formattedTime = `${padZero(hours)}:${padZero(minutes)}:${padZero(
248 | seconds
249 | )}`;
250 | return formattedTime;
251 | }
252 | }
253 |
254 | // Function to pad single-digit numbers with leading zeros
255 | function padZero(num) {
256 | return num < 10 ? `0${num}` : num;
257 | }
258 |
259 | export const formatNumberWithSuffix = (x) => {
260 | if (x === undefined) {
261 | return 0;
262 | }
263 | if (x >= 1000000) {
264 | return (x / 1000000).toFixed(1) + "M";
265 | } else if (x >= 1000) {
266 | return (x / 1000).toFixed(1) + "K";
267 | }
268 | return x.toString();
269 | };
270 |
--------------------------------------------------------------------------------
/src/utils/helper.jsx:
--------------------------------------------------------------------------------
1 | var nameList = [
2 | "Josie Suarez",
3 | "Soren Golden",
4 | "Giuliana Maldonado",
5 | "Javier Aguirre",
6 | "Ariah Ortiz",
7 | "Landon Cabrera",
8 | "Daleyza Huff",
9 | "Finnley Fitzpatrick",
10 | "Annabella Randall",
11 | "Trenton Barry",
12 | "Waverly Ahmed",
13 | "Harry Watkins",
14 | "Lola Campbell",
15 | "Christopher Cain",
16 | "Kendra Jones",
17 | "William May",
18 | "Adriana Sanders",
19 | "Jose Franklin",
20 | "Angela Villalobos",
21 | "Reuben Guerra",
22 | "Edith Nash",
23 | "Chandler Browning",
24 | "Princess Sweeney",
25 | "Nixon Santana",
26 | "Myra Weeks",
27 | "Anders Parsons",
28 | "Maia Robbins",
29 | "Finnegan Baxter",
30 | "Lara Truong",
31 | "Ayan Conner",
32 | "Alondra Knox",
33 | "Valentin Cain",
34 | "Kendra Person",
35 | "Moses Pineda",
36 | "Nola Brady",
37 | "Reed Anthony",
38 | "Macy Lim",
39 | "Cal Waller",
40 | "Whitley Barajas",
41 | "Brennan Roberts",
42 | "Paisley Golden",
43 | "Ryann Valdez",
44 | "Kyler Morgan",
45 | "Delilah Kirk",
46 | "Alessandro Orr",
47 | "Alaiya Vasquez",
48 | "Rowan Ramos",
49 | "Alice Holloway",
50 | "Sutton Cabrera",
51 | "Daleyza Kaur",
52 | "Augustine Parsons",
53 | "Maia Gregory",
54 | "Travis Montgomery",
55 | "Evangeline Warner",
56 | "Jaxton McGee",
57 | "Kayleigh Velez",
58 | "Kareem Silva",
59 | "Lucia Delarosa",
60 | "Osiris Hernandez",
61 | "Camila Lim",
62 | "Cal Potter",
63 | "Rory Townsend",
64 | "Alexis Ortega",
65 | "Lilah Clay",
66 | "Yosef Heath",
67 | "Amani Henderson",
68 | "Beau Collins",
69 | "Kinsley Davenport",
70 | "Dariel Bartlett",
71 | "Aubrielle Hayden",
72 | "Leroy Ponce",
73 | "Aileen Barrera",
74 | "Makai Grant",
75 | "Alaina Harrell",
76 | "Nelson Madden",
77 | "Violette Winters",
78 | "Deandre Hess",
79 | "Kaliyah Gibbs",
80 | "Deacon Snow",
81 | "Alexia Garrison",
82 | "Noe Washington",
83 | "Valerie McDaniel",
84 | "Major Weber",
85 | "Alayah Harris",
86 | "Samuel McDowell",
87 | "Rayna Thomas",
88 | "Logan Sexton",
89 | "Ellen Conner",
90 | "Phillip Norman",
91 | "Malani Harrison",
92 | "Gavin Grant",
93 | "Alaina Hess",
94 | "Lawrence Phan",
95 | "Elsa Woodward",
96 | "Jeremias Jennings",
97 | "Palmer Hoffman",
98 | "Steven Hodges",
99 | "Eve Watson",
100 | "Greyson McDaniel",
101 | "Dahlia Greer",
102 | "Koda Nash",
103 | "Novah Lynch",
104 | "Zane Rivera",
105 | "Lillian Hodges",
106 | "Alonzo Lara",
107 | "Heidi Taylor",
108 | "Jackson Knox",
109 | "Kallie Ruiz",
110 | "Austin Guerra",
111 | "Edith McCullough",
112 | "Briar Gross",
113 | "Angel Watts",
114 | "Dakota McClure",
115 | "Estella Warren",
116 | "Abel Flores",
117 | "Emilia Norris",
118 | "Cairo Poole",
119 | "Bonnie Medina",
120 | "George Murphy",
121 | "Bella Wood",
122 | "Carson Bradley",
123 | "Vanessa Richards",
124 | "Holden Howard",
125 | "Sophie Ware",
126 | "Tadeo Wallace",
127 | "Arianna Palmer",
128 | "Theo Conner",
129 | "Alondra Bush",
130 | "Tyson Clay",
131 | "Aliana Yang",
132 | "Malcolm Foley",
133 | "Zaylee Arias",
134 | "Alec Herrera",
135 | "Ximena Best",
136 | "Harlem Rowe",
137 | "Matilda Kerr",
138 | "Louie Jordan",
139 | "Adalynn Arroyo",
140 | "Alberto Knox",
141 | "Kallie Schroeder",
142 | "Izaiah Olsen",
143 | "Oaklyn Carson",
144 | "Ares Burke",
145 | "Vera Estes",
146 | "Hakeem Middleton",
147 | "Madalyn Gillespie",
148 | "Forest Farrell",
149 | "Kassidy Solis",
150 | "Ronin Cortez",
151 | "Haven Snyder",
152 | "Thiago Buckley",
153 | ];
154 |
155 | const comments = [
156 | "Hey everyone, thanks for joining the chat!",
157 | "Let me know if you have any questions?",
158 | "I'm learning so much from this stream.",
159 | "Thanks for sharing your knowledge!",
160 | "I'm so glad I found this stream.",
161 | "Thanks for making this stream so interactive.",
162 | "I'm so glad I subscribed to your channel.",
163 | "I always enjoy your streams.",
164 | "Thanks for the giveaway, I'm so excited to win!",
165 | "I'm really looking forward to your next stream!",
166 | "So helpful!",
167 | "Amazing!",
168 | "Love it!",
169 | "Spot on!",
170 | "Exactly what I needed!",
171 | "Hey, great stream! I'm really enjoying it.",
172 | "Thanks for answering my question!",
173 | "I love your content! Keep up the great work.",
174 | "This is so interesting! I'm learning a lot.",
175 | "I'm having a lot of fun! Thanks for streaming.",
176 | "You're so funny! I'm laughing so hard.",
177 | "You're so talented! I'm amazed.",
178 | "I'm so glad I found your channel.",
179 | "I'm really looking forward to your next stream!",
180 | "Thanks for the giveaway! I'm so excited to win.",
181 | "I'm having a great time in the chat!",
182 | "I'm so glad to be a part of this community.",
183 | "Thanks for making me feel welcome.",
184 | "I'm so happy to be here.",
185 | "I'm having a blast!",
186 | "This is the best stream ever!",
187 | "Brilliant!",
188 | "You nailed it!",
189 | "Your content always brightens my day!",
190 | "I'm hooked on your channel. Can't stop watching!",
191 | "Big fan here! Keep inspiring us.",
192 | "I've been binge-watching your videos all week!",
193 | "Your positivity is contagious.",
194 | "Just joined the stream. What did I miss?",
195 | "I'm amazed by your creativity.",
196 | "Your channel is my go-to for inspiration.",
197 | "Shoutout to the amazing community here!",
198 | "I've learned so much from your videos. Thank you!",
199 | "Your energy is infectious. Love tuning in.",
200 | "Let's keep the chat positive and respectful!",
201 | "I've shared your channel with all my friends.",
202 | "You're making a difference with your content.",
203 | "I appreciate the effort you put into making it.",
204 | "Can't wait to see what's next on your channel!",
205 | "Sending virtual hugs to everyone in the chat!",
206 | "Short and sweet, love it!",
207 | "This is gold!",
208 | "Perfect!",
209 | "Thanks a bunch!",
210 | "Mind blown!",
211 | "Great content! Keep it up!",
212 | "I love this channel!",
213 | "Awesome stream! I'm enjoying it a lot.",
214 | "Inspiring content.Keep it coming!",
215 | "Your videos motivate me daily.",
216 | "You're a positive force online.",
217 | "Grateful for your uplifting messages.",
218 | "Your channel spreads joy effortlessly.",
219 | "Impressive content. Well done!",
220 | "You bring smiles to many faces.",
221 | "Your channel brightens my day.",
222 | "You're making a difference, truly.",
223 | "Your authenticity shines through.",
224 | "Refreshing content. Love it!",
225 | "You're a ray of sunshine.",
226 | "Positive vibes all the way!",
227 | "You're a role model for many.",
228 | "Thanks for being so genuine.",
229 | "Love your creative approach.",
230 | "Your passion is inspiring.",
231 | "Your positivity is contagious.",
232 | "You make the internet better.",
233 | "You're a source of inspiration.",
234 | "Your videos are impactful.",
235 | "You make learning enjoyable.",
236 | "Appreciate your valuable insights.",
237 | "You're a true content creator.",
238 | "Your dedication is admirable.",
239 | "Your channel brings joy to many.",
240 | "Thanks for sharing your wisdom.",
241 | "Your energy is infectious!",
242 | "You create smiles effortlessly.",
243 | "Your presence is uplifting.",
244 | "Hi everyone! How's everyone doing today?",
245 | "This is so interesting! I'm learning a lot.",
246 | "Shoutout to the amazing moderators!",
247 | "Can't wait for the next video!",
248 | "Greetings from [Your Location]!",
249 | "I just subscribed! Your channel is amazing.",
250 | "Thanks for the shoutout! You made my day.",
251 | "Can't get enough!",
252 | "Incredible!",
253 | "You rock!",
254 | "Genius!",
255 | "Spectacular!",
256 | "Top-notch!",
257 | "You make learning enjoyable, thank you for that!",
258 | "Your information and content is excellent",
259 |
260 | ]
261 |
262 | export const truncateText = (text, maxLength) => {
263 | if (text.length <= maxLength) {
264 | return text;
265 | } else {
266 | return text.slice(0, maxLength) + "...";
267 | }
268 | };
269 |
270 | export const generateRandomName = () => {
271 | var finalName = nameList[Math.floor(Math.random() * nameList.length)];
272 | return finalName
273 | }
274 |
275 | export const generateRandomComment = () => {
276 | const randomComment = comments[Math.floor(Math.random() * comments.length)];
277 | return randomComment;
278 | }
279 |
280 | // Generating Random chat for Live Chat
281 | // export function generateRandomComment(length) {
282 | // let result = "";
283 | // const characters =
284 | // "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
285 | // const charactersLength = characters.length;
286 | // let counter = 0;
287 | // while (counter < length) {
288 | // result += characters.charAt(Math.floor(Math.random() * charactersLength));
289 | // counter += 1;
290 | // }
291 | // return result;
292 | // }
--------------------------------------------------------------------------------
/src/utils/searchSlice.jsx:
--------------------------------------------------------------------------------
1 | import { createSlice } from "@reduxjs/toolkit";
2 |
3 | const searchSlice = createSlice({
4 | name: 'search',
5 | initialState: {
6 |
7 | },
8 | reducers: {
9 | cacheResults: (state, action) => {
10 | // Using Object.assign to merge the current state with the payload just like spread in ES6
11 | // state = {...state, ...action.payload}
12 | state = Object.assign(state, action.payload)
13 | }
14 | }
15 | })
16 |
17 | export const { cacheResults } = searchSlice.actions
18 | export default searchSlice.reducer
--------------------------------------------------------------------------------
/src/utils/store.jsx:
--------------------------------------------------------------------------------
1 | import { configureStore } from '@reduxjs/toolkit';
2 | import appSlice from './appSlice';
3 | import searchSlice from './searchSlice';
4 | import chatSlice from './chatSlice';
5 |
6 | const store = configureStore({
7 | reducer: {
8 | app: appSlice,
9 | search: searchSlice,
10 | chat: chatSlice,
11 | },
12 | })
13 |
14 | export default store
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef */
2 | /** @type {import('tailwindcss').Config} */
3 | export default {
4 | content: [
5 | './index.html',
6 | './src/**/*.{js,ts,jsx,tsx}'
7 | ],
8 | theme: {
9 | extend: {
10 |
11 | }
12 | },
13 | plugins: [ require('tailwind-scrollbar')]
14 | }
15 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | import dotenv from 'dotenv'
4 |
5 | dotenv.config()
6 |
7 | // https://vitejs.dev/config/
8 | export default defineConfig({
9 | plugins: [react()]
10 | })
11 |
--------------------------------------------------------------------------------
91 | 
100 | {channelTitle}
101 | 
10 |