Intro

The Pragmatic Programmer is one of the best programming books I've ever read. I love it because it's not just about coding, but about being a better programmer. The book is a gem, and if you haven't had a chance to read it, I highly recommend it. One of the MANY takeaways I got from it was the idea of having a personal "toolbox" of scripts and utilities that you can use to make your life easier.

So, I figured it'd be a great starting point for others that aren't sure about what types of scripts to build. So I've made a small list of scripts that anyone could take advantage of. Whether you're building UIs, spinning up mock APIs, or just trying to keep your node_modules from sitting out too long and getting stale.

Note: These scripts are built for a Next.js + yarn project. It's very easy to adapt them to your own needs.

Let’s dive in:

1. flush.sh: Nuke node_modules and Reinstall

I can't tell you how often I'm updating dependencies and have to manually delete node_modules, .next, and dist folders. This script does it for me.

#!/bin/bash
echo "🧼 Burning it all down and starting fresh..."
# Remove any build artifacts, this one is for a Next.js build
rm -rf node_modules .next dist
# Remove the lock files too if you want to get spicy
rm -f yarn.lock package-lock.json
yarn install

Great for when dependencies get weird or local builds break, or you know, if it's just been a while since you've updated things.

2. generate-users.sh: Make Fake JSON Users

This is great for working with dummy data. I always find myself needing a group of fake users, magic cards, or whatever. This script generates a JSON file with a specified number of users. (Personally, I like to use Pokemon, but you do you.)

#!/bin/bash

COUNT=${1:-10}
echo "Generating $COUNT dummy users..."

cat > mock-users.json <<EOL
[
EOL

for ((i=1; i<=COUNT; i++)); do
  echo "  {" >> mock-users.json
  echo "    \"id\": \"$i\"," >> mock-users.json
  echo "    \"name\": \"User $i\"," >> mock-users.json
  echo "    \"email\": \"user$i@example.com\"" >> mock-users.json
  if [ "$i" -lt "$COUNT" ]; then
    echo "  }," >> mock-users.json
  else
    echo "  }" >> mock-users.json
  fi
done

echo "]" >> mock-users.json
echo "mock-users.json created!"

Mock API responses. Populate a list view. Fill out empty state designs. All in seconds.

3. mock-api-server.sh: Spin Up a Fake REST API

This goes hand-in-hand with the generate users script. (I also have a script that is just the two combined) Great for getting test data up and running quickly.

#!/bin/bash
echo "Starting local mock API..."
npx json-server --watch mock-users.json --port 4000

Point your frontend at http://localhost:4000/users and keep building without waiting on your own future self.

4. lint-fix.sh: Pre-commit Code Polish

I used to push first, then watch the build fail and tell my what I already knew: "You have linting errors." Now I just run this before I push.

#!/bin/bash
echo "Linting..."
yarn lint --fix

echo "Formatting with Prettier..."
yarn format

Add to pre-commit hooks or just run it every time you feel vaguely guilty about your code style.

5. dev-ready.sh: Typecheck, Lint, and Boot

Similar to the lint script, but combine it with a TypeScript check and then run dev.

#!/bin/bash
echo "Running lint check..."
yarn lint

echo "Checking types..."
yarn tsc --noEmit

echo "Starting dev server..."
yarn dev

Make sure everything’s solid before you dive into work. Like a warm-up stretch for your repo. Force yourself to fix the TypeScript errors before they start rather then when you need to push.

6. copy-template.sh: Clone a Component Folder

Don't let rails have all the fun, you can have templates too! This one is a bit more advanced, but it’s super useful if you have a component structure you like to use. It copies a template folder and renames files for you.

#!/bin/bash

COMPONENT=$1

if [ -z "$COMPONENT" ]; then
  echo "Usage: ./copy-template.sh Button"
  exit 1
fi

echo "Creating $COMPONENT from template..."
cp -r templates/component "components/$COMPONENT"
mv "components/$COMPONENT/Component.tsx" "components/$COMPONENT/$COMPONENT.tsx"
mv "components/$COMPONENT/Component.test.tsx" "components/$COMPONENT/$COMPONENT.test.tsx"

sed -i '' "s/Component/$COMPONENT/g" components/$COMPONENT/*.tsx

echo "$COMPONENT scaffolded!"

Great if you use atomic design, reusable patterns, or just like starting with structure. Make templates/component once, reuse forever. This one took me a while to finally build. I kept copying and pasting files and renaming them, until I got tired of it.

7. create-next-template.sh: Bootstrap a New Next.js App with Tailwind, ESLint, API route

This one’s the big boy. I love starting random projects whenever I have a fun idea. This template really helps to get me to prototyping instead of needing to remember how I setup that last project. It's a full setup script for new projects:

#!/bin/bash

read -p "Project name: " PROJECT_NAME
yarn create next-app $PROJECT_NAME --typescript
cd $PROJECT_NAME

git init && git add . && git commit -m "init"

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

cat > tailwind.config.js <<EOL
module.exports = {
  content: ["./app/**/*.{ts,tsx}", "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
  theme: { extend: {} },
  plugins: [],
};
EOL

echo '@tailwind base;\n@tailwind components;\n@tailwind utilities;' > styles/globals.css

yarn add -D eslint prettier eslint-config-prettier eslint-plugin-prettier

cat > .prettierrc <<EOL
{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all"
}
EOL

mkdir -p pages/api
cat > pages/api/ping.ts <<EOL
import type { NextApiRequest, NextApiResponse } from 'next'

export default function handler(_: NextApiRequest, res: NextApiResponse) {
  res.status(200).json({ message: 'pong' })
}
EOL

git add . && git commit -m "feat: add Tailwind, Prettier, ping API"

echo "Project $PROJECT_NAME ready! Run 'cd $PROJECT_NAME && yarn dev'"

Run this and you’ve got a new repo with styling, formatting, and backend routes—all in like 30 seconds.

Other Ideas

• Templates: I've included a few here, but there is so much more you can do. Keeping style themes, common components, or even just a folder structure you like. (At some point you should just make a component library, AMIRITE?)
• Test Scripts: Run your tests, or honestly, make it easier to run specific tests. I waste so much time going through my console history to find the last test I ran. Just make a script for it.
• Build Scripts: If you have a specific build process, make it easier to run. I have a script that builds my Next.js app and then deploys it to Vercel. It’s super useful for when I’m in a hurry.

Final Thoughts

Frontend devs juggle a lot; APIs, builds, design systems, CLI commands, etc. These scripts don’t just save time, they free up mental space so you can focus on real problems. For the longest time I felt like bash-scripting was something only sysadmins did. But it’s a game-changer for frontend devs too.

Something to keep in mind, if a script is specific to a project, write a yarn script in the package.json, otherwise if it could apply to several projects, maybe it's worth scripting.

All you really need to do is stay consistent and when you realize you're performing a boring task multiple times, just automate it.

You don’t need to use them all. But even one or two can make you feel like you’ve got a tiny dev assistant living in your terminal. And honestly? That’s the dream.

Plugs

Enjoy my content? You can read more on my blog at The Glitched Goblet or follow me on BlueSky at kaemonisland.bsky.social. I'll be updating older posts and adding new ones each week, so be sure to check back often! I've been hard at work adding fun easter eggs and other random features. Try poking around and see what you can find!

Hint: Try checking the console!