Josh Amore Blog

A tool to analyse a reddit user's karma (TopSubreddit.tech)

August 10, 2020

Topsubreddit.tech screenshot

Edit: This domain has moved from TopSubreddit.tech to https://topsubreddit.joshamore.com.

You stumble on a reddit user with 1M karma. That’s obscene. Where are they getting all those juicy upvotes?

You could scroll through their top posts section, but that’s not going to give you an objective picture.

What’s the solution?

Enter their username in TopSubreddit.tech and boom — you’ve got a sortable list of the user’s subreddits along with karma totals.

What’s happening under the hood?

After entering a reddit username and clicking Get Top Submissions from the UI, the application backend is taking the entered username and calling the reddit API to request the user’s last 1000 submissions.

The submissions are then catagorised based on their subreddit. A total count is tracked for each subreddit based on the karma count of each submission.

Once all 1000 submissions have been categorised, a JSON object containing the subreddits and their scores is returned to the application frontend.

The UI will then render a table containing each subreddit’s name and total karma score. The table can be sorted by either karma score (ascending/descending) or subreddit name (alphabetical).

What if the user has no submission history, doesn’t exist, or has been banned?

If the user doesn’t have a post history or doesn’t exist, you’ll get the below error:

topsubreddit error message screenshot

Technical Specs and Tools

The code is publicly viewable on GitHub here.

Frontend

Frontend logos

The frontend is a minimal React single page app (SPA). Everything happens from the index route (topsubreddit.tech/).

It’s a pretty simple frontend logic:

  • Get a reddit username
  • Render a visual loading spinner
  • Call backend API to get the user’s submission data
    • If data is received, render a table containing the provided data.
    • If no data is received, render an error component and rerender the get username input field.
  • Repeat if a new username is entered

I also used MaterialUI componenets for a concistant design flow (such as the top appbar).

Backend

backend logo

The backend is build with Node.js using Express.js as the server framework.

I went with Express since the backend scope was so small and it usually works well with other Node packages.

I also used Snoowrap to make my calls to the reddit API.

The backend logic:

  • Receive reddit username as a param
  • Call reddit API with username and request last 1000 submissions
    • If submissions are returned, iterate over each submission and push the title, subreddit, and score to separate arrays. Respond to API call with the three arrays (titles, subreddits, and scores) in a JSON object.
    • If no submissions are returned (or an error), respond to API call with an error.
  • Repeat.

Hosting

The frontend is hosted on Netlify as an automated React deployment. A dedicated GitHub repo is used to stage and deploy the frontend code.

The backend is hosted on Heroku. A dedicated Git repo is used to deploy backend changes to Heroku.

Both hosting deployments are within the free tiers.

The only downside to this hosting setup is Heroku’s cold starts. After the server goes to sleep, it takes between 5-30 seconds to warm up. The minimise the load time, there’s a ping fetch call firing when you first load the page.

I originally deployed the backend on Azure’s app service. It was faster, but it was also \$3 per month. The 4 users per month haven’t complained yet, so I went with the cheaper option.

And that’s about it. You can check out TopSubreddit here.

Written by Josh Amore who lives and works in Melbourne, Australia. You can contact him here.

© 2022, Built with ☕