Welcome to PlayTube, a video streaming platform built using React, Tailwind CSS and YouTube's public API. With PlayTube, you can watch your favorite videos in a user-friendly interface, without any distractions. PlayTube offers seamless video playback, easy video discovery, and a simple user interface. Get started today and discover a world of video content at your fingertips!
1. Browse videos using the left navigation bar video categories
2. Search for videos using the search bar
3. Play videos with full controls, just like YouTube
4. Get suggested video lists during video playback
5. Beautiful UI to notify users of internet connection interruptions
6. Seamless redirection to the page upon internet connection resumption
7. Fully responsive design to ensure compatibility with all devices
8. PlayTube's Shimmer UI effect adds a subtle, eye-catching animation that lets users know when content is loading, enhancing the overall user experience and making it more visually appealing.
9. PlayTube comes with a Light and Dark mode feature. This feature automatically matches the user's browser theme preference upon loading, with the option to toggle between modes at any time for a personalized viewing experience.
✔️ Home
✔️ video
✔️ searchResult
ReactJS Tailwind CSS tailwindcss/line-clamp react-router-dom axios js-abbreviation-number moment react-icons react-player
To use this project, follow these steps:
- Clone the repository.
- Install the dependencies using
npm install. - Now go to the Rapid API website. Type "youtube" and search, then among the all result choose the api named
"YouTube", only "YouTube". That is a Freemium and Verified api. - Subscribe that api and copy the api key.
- Create a
.envfile in the root directory and add your YouTube API key asREACT_APP_YOUTUBE_API_KEY=<your-api-key>. - Start the development server using
npm start. - Open your web browser and navigate to
http://localhost:3000.
⭐ Star this repo on GitHub — it helps!