Tutorial: How I added GitHub and npm stat counters to TanStack.com
Blog post from Convex
Shawn Erquhart outlines a detailed tutorial on how he integrated GitHub and npm stat counters into TanStack.com using the Convex backend platform. The tutorial begins by highlighting the declining practice of displaying GitHub star counts on open-source documentation sites and proposes a solution using Convex to streamline the process. Erquhart explains how he manually compiled open-source statistics for TanStack projects, including GitHub stars and npm downloads, and highlights the challenges of maintaining up-to-date data. The guide progresses through setting up a Convex project, fetching, and scraping data from GitHub and npm APIs, and storing this data in a Convex database. It emphasizes using Convex's features such as actions, mutations, and queries to automate data updates and manage database interactions. The tutorial also covers optimizing queries with indexes, handling large data sets through function scheduling, and creating a frontend using React that displays dynamic data with real-time updates. Additionally, Erquhart discusses the use of crons for continuous updates, webhooks for real-time GitHub star updates, and creatively computes npm download numbers to simulate live-ish updates, demonstrating the integration of software engineering best practices into analytics workflows.