Why and How I Created an Explorer for GitHub Awesome Lists

GitHub's awesome lists are like treasure chests filled with carefully selected resources, tools, and projects for all sorts of interests and needs. These lists are incredibly helpful for developers who want to quickly find useful tools and libraries. However, as these lists grow bigger and more complex, finding the specific information you need—like how popular a tool is or how well it's maintained—can become a bit of a challenge.

The Birth of AwesomeExplorer

GitHub's awesome lists are basically just markdown files that list repositories in a simple, text-based format. While this format is easy to maintain, it doesn't offer the kind of interactivity and ease of use that we're used to in modern web apps. People often find themselves scrolling through long lists, manually sorting and filtering repositories, and struggling to find the most relevant projects quickly.

Original awesome-rust list

Explore with AwesomeExplorer

I wanted to create a tool that would turn these static lists into dynamic, interactive experiences. A tool that would let users sort, filter, and explore repositories with ease, all while keeping the interface clean and intuitive.

v0 / The Vue and Golang Experiment

My journey began with a simple idea: create a static site to explore GitHub's awesome lists. I chose Vue.js with Nuxt for the frontend and Golang for the backend. The backend was a crawler that fetched and parsed markdown text from GitHub's awesome lists, then used the GitHub API to gather project details. This data was stored in an SQLite database, which served as the backend for generating the static site.

I shared a subpage, "awesome selfhosted," on Reddit's r/selfhosted, and the response was overwhelming. People were interested, and I received valuable feedback, with many requesting a dark mode.

v1 / switching to NextJS

Since the v0 version was my first attempt with Vue 3, and I wasn't entirely comfortable with it, I decided to switch to Next.js. The server components and server actions in Next.js allowed me to write database queries directly in React components, keeping everything type-safe.

Here's what the current stack looks like:

• DrizzleORM with SQLite: A type-safe way to interact with the database.
• MantineUI & TailwindCSS: High-quality components and utility CSS, which made implementing dark mode a breeze.
• Virtual List via @tanstack/react-virtual and Full Text Search via Minisearch: These libraries helped optimize performance and search capabilities.
• Landing Page in Notion: I created a landing page in Notion and used react-notion-x to convert it into a static webpage.

I'm grateful to all the amazing open-source libraries that made this project easier to build. And yes, it's open-source! You can check out the code at github.com

v-next / Roadmap for the further features

• Package Registry Integration: I want to show download counts for projects in the awesome lists. I've started some logic to guess package names and fetch data via API, but it's not complete yet.
• Sort by Trending: I want to display projects that have gained the most stars in the past week or month. I've learned from https://star-history.com/ how to generate star history and have started implementing it, but it needs testing.
• More Features?: If you have any ideas, feel free to open an issue or comment directly.