DEV Community: Phuc (Felix) Bui

[Boost]

Phuc (Felix) Bui — Mon, 30 Jun 2025 10:49:47 +0000

Phuc (Felix) Bui

Jun 28 '25

I Was Tired of Manually Tracking My GitHub Repos

#github #opensource #claudeai #vibecoding

Comments 6

3 min read

🚀 Stop Copy-Pasting NPM Publish Workflows - I Built a Reusable GitHub Action

Phuc (Felix) Bui — Mon, 30 Jun 2025 10:39:31 +0000

Ever find yourself copying the same GitHub Actions workflow across multiple npm packages? I got tired of maintaining duplicate publishing workflows, so I built a reusable action that handles it all.

The Problem 😤

I was copy-pasting this same workflow across 10+ repositories:

Setup Node.js and PNPM
Run tests (if they exist)
Update package.json version
Build the package
Publish to NPM
Commit changes back

Every time I wanted to improve the workflow, I had to update it in multiple repos. Not fun!

The Solution ✨

I created Publish NPM Action - a single reusable action that handles the entire npm publishing pipeline.

What it does:

🧪 Smart testing - Automatically detects and runs tests
📦 Version sync - Updates package.json with your release tag
🏗️ Flexible building - Works with any build system
🔄 Git integration - Commits build files back to your repo
🛡️ Secure publishing - Handles NPM authentication safely

Usage - Dead Simple 💫

Just create .github/workflows/publish.yml:

name: Publish on Release

on:
  release:
    types: [published]

permissions:
  contents: write
  packages: write

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          ref: main
          token: ${{ secrets.GITHUB_TOKEN }}
          fetch-depth: 0

      - name: Publish NPM Package
        uses: phucbm/publish-npm-action@v1
        with:
          npm-token: ${{ secrets.NPM_TOKEN }}

That's it! Create a release, and your package automatically publishes to NPM.

Advanced Configuration 🛠️

Need customization? The action is highly configurable:

- name: Publish NPM Package
  uses: phucbm/publish-npm-action@v1
  with:
    npm-token: ${{ secrets.NPM_TOKEN }}
    # node-version: '20'                               # Node.js version, default is '18'
    # build-command: 'npm run build:prod'              # Build command, default is 'pnpm build'
    # output-dir: 'build/'                             # Output directory, default is 'dist/'
    # target-branch: 'develop'                         # Target branch, default is 'main'
    # skip-tests: 'true'                               # Skip tests, default is 'false'
    # commit-files: 'CHANGELOG.md docs/ types/'        # Additional files to commit, default is ''

Perfect for different project setups:

React apps: output-dir: 'build/'
TypeScript libs: commit-files: 'types/'
Monorepos: Custom build commands and paths

Real-World Benefits 🎯

Since switching to this action:

✅ 15-line workflows instead of 80+ lines
✅ Centralized updates - improve once, benefits everywhere
✅ Zero maintenance per repository
✅ Consistent publishing across all projects
✅ Less copy-paste errors

Quick Setup Guide 📋

Add NPM token to GitHub Secrets as NPM_TOKEN
Copy the workflow above to .github/workflows/publish.yml
Create a release with semantic versioning (e.g., v1.2.3)
Watch the magic happen! 🪄

The action handles everything: tests, builds, version updates, and publishing.

Try It Out! 🚀

The action is available on the GitHub Marketplace.

Have feedback or feature requests? Drop them in the GitHub repo!

What's your npm publishing workflow like? Have you automated it? Drop a comment below! 👇

I Was Tired of Manually Tracking My GitHub Repos

Phuc (Felix) Bui — Sat, 28 Jun 2025 01:58:42 +0000

Picture this: You're maintaining 20+ GitHub repositories. You want to check which ones are getting stars, which have open issues that need attention, and maybe see how your overall portfolio is performing.

So you open GitHub... click on repo 1... check stars... back button... repo 2... check issues... back button...

Yeah, that was my Friday night routine. Terrible.

The "Aha!" Moment (And My AI Pair Programming Session)

I was staring at a Google Sheet for work when it hit me: What if I could just pull all my GitHub data directly into a spreadsheet?

Perfect time for some vibe coding. I fired up Claude AI and we started brainstorming. Google Sheets has Apps Script (basically JavaScript), GitHub has an API, and I had a Friday night free. Perfect storm.

What started as a simple idea quickly evolved into something way more powerful thanks to Claude's suggestions - rate limiting, error handling, beautiful formatting, even a roadmap for future features.

What I Built: GitSheet

GitSheet automatically fetches ALL your public repositories and displays:

⭐ Stars, forks, watchers
🐛 Open issues (separate from PRs!)
🔄 Open pull requests
📋 License info, language, size
📅 Creation and update dates
🍴 Fork detection
🔗 Direct links to each repo

The best part? One button click updates everything.

The Technical Approach

Here's the basic flow:

Apps Script calls GitHub API to get user repositories
Parse and clean the data (GitHub mixes issues with PRs, so I separate them)
Populate Google Sheets with beautiful formatting
Add progress indicators because waiting is less painful with feedback

// Simplified version of the core function
function getGitHubStats(username) {
  const url = `https://api.github.com/users/${username}/repos`;
  const response = UrlFetchApp.fetch(url);
  const repos = JSON.parse(response.getContentText());

  // Process and format data
  return repos.map(repo => [
    repo.name,
    repo.stargazers_count,
    repo.forks_count,
    // ... more fields
  ]);
}

The Cool Technical Bits

Smart Rate Limiting: GitHub API has limits, so I added delays between requests and batch processing.

Issue vs PR Separation: GitHub's API counts PRs as issues. I make separate calls to get accurate counts.

Error Handling: If one repo fails, the script continues with the others. No total failures.

Beautiful Formatting: Auto-sizing columns, number formatting, alternating row colors. It looks professional.

Why Google Sheets Though?

I considered building a web app, but Google Sheets has some serious advantages:

Zero hosting costs 💰
Familiar interface - everyone knows spreadsheets
Built-in features - sorting, filtering, charts, export
Sharing capabilities - send read-only copies to team members
Mobile access - works on phones automatically

Plus, you can create pivot tables, charts, and do analysis without writing more code.

The "Template Effect"

Here's where it gets interesting. I can share this as a Google Sheets template. Anyone can:

Copy my template
Change the username to theirs
Hit "update"
Boom - instant GitHub analytics

No installation, no signup, no configuration. Just copy and go.

What's Next?

Version 1.0 is read-only, but I'm already thinking about v2.0:

Write operations - edit repo descriptions directly in the sheet
Bulk tag management - update topics across multiple repos
Historical tracking - see how your repos grow over time
Team features - track organization repositories

Try It Yourself

If you want to give GitSheet a shot:

View the template (you can see my actual data)
File → Make a copy
Follow the simple setup instructions
Watch your GitHub stats populate automatically

The whole setup takes about 30 seconds.

Lessons Learned

Vibe coding with AI is incredibly productive. Having Claude as a coding partner meant I could focus on the vision while getting help with implementation details, error handling, and even product strategy.

Google Sheets is more powerful than you think. Apps Script turns it into a legitimate development platform.

APIs + Spreadsheets = Magic. This combination unlocks so many possibilities.

Simple solutions win. I could have built a complex web app, but a spreadsheet does everything I need.

Templates are viral. Making something easily copyable dramatically increases adoption.

The Real Win

The real satisfaction isn't the stars or the technical achievement. It's opening one tab, seeing all my repositories at a glance, and immediately knowing which ones need attention.

No more tab switching. No more manual checking. Just data, beautifully organized, updating with one click.

Sometimes the best solutions are the simplest ones.

What do you think? Have you built anything similar? What's your favorite "simple solution to an annoying problem" project?

P.S. - The code is open source if you want to peek under the hood or contribute features!