Hello all, I'm back with another project. This time, I built a Real-Time Discord badge that shows the total member count.
In this blog, I will share with you:
Why did I build this?
Why add a dynamic Discord badge to your GitHub Readme?
A step-by-step guide to adding this badge to your GitHub README, including how to customize it.
How I handled real-time Discord data, added Redis caching, managed rate limits, and made it fast.
So, let's start. 3... 2... 1... 🌱
Why did I build this?
I want to tell you a super short story for this. The company for which I'm working wanted me to add a dynamic Discord badge to their GitHub README that shows the total member count.
I tried searching on the web. After a lot of searching, I found that Discord already provides a "Server Widget JSON API". For this, you have to go to your Discord server settings > engagement, and then turn on the widget, and you will be able to find the API link and the Server ID.
You can create a badge using this Server ID as shown below:
But the thing is, it will only show the online members count and not all the members.
I tried to search a lot about "how to show all members' count", but I wasn't able to find any.
And thus, I decided to create one. It was super easy. When I built it for my company, I realized there may be more people who want this badge as well, so I made it public for the community.
I don't know if such badges are already there in the market or not. I tried to find a lot, and the disappointment made me build it. If you know any such badges or methods to show dynamic Discord badges that update in real-time, then please let me know in the comment section.
Why add Discord Live Members Count Badge to your GitHub Readme?
Many open-source projects and communities wanted to showcase their Discord server growth on their GitHub READMEs because:
The bigger the community, the more trust it builds. Thus, showing your total Discord members count will not only market your product, but also build trust in future users.
Real-time metrics make your README dynamic. It gives a sense that the project is active and maintained.
Attracts contributors and collaborators. A growing community signals engagement, which can draw in more developers.
Helps community managers track growth. Badges provide a quick glance at server stats without needing to log into Discord.
Encourages more users to join. Seeing a badge with large numbers can trigger FOMO and boost Discord join rates.
Improves project credibility. Just like stars and forks, community size becomes a social proof metric.
Easier comparison between similar projects. Potential users can quickly evaluate community support through visible numbers.
And the most important point, "SNEAK-PEEK YOUR RIVALS OR ENEMY, OR FRIEND DISCORD COMMUNITY MEMBERS". I don't know about you, but I do it. All you need is their Server ID. Keep reading the blog, and I will tell you how to do this. (I'm not promoting any such activities. It's bad. Anyway, I don't care. 😂)
Step-by-Step Guide: Adding Discord Live Members Count Badge to Your GitHub README
Let's get your Discord badge up and running in less than 5 minutes!
Step 1: Add the Live Count Bot to Your Server
First, you need to invite my bot to your Discord server:
What if you're not a core member of the Discord server? The above option is present only for the server owner, admins, and moderators (sometimes). But if you're none of them and still want to add this badge? Remember, I told you above the "Sneak-Peek" thing? We will apply it here.
If you're not a core member and still want to add this badge or want to sneak peek, then follow the steps below:
Open your Users Settings
Navigate to Advanced
Toggle ON the "Developer Mode" option
Now, right-click on any server and you will get an option to Copy Server ID
NOTE:The Live Members Count must be present in that server.
Step 3. Customize your Badge
Let's make it fast and as simple as possible.
Copy this template, add your Server ID and Invite Link(optional, but important) in the corresponding places, and paste it in your GitHub Readme.
Same for other endpoints. Btw, pink is my favorite color. I don't know why I created a green badge. Maybe the devil made me do it.
There's a possibility that you might get frustrated because you have to change the color and scale multiple times to get your best. Each time, you have to wait for the page to reload or hit enter.
To become your HERO again, I built the website too.
Paginate through all members of a guild using Discord's API.
while (keepFetching){constres=awaitaxios.get(`https://discord.com/api/v10/guilds/${guildId}/members`,{headers:{Authorization:`Bot ${DISCORD_BOT_TOKEN}`},params:{limit:1000,after},});...}
Caching:
Tries Redis first using key guild:{guildId}:members.
if (redis){try{constcached=awaitredis.get(cacheKey);if (cached){console.log(`[Cache] HIT for ${guildId}`);returnJSON.parse(cached);}else{console.log(`[Cache] MISS for ${guildId}`);}}catch (err){console.warn(`[Cache] Redis error on GET: ${err.message}`);}}
On cache MISS, fetches from Discord and caches the result.
TTL is controlled via CACHE_TTL environment variable (default 300 seconds).
Rate Limiting Handling:
If API responds with 429, waits for retry_after seconds, and retries.
Adds setTimeout between requests to avoid hitting limits.
if (err.response?.status===429){constretryAfter=err.response.data?.retry_after||1;awaitnewPromise((r)=>setTimeout(r,retryAfter*1000));continue;}
if (scale!==1){svg=svg.replace(/<svg([^>]+?)width="(\d+)" height="(\d+)"/,...).replace(/<svg[^>]*>/,`$1<g transform="scale(${scale})">`).replace(/<\/svg>/,'</g></svg>');}
Error Handling: If any call fails, a red "error" badge is returned.
Quick Summary
discord-members = fast estimate, no intents.
discord-bots & discord-total = precise, uses member list and cache.
fetchAllMembers handles paging, rate limits, and caching.
The setup supports scaling, CDN caching, and proper Discord rate limit compliance.
Step 3. Create UI and Deploy.
You can use any AI tool for creating the UI. I used V0 by Vercel. Also, for deploying my application, I used Vercel.
Wait, wait, wait! Did you just ask for a Video Explanation? I have it for you already. Check it out here:
[ ] PROMOTION:
For the default badges on the website and the readme, I have used LLMWare's Discord Server with their consent. If you don't know, llmware just launched "Model HQ: Your Private AI Companion". The interesting part is that it runs locally and without internet.
discord-live-members-count-badge.vercel.app
