moakk/npmstats

★ 38TypeScriptAudience · developerComplexity · 2/5ActiveSetup · easy

Mindmap

mindmap
  root((npmstats))
    Inputs
      Package name
      Author name
      npm registry API
    Outputs
      Bar chart
      Line chart
      Author package list
    Use Cases
      Compare package popularity
      Track download trends
      Audit author output
    Tech Stack
      Next.js
      Tailwind
      shadcn
      Recharts

mindmap root((npmstats)) Inputs Package name Author name npm registry API Outputs Bar chart Line chart Author package list Use Cases Compare package popularity Track download trends Audit author output Tech Stack Next.js Tailwind shadcn Recharts

Things people build with this

USE CASE 1

Check download trends for an npm package before adding it as a dependency

USE CASE 2

List every package published by a specific npm author

USE CASE 3

Embed download charts in a docs site by forking the UI

Tech stack

TypeScriptNext.jsTailwindshadcn/uiRecharts

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

npmstats is a small web app that shows download numbers for any package on the npm registry. The README links to a hosted version at npmstats.dev, so you can use the site directly without cloning the project. You type a package name to look up its stats, or you look up an author to see every package they have published. The README lists four features. You can view download counts for daily, weekly, monthly, and yearly windows. The numbers can be drawn as a bar chart or a line chart. There is a dark mode and a light mode. And there is a per author page that lists every package belonging to one publisher. The stack is described in plain terms. The frontend is built with Next.js using its App Router. Styling is done with Tailwind CSS and shadcn/ui components. Charts are drawn with Recharts. The download numbers themselves come from the public npm registry download counts API, which the README links to. Running the project locally is two commands. You install dependencies with npm install, then start the dev server with npm run dev, and you open http://localhost:3000 in a browser. The README does not mention any environment variables, a database, or an auth step, which suggests the app reads directly from the public npm API at runtime. The README is short and does not list a license, a deployment guide, contribution rules, or tests. What you see in the README is everything the project documents about itself.

Copy-paste prompts

Prompt 1

Set up npmstats locally and point the dev server at a custom npm registry mirror

Prompt 2

Add a CSV export button to the npmstats package page that downloads the current chart data

Prompt 3

Replace Recharts with Chart.js in npmstats and keep the bar and line view toggle working

Prompt 4

Add a route to npmstats that compares two package names side by side on one chart

Open on GitHub → Explain another repo

Generated 2026-05-22 · Model: sonnet-4-6 · Verify against the repo before relying on details.