Live YouTube Subscriber Count

Live YouTube Subscriber Count

• Subscribe please, this is the tutorial: Youtube Live Subscriber count

This is a React web app that displays a live YouTube subscriber count. It fetches data from the YouTube Data API using the channel's username.

Features

• Live Subscriber Count: The app fetches and updates the subscriber count every 5 seconds.
• YouTube API Integration: Uses the YouTube Data API v3 to retrieve channel statistics.
• Environment Variables: API key management through a .env file for security.

Demo

Getting Started

Prerequisites

• Node.js: Ensure you have Node.js installed.
• YouTube API Key: You need a YouTube Data API key. Get it here.

Installation

1. Clone the repository:

   git clone https://github.com/VinCoD/youtube-live-sub-count
   cd youtube-live-sub-count

1. Install dependencies:

   npm install

1. Create a .env file in the root of the project:

   REACT_APP_YOUTUBE_API_KEY=your_youtube_api_key_here

1. Start the development server:

   npm start

1. Open the app in your browser:

The app should automatically open in your browser at http://localhost:3000. If it doesn't, you can manually navigate to this URL.

Usage

1. Update the Username:

In src/api/youtube.js, replace 'YOUR_CHANNEL_USERNAME' with the YouTube username of the channel you want to track.

   const USERNAME = 'YOUR_CHANNEL_USERNAME';

1. Customize Fetch Interval:

The app fetches the subscriber count every 5 seconds. You can adjust this interval in the LiveSubCount component:

   const intervalId = setInterval(fetchSubCount, 5000); // Fetch every 5 seconds

Deployment

To deploy the app, you can build it for production and host it on a service like GitHub Pages, Netlify, or Vercel.

1. Build the app:

   npm run build

1. Deploy the build directory to your preferred hosting service.

Contributing

Contributions are welcome! Please fork the repository and create a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgements

• YouTube Data API v3
• React

Contact

• Vincent Otieno: [e-mail]
• GitHub: VinCoD
• YouTube: KwargDevs

Sample Response from API

{
    "kind": "youtube#channelListResponse",
    "etag": "gZC1bvkr93--vyIc5-kUeSqXT0A",
    "pageInfo": {
        "totalResults": 1,
        "resultsPerPage": 5
    },
    "items": [
        {
            "kind": "youtube#channel",
            "etag": "lt20B3xn1o8JmPY6F3SvLu92joQ",
            "id": "UC40gjlEBqBN2Flb3KC6WlHA",
            "snippet": {
                "title": "Pseudomonous",
                "description": "Welcome to Pseudomonous, your ultimate gaming destination! 🎮\n\nJoin me as I stream the latest and greatest in gaming, including Fortnite, Call of Duty, EA Sports FC 24, and Grand Theft Auto. Get ready for epic gameplay, exciting moments, and a community of gamers who share your passion. \n\n🔔 Subscribe for live streams, gaming clips, and highlights!\n👍 Don't forget to like, comment, and share!\n\n#Pseudomnous #Gaming #Fortnite #CallofDuty #EASportsFC24 #GTA #PS5 #PS4 #LiveStreaming #GamingCommunity #GamingClips #Shorts #ForYou #FYP #Comedy #Food #euro2024 #championsleague #usa \n",
                "customUrl": "@pseudomonous",
                "publishedAt": "2021-01-19T11:24:06.024573Z",
                "thumbnails": {
                    "default": {
                        "url": "https://yt3.ggpht.com/kSsNDl3M6rSs_qMz0_gO9aeqlHtca-Z3BovwnSwyCYjGgh6PB2OiFSp7hkWPjBw5Gu1umhztjQ=s88-c-k-c0x00ffffff-no-rj",
                        "width": 88,
                        "height": 88
                    },
                    "medium": {
                        "url": "https://yt3.ggpht.com/kSsNDl3M6rSs_qMz0_gO9aeqlHtca-Z3BovwnSwyCYjGgh6PB2OiFSp7hkWPjBw5Gu1umhztjQ=s240-c-k-c0x00ffffff-no-rj",
                        "width": 240,
                        "height": 240
                    },
                    "high": {
                        "url": "https://yt3.ggpht.com/kSsNDl3M6rSs_qMz0_gO9aeqlHtca-Z3BovwnSwyCYjGgh6PB2OiFSp7hkWPjBw5Gu1umhztjQ=s800-c-k-c0x00ffffff-no-rj",
                        "width": 800,
                        "height": 800
                    }
                },
                "localized": {
                    "title": "Pseudomonous",
                    "description": "Welcome to Pseudomonous, your ultimate gaming destination! 🎮\n\nJoin me as I stream the latest and greatest in gaming, including Fortnite, Call of Duty, EA Sports FC 24, and Grand Theft Auto. Get ready for epic gameplay, exciting moments, and a community of gamers who share your passion. \n\n🔔 Subscribe for live streams, gaming clips, and highlights!\n👍 Don't forget to like, comment, and share!\n\n#Pseudomnous #Gaming #Fortnite #CallofDuty #EASportsFC24 #GTA #PS5 #PS4 #LiveStreaming #GamingCommunity #GamingClips #Shorts #ForYou #FYP #Comedy #Food #euro2024 #championsleague #usa \n"
                },
                "country": "US"
            },
            "statistics": {
                "viewCount": "12055",
                "subscriberCount": "37",
                "hiddenSubscriberCount": false,
                "videoCount": "91"
            }
        }
    ]
}