...

src/components/ChannelCard.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Box, CardContent, CardMedia, Typography } from '@mui/material';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { Link } from 'react-router-dom';
+import { demoProfilePicture } from '../utils/constants';
 
 const ChannelCard = ({ channelDetail, marginTop }) => (
   <Box
@@ -20,15 +21,14 @@ const ChannelCard = ({ channelDetail, marginTop }) => (
     <Link to={`/channel/${channelDetail?.id?.channelId}`}>
       <CardContent sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', textAlign: 'center', color: '#fff' }}>
         <CardMedia
-          image={channelDetail?.snippet?.thumbnails?.high?.url}
+          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}{' '}
           <CheckCircleIcon sx={{ fontSize: '14px', color: 'gray', ml: '5px' }} />
         </Typography>
-        {console.log(channelDetail)}
         {channelDetail?.statistics?.subscriberCount && (
           <Typography sx={{ fontSize: '15px', fontWeight: 500, color: 'gray' }}>
             {parseInt(channelDetail?.statistics?.subscriberCount).toLocaleString('en-US')} Subscribers

src/components/Navbar.jsx

@@ -1,14 +1,13 @@
-import React from "react";
 import { Stack } from "@mui/material";
 import { Link } from "react-router-dom";
 
-import Logo from "../utils/logo.png";
+import { logo } from "../utils/constants";
 import { SearchBar } from "./";
 
 const Navbar = () => (
   <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} />
+      <img src={logo} alt="logo" height={45} />
     </Link>
     <SearchBar />
   </Stack>

src/components/SearchBar.jsx

@@ -11,7 +11,7 @@ const SearchBar = () => {
     e.preventDefault();
 
     if (searchTerm) {
-      navigate.push(`/search/${searchTerm}`);
+      navigate(`/search/${searchTerm}`);
 
       setSearchTerm('');
     }

src/index.js

@@ -5,8 +5,5 @@ import App from './App';
 import './index.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+
+root.render(<App />);

src/utils/constants.js

@@ -12,6 +12,8 @@ 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 />, },
@@ -36,4 +38,5 @@ 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 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'