Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rajanprajapati1/you_tube_clone
https://github.com/rajanprajapati1/you_tube_clone
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/rajanprajapati1/you_tube_clone
- Owner: rajanprajapati1
- Created: 2023-10-14T04:16:10.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-14T05:05:15.000Z (about 1 year ago)
- Last Synced: 2023-10-15T17:14:29.476Z (about 1 year ago)
- Language: JavaScript
- Size: 99.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# YouTube Clone using React and Vite
This project is a YouTube clone built using React and Vite, providing a minimal setup with Hot Module Replacement (HMR) and some ESLint rules. It offers two official plugins for React:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) which uses Babel for Fast Refresh.
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) which uses SWC for Fast Refresh.
## Overview
This application replicates the core functionality of YouTube, allowing users to view videos, search for content, and play videos. It utilizes the YouTube Data API for fetching video details.
## Features
- Search for videos by keywords.
- View video details including title, description, and channel information.
- Play videos directly within the application.
- Responsive design for various screen sizes.
## Getting Started
1. **Clone the Repository**
```bash
git clone https://github.com/rajanprajapati1/You_Tube_Clone.git
cd You_Tube_Clone
```
2. **Install Dependencies**
```bash
npm install
```
3. **Set up API Key**
Obtain a YouTube Data API Key from the [Google Developers Console](https://console.developers.google.com/). Add this key to your environment variables or directly in the code where required.
4. **Start the Application**
```bash
npm run dev
```
This will start the development server and you can access the app at `http://localhost:3000`.
## Project Structure
```
src/
|-- components/
| |-- Video.js
| |-- VideoList.js
| |-- ...
|-- pages/
| |-- Home.js
| |-- VideoDetail.js
| |-- ...
|-- utils/
| |-- api.js
| |-- ...
|-- App.js
|-- index.html
|-- main.js
|-- ...
```
## Adding API Key
Open `utils/api.js` and replace `'YOUR_API_KEY'` with your actual YouTube Data API Key.
```javascript
const API_KEY = 'YOUR_API_KEY';
export default API_KEY;
```
## Screenshots
## Contributing
If you'd like to contribute to this project, please fork the repository and create a pull request.
## License
This project is licensed under the [MIT License](LICENSE).
## Acknowledgements
- React Team
- Vite Team
- SWC Team
---
Feel free to customize this template with additional information about your project, technologies used, and any special instructions for contributors. Include screenshots or GIFs to showcase your application.