A sleek, modern, and fully functional YouTube Clone built with React, Material-UI, and powered by RapidAPI for YouTube data. Dive in and explore a minimalistic yet powerful video streaming experience.
🚀 Live Demo: Simple YouTube Clone
🔗 GitHub Repository: GitHub
- Search videos with real-time suggestions 🔍
- Watch videos with an embedded video player 🎥
- Responsive design for mobile, tablet, and desktop 📱💻
- Modern UI built with Material-UI 🎨
| Technology | Purpose |
|---|---|
React |
Frontend Framework |
Material-UI |
Styling and UI Components |
Axios |
API Requests |
React Router |
Navigation |
React Player |
Embedding Video Player |
Here’s a list of the major dependencies used in this project:
{
"@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"
}This project uses RapidAPI's YouTube API to fetch:
- Video details
- Search results
- Related videos
Get your API key from RapidAPI YouTube and add it to your .env file:
REACT_APP_YOUTUBE_API_KEY=your_api_key_hereFollow these steps to get started:
-
Clone the repository:
git clone https://github.com/hari7261/Youtube-Clone.git cd Youtube-Clone -
Install dependencies:
npm install
-
Set up environment variables:
- Create a
.envfile in the root directory. - Add your RapidAPI YouTube API key as shown above.
- Create a
-
Start the development server:
npm start
-
Access the app: Open your browser and navigate to
http://localhost:3000.
.
├── public
├── src
│ ├── components # Reusable components (Navbar, Sidebar, etc.)
│ ├── pages # Main pages (Home, VideoDetail, etc.)
│ ├── utils # Utility functions (API calls, constants)
│ ├── App.js # Main App component
│ └── index.js # Entry point
└── .env # API key configuration
This project is licensed under the MIT License. Feel free to use, modify, and distribute it as you wish.
