A highly performant video streaming platform built using React, Redux Toolkit, TypeScript and Tailwind CSS. Users can explore a dynamic homepage, utilize a robust search feature with debouncing, browse and watch videos, view comments, manage subscriptions, personalize liked videos and watch later lists.
This project was created using Vite.
Live URL: YouPlay
This application loads information using the Youtube Data API v3.
To use it, you need to set up a Youtube Data API key.
- Go to Google Cloud Platform(GCP) Console.
- Create a new project.
- In the GCP console, navigate to API & Services dashboard.
- Click on "Enabled APIs and Services".
- Search for "YouTube Data API v3" and enable it for your project.
- Once the API is enabled, navigate to the "Credentials" section.
- Click on "Create Credentials" and select "API Key."
- A new API key will be generated.
- Copy the API key.
Create a .env file in the root of the project.
Then define the VITE_API_KEY environment variable with your Youtube API key.
VITE_API_KEY=AIxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
To install the dependencies, run:
npm install
To run the application locally, run:
npm start
- Home feed with most Popular videos
- Search videos with debouncing effect
- Browse and watch videos
- Get video details (title, channel name, views, likes, channel subscriptions, video description)
- View comments and replies for a video
- Subscribe/Unsubscribe from channels
- Watch later list
- Liked videos list
- Dynamic routing
- Shimmer effect
- Toast messages
- React
- Redux Toolkit
- TypeScript
- Tailwind CSS
- React Router
- React Toastify
- React Icons
- Custom Hooks
If the application does not load anything, or if the search function does not work, most likely the daily Youtube API quota has been exceeded. Please wait for sometime and try again.