DEV Community

Odipo Otieno (KwargDevs)
Odipo Otieno (KwargDevs)

Posted on • Edited on

Live YouTube Subscriber Count

#webdev #javascript #beginners #programming

Live YouTube 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

Live sub count

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
Enter fullscreen mode Exit fullscreen mode
  1. Install dependencies:


   npm install
Enter fullscreen mode Exit fullscreen mode
  1. Create a .env file in the root of the project:


   REACT_APP_YOUTUBE_API_KEY=your_youtube_api_key_here
Enter fullscreen mode Exit fullscreen mode
  1. Start the development server:


   npm start
Enter fullscreen mode Exit fullscreen mode
  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';
Enter fullscreen mode Exit fullscreen mode
  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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  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

Contact

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"
            }
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

nikl profile image

Level Up Your C# Skills with Pieces!

Nik L. -

easyvipin profile image

Next.js Tutorial : Adding Navbar with active Styling in a Server Component Layout

Vipin Chandra -

itamartati profile image

A Beginner’s Guide to Angular Signals 🌟

Itamar Tati -

thangchung profile image

CoffeeShop App Infused with AI - Intelligent Apps Development

Thang Chung -