Skip to content

Latest commit

 

History

History
80 lines (52 loc) · 2.48 KB

README.md

File metadata and controls

80 lines (52 loc) · 2.48 KB

🎥 Video-Tube

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.

🌟 Features

  • 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.

🛠️ Tech Stack

  • Frontend: React, TypeScript, Redux Toolkit, React-Bootstrap and Scss
  • Backend: Firebase
  • API: YouTube Data API

🚀 Live Demo

Experience the project live: Video-Tube

📸 Screenshots

  • Home Page and Search Page
Untitled (14)
  • Subscription Page and Watch Page
Untitled (16)
  • Details Page

Video Details

🔧 Installation

  1. Clone this repository:
    git clone https://github.com/anwesha2002/Video-Tube.git
    
  2. Navigate to the project directory:
    cd Video-Tube
    
  3. Install dependencies:
    npm install
    
  4. Set up the environment variables in a .env file:
    REACT_APP_APILEY=youtube_api_key
    
  5. 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