I built an advanced Dev.to dashboard with historic data using Next.js and Azure Functions 📈

Do you ever watch your view count rise and wonder which posts are being read the most? I know I did.

That is one reason why I chose to develop my own Dev.to analytics dashboard to display historical data such as view, reaction and follower increase over the last 24 hours, 7 days and 30 days.

You can view the live dashboard here: devto-analytics.wallis.dev. You’ll notice that it’s styled to look like Dev.to.

Incredibly, Dev.to has recently added their own analytics page as well as having an “analytics” option on each post (next to edit, manage). There are some differences between the built-in dashboard and mine.

Why build an analytics dashboard?

I really enjoy posting on Dev.to. I recently rewrote my whole website to use Dev.to as a CMS to enable myself to continue posting here while using my own site as the canonical URL.

I wanted, however, to see more in-depth information about each post such as view, reaction and follower increases over a given period of time. By default, I didn’t have access to any data that would allow me to calculate any increases.

As a result, I ended up building my own analytics dashboard using Next.js, Tailwind CSS, Recharts, the Dev.to API and Azure Functions & Cosmos DB.

You can view the code on GitHub.

How I source the historical data

If you’ve used the Dev.to API before, you’ll have noticed that, for the moment, you’re unable to access any historical data. This makes it difficult to know how popular a post is over a given period of time (before the built-in analytics).

To record my historical data I created an Azure Function that saves my latest article and follower data, gathered using the Dev.to API, to a Azure Cosmos Database. The functions that save my article and follower data run every hour.

In addition, I created a couple of HTTP Azure Functions so that I can access the data.

If you’re wondering, I’m entirely within the free tier on Azure — so it isn’t costing me anything to record my historic data.

You can view the Azure Functions implementation on GitHub.

The dashboard

The dashboard consists of three pages:

1. Home/overview page — basically an overview of my current stats and periodical view/reaction/comment/follower increases
2. Breakdown graphs page — Charts that break down stats from the overview page so that I can easily see information such as what articles have been most read this week.
3. Summary graphs page — Charts that display the increase of views/reactions/followers from hour-to-hour and day-to-day

You can view the dashboard implementation on GitHub.

The dashboard’s UI is based heavily on Dev.to’s styling. I wanted it to appear as an extension to Dev.to’s current implementation. The home page is styled to look like an advanced version of the Dev.to dashboard page that contains your general stat overview (total page views, reactions, comments) and a list of any draft and published articles.

Moreover, it was a lot of fun essentially cloning Dev.to to try to make the dashboard look as alike as possible. Try switching between the dashboard home page and your Dev.to dashboard in different tabs!

On my dashboard, I’ve added follower and last posted date to the overview stats — as I care about them more than “Listing’s created” and “Credits available”. Most overview stats also contain two pieces of historical data. For page views, for example, I’m displaying the total page view increase for the past 24 hours and the past 7 days.

Overview stats

Looking further down the page, you’ll see a sortable list of my published posts containing the usual stats for each (views, reactions and comments). I’ve also added the 24 hours, 7 days and 30 day increase for each stat, for every post.

Individual post stats

This page displays graphs that break down increases for views, reactions and comments. Its purpose is to show me what posts have been most popular over a given period of time.

Hovering over a breakdown graph

While its styling is based on Dev.to, unlike the home page I haven’t copied a specific Dev.to page.

The final page contains graphs that details how views, reactions and comments have increased over a period of time. Using this page I can interpret such information as if my follower increases have stagnated or are increasing at a good level.

Page view trends over the past 24 hours and 7 days

Difference between my dashboard and the built-in analytics page

If you’ve read this far you’re likely wondering what the difference between my dashboard and the built-in Dev.to analytics dashboard. The following is my opinion, let me know in the comments if you disagree.

What Dev.to built-in analytics does better:

What my dashboard does better:

1. Integrates increases/historical data into the main dashboard screen better. I’d love it if my Dev.to dashboard displayed my daily, weekly and monthly increases for each post.
2. Displays follower and last posted date in the overview stats — I don’t care about listings or credits. Moreover, I’d love to display my current posting streak instead of the time since I last posted. This would help me ensure I’m on track for my 16-week badge.
3. The breakdown page makes it easy to see why my view count has risen.

Technical details

• Next.js — powers the dashboard.
• The built-in data fetching method getStaticProps is used to preload the article and follower data at build time. Incremental Static Regeneration rebuilds the page to minimise how out of date the initially served page is.
• fetches the current article and follower data once the page has loaded.
• Combining getStaticProps and useSWR means that the dashboard loads fast, but will always display the most up-to-date data.
• Azure Functions and Azure Cosmos DB
• Saves historical data gathered using the Dev.to API.
• Serves the data via a HTTP route for the UI to consume.
• Tailwind CSS — styling
• React-icons — various icons such as the question mark and GitHub icon on the navigation bar.
• Recharts — the chart library used on the graph pages
• TypeScript project references

Future improvements

There are few features that I want to add to the dashboard:

• Calculate and display my posting streak (by week) in the stat overview — should help with the 16-week streak badge.
• Average stats — such as average page views or followers gained per day.
• Predicted stats — days until I hit 100,000 page views for example.

Summary

In this post, I’ve introduced my Dev.to analytics dashboard that helps me understand how my stats are changing over time and identify popular posts.

Would you like to make your own dashboard like this? Have any thoughts on the dashboard? Let me know in the comments!

If you are looking to fork/clone my GitHub repository then I’ll need to make the documentation a little better 😅 — it’s pretty straightforward to do once your Azure Functions/Cosmos DB is set up.

P.S. Why isn’t it password protected?

I’m aware that by posting this blog I’m allowing access to my private post data to anyone who stumbles across it. I’m OK with this because:

1. I want to show the dashboard off as a portfolio piece
2. I want others to be able to copy/clone it so that they can see their own historical Dev.to data
3. I couldn’t come up with a reason to hide it. I understand why it is private by default but in my case, I’m happy with others seeing it.

Let me know what you think of my Dev.to analytics dashboard!

Thanks for reading!

Originally published at https://wallis.dev.