CLI Commands for Modern Web Development

Efficiency in development often comes down to mastering your tools. While a GUI can be helpful, the command line is where the real power lies for automation and precision. In this post, I'll share the core commands I used to build and maintain this portfolio.

Package Management with pnpm

I made a deliberate choice to use pnpm instead of npm or yarn.

Why pnpm?

• Speed: It's significantly faster than npm.
• Efficiency: It uses a content-addressable store, meaning if you have 10 projects using the same version of React, it only exists once on your disk.
• Strictness: It prevents "phantom dependencies," ensuring that you can only import packages that you have explicitly added to your package.json.

# Installing dependencies with extreme speed
pnpm install
 
# Running the development server
pnpm run dev

UI Construction with shadcn/ui

Instead of using a bulky component library that ships hundreds of kilobytes of unused CSS and JS, I used shadcn/ui. This isn't a library you "install" in the traditional sense; it's a collection of reusable components that you copy and paste into your project.

Using the CLI, I can surgically add only the components I need:

# Adding the foundational UI components
pnpm dlx shadcn@latest add button card badge tabs scroll-area

This approach gives me full ownership of the code. If I need to change how a button handles focus states, I just edit the file in src/components/ui/button.tsx. No more fighting against a library's internal CSS.

Quality Assurance & Maintenance

Maintaining high standards requires constant validation. I've integrated several tools to ensure the codebase remains clean.

Linting & Type Checking

I use ESLint for static analysis and TypeScript for type safety. In a "Bulletproof" architecture, we even use custom ESLint rules to enforce folder structure and naming conventions.

# Running the linter to catch potential bugs and style issues
pnpm run lint
 
# Running the TypeScript compiler to check for type errors
pnpm tsc

Git Workflow

I follow a disciplined Git workflow. Every change is a small, atomic commit.

# Checking status and diffs
git status && git diff HEAD
 
# Adding and committing changes
git add .
git commit -m "feat(resume): add multi-tag OR filtering logic"

By mastering these CLI tools, I can focus less on the "how" of development and more on the "what"—building a great experience for the user. In the next and final post of this series, I'll discuss how I integrated Vitest and Storybook to ensure long-term stability.