thebarton / playtube

PlayTube is a user-friendly video streaming platform with full playback controls, which I built using my ReactJS, Tailwind CSS and API based data handling skills.

PlayTube - watch share & enjoy

Live Project Link

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!

---

Features 📋

⚡️ 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.

Pages 📚

✔️ Home
✔️ video
✔️ searchResult

Frameworks & Libraries used 📚

ReactJS Tailwind CSS tailwindcss/line-clamp react-router-dom axios js-abbreviation-number moment react-icons react-player

Usage 🍕

To use this project, follow these steps:

1. Clone the repository.
2. Install the dependencies using npm install.
3. 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.
4. Subscribe that api and copy the api key.
5. Create a .env file in the root directory and add your YouTube API key as REACT_APP_YOUTUBE_API_KEY=<your-api-key>.
6. Start the development server using npm start.
7. Open your web browser and navigate to http://localhost:3000.

⭐ Star this repo on GitHub — it helps!