Devalytics - DIY detailed Dev.to Analytics

I am archiving this project because DEV has added a more in-depth analytics - The remaining portion of this post I will be leaving up because I think it's fairly educational

Background

I'm a huge math nerd and love creating dashboard/data visualization pages whenever I have the chance. Recently I had some time to work on a personal creative project and decided to tackle one that's been on my "it'd be cool to do this eventually" list - create a daily breakdown dashboard for Dev.to stats!

Personal Goals going into Devalytics

• Launch Early - Something I know I'm not particularly good at is sharing early and not getting caught in the "Not quite perfect yet" status until I move on to another project.
• Use Dark Colors - I'm not going to say the site is a pure Dark Theme, but I very intentionally wanted to use some darker colors in my design.
• Minimize Cost - This is both monetary cost and mental cost. I want this to hopefully be a viable option for anyone to spin up on their own and not require too many hoops to jump through.
  • Note: Heroku and Firebase could require payments if you had enough posts or checked your stats enough on a given day, but I think the break point is high enough that most people won't hit it unless you have many people potentially visiting your site - so unless you share it publicly like I just did, you should be in the clear!

What I used

Backend

• Heroku with Node.js for grabbing Dev's API data each morning and pushing the data to Firebase
• Firebase for storing the data

Frontend

The reasoning for all of these choices are familiarity and personal preference

• Vue.js (2.x)
• Tailwind
• Chart.js

Github Repo for Frontend

Set up your own Devalytics

I'm going to try and make these more clear over time on the repositories' Readme's

Firebase Setup

1. Sign up for/Log in to Firebase
2. Create a new project (Name it however you'd like!)
3. Configure a Firestore Database under Cloud Firestore > Create Database
   • I started in Production mode and set the location as the default.
4. Set your Firestore rules as:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read;
      allow write: if false;
    }
  }
}

1. Set up a Service Account. This is located on your Project's Settings > Service Accounts > Create one for Node.js and save the .json file for reference later (For the Environment variables on Heroku).

Heroku Setup

1. Sign up for/Log in to a Heroku Account
2. Create a new Heroku app (You can name it whatever you want)
3. Fork the Devalytics GitHub Repo
4. Connect the fork to your Heroku app in your app's dashboard under Deploy > Deployment Method
5. Add Environment variables for Firebase & Service Account (Variable names listed below)
6. Add the "Heroku Scheduler" add-on to your project and set it to run npm run daily once a day at whatever time you desire.

Your Dev.to API Key

• DEV_API_KEY

Your Firebase Information (This is presented as a JSON object by firebase - var firebaseConfig)

• FIREBASE_APP_ID
• FIREBASE_AUTH_DOMAIN
• FIREBASE_DB_URL
• FIREBASE_KEY
• FIREBASE_MESSAGING_SENDER_ID
• FIREBASE_PROJECT_ID
• FIREBASE_STORAGE_BUCKET

The following Service Account Variables:

• SA_auth_provider_x509_cert_url
• SA_auth_uri
• SA_client_email
• SA_client_id
• SA_client_x509_cert_url
• SA_private_key
• SA_private_key_id
• SA_project_id
• SA_token_uri
• SA_type

Netlify Setup

1. Fork the front end repository
2. Sign up for/Log in to a Netlify Account
3. Create a new Netlify Site
4. Link the new site to your fork of the Frontend repository
   • Build Command: yarn build
   • Publish Directory: dist
5. Add Environment variables for Firebase (The same variables as the Firebase section from Heroku above):
   • This is located under Settings > Build & Deploy > Environment

• FIREBASE_APP_ID
• FIREBASE_AUTH_DOMAIN
• FIREBASE_DB_URL
• FIREBASE_KEY
• FIREBASE_MESSAGING_SENDER_ID
• FIREBASE_PROJECT_ID
• FIREBASE_STORAGE_BUCKET

Where to from here?

One of the unfortunate parts of Devalytics is the inability to backdate data - and if there's ever a day the Heroku script doesn't run for any reason, that day will be lost to the void. Because of that, I wanted to start collecting data as soon as I could, so that as I build more analytics into the site, it will be easier to verify everything is working properly since data will exist for more than 3 (low-activity) days.

Some additions I already know I'd like to add:

• Date Filters
• Article specific data views
• Tag breakdowns
• Don't require clicking "Update" for the Daily Summary chart

If you are planning to roll out your own Devalytics instance or have data you'd like to see added - let me know in a comment below! 👇

Comments

[Emma Goto 🍙]

That's pretty cool! I wonder if DEV stores this sort of data (views per day) somewhere or if they just store the cumulative count? Might be interesting to see if this could be added as a feature 👀

[Tyler V. (he/him)]

Based on my understanding of views on DEV as per this post, I don't think they track it (at least not at an article level).

Dev.to Writing: Counting Views

Nathan Kallman ・ Aug 21 ・ 3 min read

#meta #writing #tutorial