Tracking the RepoTracker Stack (Showcase)

RepoTracker started as an experiment to test the readiness of Nuxt 3 beta and to track development progress of all relevant community modules on GitHub to answer the question, "does it make sense already to upgrade from Nuxt 2 to Nuxt 3?". Luckily, this question has been answered by now and the consensus is, "yes"!

You can read the full story about that journey on dev.to.

A few iterations later, RepoTracker is close to v1 and has matured to a universal repository tracker that can generate statistics and insights for any public GitHub repository (tracking of private repositories is coming soon).

But, RepoTracker is also an experiment to test and play with the latest web technologies in the Vue ecosystem, Vite, Pinia, etc. For instance, this blog is powered by Nuxt Content v2 (which is amazing!) and at some point there might also be a comprehensive documentation based on Docus (check it out!).

And what better way to showcase RepoTracker's capabilities than by using it to track its own stack?

You can find a collection of all relevant repositories related to the RepoTracker stack here:

https://repo-tracker.com/c/repo-tracker

Or if you want to add the collection to your own RepoTracker profile and play around with it you can just download the .repoc file here and import it into a new collection.

But let's take a look at what's under the hood. RepoTracker is obviously built with Nuxt 3 and leverages many of the magnificent community modules.

Stack — part 1

• Nuxt (Vue framework)
• Vite (lightning-fast build tool)
• Vitest (testing)
• Pinia (state management)
• VueUse (utitilities)
• nuxt-content (markdown to content)
• nuxt-plausible (privacy-first analytics)

Stack — part 2

• nuxt-color-mode (theming made easy)
• nuxt-icon (icons made easy)
• nuxt-pwa-module (drop-in PWA capabilities)
• nuxt-windicss (utility-first CSS framework)
• pinia-plugin-peristedstate (state persistence)
• vue-chartjs (beautiful charts)

Updates:

As the app stack evolves I'll add new additions here.

• nuxt-seo-kit (all-in-one SEO solution), Feb 5, 2023
• nuxt-windicss was sunsetted and has been replaced by @unocss/nuxt, Apr 22, 2023

All packages were specifically selected to deliver as much functionality as possible as fast as possible. Needless to say that I'd also recommend the above stack for your next project, with one exception and a word of caution.

Exception:

Drop WindiCSS for UnoCSS by @antfu. It seems like development on WindiCSS has stalled and UnoCSS is the new kid on the block. You will lose the ability to use SCSS but Uno brings a lot of improvements with it, my favorite being an improved attributify mode.

Word of caution:

It is not clear weather nuxt-pwa-module will be the official PWA module for Nuxt 3. It seems like the Nuxt core team is favoring vite-pwa/nuxt since they use it in their showcase app Elk. Elk is a Mastodon client and I'd highly recommend you check it out, especially if you build apps with Nuxt.

And what about octokit?

I would really love to use the Octokit SDK to fetch the GitHub data but unfortunately it is not compatible with Vite yet. As soon as it plays nice, I'll probably add it to the stack.

That's it for now, thanks for reading and stay tuned for more posts ✌🏽