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: https://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.

Home/overview page

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.

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.

Breakdown graphs page

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.

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

Summary graphs 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.

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:

1. Dev.to has access to a lot more historical data so they can report your page views way back

   I'm bias, let me know if you think there are more than this.

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.
  • useSWR 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
  • Enable the sharing of TypeScript interfaces, and other code, between the dashboard and the Azure Functions codebases.
  • View in the common directory of the GitHub repository.
  • For more information on TypeScript project references, read my post on them.

---

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.
• Display whether I've added a canonical URL to the post (for it to display on my website) and reposted it on other sites such as Hashnode and Medium.

---

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!