NPM Cards

Configurable download graphs for NPM packages.

Deploy on Railway

Frontend Backend

React Vite @yeger/vue-masonry-wall

Backend

The lightweight Go backend uses Gin and in-memory or Redis-based caching for low latencies.

Behind the scenes, the NPM API is queried to gather weekly download statistics for graph generation.

SVGo is used for generating SVGs programmatically.

The backend is hosted by Railway at npm-cards.up.railway.app.

Frontend

The frontend is a React SPA built with Vite 3. It serves as a playground for the backend by enabling experimentation with the configurable parameters.

It presents previews of cards and an option to copy card links to the clipboard.

The frontend is hosted by Vercel at npm-cards.vercel.app.

Usage

  1. Visit npm-cards.vercel.app
  2. Configure the card to fit your needs. While the frontend only allows for certain input ranges concerning size, padding, etc., modyfing the output URL allows for additional customization.
  3. Press “Copy to Clipboard”.
  4. Embed the image URL in HTML, Markdown, etc.

License

MIT – Copyright © Jan Müller

GitHub

View Github