This is a YouTube clone built using React, Tailwind CSS, and the YouTube Data API (v3) from RapidAPI. It features displaying videos with categories, a responsive design, modals displaying video details, and the option to redirect to YouTube to play the video.
- Video Display: Display videos from YouTube using the YouTube Data API.
- Categories: Categorize videos based on their metadata.
- Responsive Design: Fully responsive UI using Tailwind CSS.
- Modal Popups: Display additional information about each video in a modal.
- External Link: Redirect users to YouTube to play the selected video.
To run this project locally, follow these steps:
-
Clone the repository:
git clone https://github.com/your-username/your-repository.git
-
Navigate into the project directory:
cd your-repository -
Install dependencies using npm:
npm install
-
Obtain a YouTube Data API key from RapidAPI.
-
Create a
.envfile in the root of the project and add your API key:REACT_APP_YOUTUBE_API_KEY=your-api-key-here -
Start the development server:
npm start
-
Open your browser and visit
http://localhost:3000to view the app.
This project uses the YouTube Data API (v3) to fetch videos. You need to provide your own API key to retrieve data from YouTube. Get your API key from RapidAPI.
Contributions are welcome! Here's how you can contribute to this project:
- Fork the repository.
- Create a new branch (
git checkout -b feature/improvement). - Make your changes.
- Commit your changes (
git commit -am 'Add some feature'). - Push to the branch (
git push origin feature/improvement). - Create a new Pull Request.
This project is licensed under the MIT License. See the LICENSE file for more details.
- React: A JavaScript library for building user interfaces.
- Tailwind CSS: A utility-first CSS framework for building custom designs.
- YouTube Data API: Provides access to YouTube videos, playlists, and channels.