This project is a YouTube clone built with React, utilizing RapidAPI for API calls, Chakra UI for the user interface components. It includes features such as fetching video data, displaying video details, and playing videos using the React Player component.
To get started with this project, follow these steps:
- Clone this repository to your local machine:
## bash
## Copy code
cd youtube-clone
Install dependencies:
bash
Copy code
npm install
Set up RapidAPI:
Sign up for a RapidAPI account and obtain your API key.
Replace "YOUR_RAPIDAPI_KEY" in the src/utils/api.js file with your actual RapidAPI key.
Start the development server:
bash
Copy code
npm start
Open your browser and navigate to http://localhost:3000 to view the app.
Features
Video Search: Search for videos using keywords.
Video Playback: Play videos using the ReactPlayer component.
Responsive Design: The app is designed to work on various screen sizes.
Chakra UI: Utilizes Chakra UI for consistent and customizable UI components.
Folder Structure
java
Copy code
youtube-clone/
│
├── public/
│ └── index.html
│
├── src/
│ ├── components/
│ │ ├── VideoCard.js
│ │ ├── VideoDetails.js
│ │ └── ...
│ │
│ ├── pages/
│ │ ├── Home.js
│ │ ├── SearchResults.js
│ │ └── ...
│ │
│ ├── utils/
│ │ └── api.js
│ │
│ ├── App.js
│ └── index.js
│
├── .gitignore
├── package.json
├── README.md
└── ...
Dependencies
React: JavaScript library for building user interfaces.
React Router: Declarative routing for React applications.
Chakra UI: Component library for React applications.
React Player: React component for playing media from various sources.
RapidAPI: API marketplace for developers, used for accessing the YouTube API.
Contributing
Contributions are welcome! Feel free to open issues or submit pull requests to improve the app.
License
This project is licensed under the MIT License - see the LICENSE file for details.
css
Copy code