I built a dev.to stats card generator (followers & views count)

Why

I like to share my achievements and having more than 30k views (at the time of writing) on my dev.to blog is a good achievement. Also, I want you to know that my content is helpful and trustworthy, because if it is not then why other people follow me and read my articles!

Dev.to doesn't display followers count or views count so I built a Node.js server that scrapes my followers and views count and renders an SVG image card to display them in a cool way.

Here's an example embed in the GitHub repository.

If you want to see it get updated follow me or view one of my articles then simply refresh.

How

1. The Node.js server accepts an HTTP request
2. It fetches my dashboard using Axios (HTTP Client)
3. It gets the views and followers count using cheerio (HTML Parser)
4. It puts the values in an already designed SVG template (by draw.io)
5. Sends the generated SVG back to the client to display the SVG image

I used SVG because the It is actually some XML code describing how it looks so I can easily embed my values in the text tags without doing heavy image processing.

When I fetch my dashboard I use an authentication cookie which I got from the console and It will be expired next year if I didn't visit dev.to or no one visited a website that displays my stats card so, no need to automate a login workflow.

It is open source so you can fork the repo and deploy your own server from https://github.com/Amr2812/devto-stats-card.
You will need to rename .env.sample file to .env and replace the cookie header constant to your own one and in the config.js file you will need to replace the blog URL constant to your own one.

Star the project If you like it ⭐

---

If you like the article you can join my newsletter and follow me.

You can also buy me a coffee that would help me grow as an open source developer :)

Comments

[Yuwang Cai]

Great work! Better if it can support dark mode, which I think will go in svg-generator.js.

[Amr Elmohamady]

Thanks!
I will have to design a new SVG using draw.io with the dark mode and enable the option as a query parameter. You can contribute if you like.
I will add it soon when I have some free time.

[Leonardo Montini]

Comic saaaaaans 😅

Cool idea though :)

[Amr Elmohamady]

Cool idea and a cool font 😅