GitHub Repo Boilerplate

Introduction

As a programmer, you are likely familiar with the excitement from pet projects. Whether it's a passion project or an experiment with new technologies, these projects can be rewarding. But what if you could turn your pet projects into profits and become a programming pro? This guide will show you how to do that.

GitHub

The first step in turning your pet projects into profits is to make your GitHub repository contribution-ready. This means adding a license and contribution files to your repository.

License

I've read Gina Häußge's article about choosing a license and came up with MIT. You may compare them with choosealicense.com. After choosing one, copy its content and put into file LICENSE.md.

Copy code of conduct from any repo you like. Standard source is contributor-covenant.org sample. I choose Atlassian one.

Thumbnail

Choose a catchy project thumbnail that will help attract users to your project.

Issues board

Create a kanban board and pin a few issues on it to give contributors an idea of future work. Don't forget labeling issues. It's easier to get a good first issue for a fresh project.

package.json

{
  "name": "isit-hdr-ready",
  "version": "1.1.1",
  "description": "Pure js NPM package to check hdr support in css (browser and hardware)",
  "keywords": [
    "javascript",
    "css",
    "hdr",
  ],
  "author": "@slimcandy",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/slimcandy/isit-hdr-ready.git"
  },
  "bugs": {
    "url": "https://github.com/slimcandy/isit-hdr-ready/issues"
  },
  "homepage": "https://hdr.js.garden"
}

Update title, description and link inside package.json.

Misc

Describe your project strategy in github milestones. It reflects the roadmap of your project. Finally, recognize contributors for their efforts and thank them for their help. I use these badges.

CI/CD

Continuous Integration/Continuous Deployment (CI/CD) is an important aspect of software development. It helps streamline the process of testing, building, and deploying code. Setting up CI/CD once and forgetting it will save you time and effort in the long run.

CI

Start with a local setup using tools like Husky, ESLint, and Prettier.

1. Install Create React App with Typescript.

1. ESLint is already in CRA, no need to install it. Initialize it.

1. Install Prettier.

1. Integrate it into eslint. I prefer standard way - https://github.com/prettier/eslint-config-prettier#installation.
2. Configure .eslintrc.json.

1. Install Airbnb ESLint configs. It is made for JS.

1. Install eslint-config-airbnb-typescript to bind it with typescript.
2. Configure .eslintrc.json.

1. Add scripts to package.json.

1. Install husky.

{
   "format": "prettier --write src/**/*.{ts,tsx}",
   "lint": "eslint --fix src/**/*.{ts,tsx}",
   "test": "react-scripts test --watchAll=false && npm run format && npm run lint"
 }

Now every time you commit, it will run npm run test.

CD

Then, set up your repository using GitHub Actions and Netlify Deploy to make your workflow even smoother.

Open GitHub Actions docs and follow the steps. I use the very basic .yml config:

name: 📦 Install ➡ 📝 Format ➡ 🕵️ Lint ➡ 🔨 Build

on:
  push:
    branches: ["master"] # Change this to your main branch
  pull_request:
    branches: ["master"] # Change this to your main branch

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16, 18, 20] # Change this to your node versions

    steps:
      - uses: actions/checkout@v3

      - name: 🌳 Install Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: "npm"

      - name: 📦 Install dependencies
        run: npm install
      - name: 📝 Format code
        run: npm run format
      - name: 🕵️ Lint code
        run: npm run lint
      - name: 🧪 Run tests
        run: npm run test
      - name: 🔨 Build project
        run: npm run build

I use Netlify to deploy my websites. It integrates to my github repo and runs all checks and deploys.

Contribute to competitors

One way to become a programming pro is to contribute to your competitors' projects. This helps you build your skills and gain experience. It also helps you build a network of contacts in your field. You never know when a collaboration opportunity will arise, so it's always a good idea to prepare.

Monetise it!

There are several ways to monetize your pet projects. Including adding a "Buy Me a Coffee" button, getting a GitHub Pro status, and offering a support service. By taking advantage of these opportunities, you can turn your pet projects into a source of income and become a successful programmer.

Conclusion

Turning your pet projects into profits and becoming a programming pro is within reach. Now you can make your GitHub repository contribution-ready. Set up CI/CD, contribute to competitors, and monetize your projects. With hard work and determination, you can achieve success in the field of programming.