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!
⚡️ Browse videos using the left navigation bar video categories
⚡️ Search for videos using the search bar
⚡️ Play videos with full controls, just like YouTube
⚡️ Get suggested video lists during video playback
⚡️ Beautiful UI to notify users of internet connection interruptions
⚡️ Seamless redirection to the page upon internet connection resumption
⚡️ Fully responsive design to ensure compatibility with all devices
⚡️ 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.
⚡️ 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!