A fully functional video streaming platform built using the YouTube Data API. This application allows users to search, explore, and stream videos seamlessly with an intuitive and responsive user interface.
- Real-Time Video Streaming: Fetch and stream videos directly from YouTube's database.
- Search Functionality: Responsive search bar for querying videos by keywords.
- Category-Based Browsing: Easily explore trending videos across categories like music, sports, gaming, and more.
- Infinite Scrolling: Enjoy uninterrupted browsing with dynamically loaded content.
- Detailed Video Information:
- Duration
- Channel icons
- View counts, likes, and comments statistics
- Enhanced UI: A visually appealing and user-friendly interface built with Tailwind CSS.
- optimized API Call: optimized API usage with intelligent caching and minimal requests for faster loading.
- Frontend: React, TypeScript, Redux Toolkit, React-Bootstrap and Scss
- Backend: Firebase
- API: YouTube Data API
Experience the project live: Video-Tube
- Home Page and Search Page
![Untitled (14)](https://private-user-images.githubusercontent.com/116761608/397479436-ecb43a16-422f-415d-b657-89f215192190.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkwMjUzNjgsIm5iZiI6MTczOTAyNTA2OCwicGF0aCI6Ii8xMTY3NjE2MDgvMzk3NDc5NDM2LWVjYjQzYTE2LTQyMmYtNDE1ZC1iNjU3LTg5ZjIxNTE5MjE5MC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjA4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIwOFQxNDMxMDhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02ODFmNTc5NmQwNjNiYzg2YWY1ZmVhMzQ0ODMxYzliNmUwNWM2MDI3ODdjZDY5YTEzMmJlYzEzM2FhYjY2NDhkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.GNIvIitkAXPFJJlmaLI82VdGR4JB1fiIzGNmfF0YY-g)
- Subscription Page and Watch Page
![Untitled (16)](https://private-user-images.githubusercontent.com/116761608/397480249-135a04cd-5c20-4cb6-a705-8ccc2426cd52.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkwMjUzNjgsIm5iZiI6MTczOTAyNTA2OCwicGF0aCI6Ii8xMTY3NjE2MDgvMzk3NDgwMjQ5LTEzNWEwNGNkLTVjMjAtNGNiNi1hNzA1LThjY2MyNDI2Y2Q1Mi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjA4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIwOFQxNDMxMDhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02OWRlYTEzODdiNjBmZWExMzFiYjllYjY4MWY4M2FlZjcyYTE3ZmEwOTI4ZjhmMmVmNGJkN2QzNDc2ODk3YjMzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.oBGZ9n19DDarDneegii4HqEHSK5iBd108pZ7MDAlX-w)
- Details Page
- Clone this repository:
git clone https://github.com/anwesha2002/Video-Tube.git
- Navigate to the project directory:
cd Video-Tube
- Install dependencies:
npm install
- Set up the environment variables in a .env file:
REACT_APP_APILEY=youtube_api_key
- Start the development server
npm start
📂 Project Structure
src/
├── components/ # Reusable React components
└── styles/ # React-Bootstrap and Scss
├── pages/ # Common Route Page
├── redux/ # Redux Toolkit slices and store
├── Data/ # API service functions
└── Screen/ # Application pages
└── styles/ # React-Bootstrap and Scss