DEV Community

Cover image for I Got Tired of Copying the Same MERN Boilerplate, So I Built a CLI
Shivam Gupta
Shivam Gupta

Posted on

I Got Tired of Copying the Same MERN Boilerplate, So I Built a CLI

#javascript #opensource #webdev #node

The problem every full-stack dev knows

Every time I start a new project, the first hour looks the same:

  1. npm create vite@latest → pick React → set up Tailwind
  2. Create a server/ folder → npm init → install Express, Mongoose, dotenv, cors
  3. Write the same db.js connection file
  4. Copy CORS config from my last project
  5. Set up the proxy in vite.config.js
  6. Copy the same JWT auth code if I need login
  7. Wire up React Router, protected routes, the whole thing

By the time I actually start building features, I'm already mentally drained. And every project's boilerplate was slightly different because I'd "improve" it each time.

So I built QuickStack — a CLI that does steps 1–7 in one command.

What it does 

npx create-quickstack-app my-app
Enter fullscreen mode Exit fullscreen mode

That’s it. You get:

What Tech
Frontend React + Vite + Tailwind CSS
Backend Express.js + Mongoose
Auth (optional) JWT + bcrypt + httpOnly cookies
DX NPM Workspaces, Axios preconfigured, one npm run dev

You pick your stability level

I noticed that some devs want the latest and greatest (React 19, Tailwind 4), while others want battle-tested versions for production. So QuickStack asks:

  • Stable → React 18.3, Tailwind v3, React Router v6
  • Latest → React 19, Tailwind v4, React Router v7

Auth is actually useful

When you choose --auth, you don't just get a login form. You get:

Backend

  • POST /api/user/register — Create account
  • POST /api/user/login — Login, sets JWT as httpOnly cookie
  • POST /api/user/logout — Clears session
  • GET /api/user/me — Returns current user (protected)

Frontend

  • Login and Signup pages with forms
  • ProtectedRoute component that redirects to /login
  • Auth service with Axios interceptors
  • React Router setup with all routes wired

This isn't a TODO app auth example. This is what I actually use in production.

How it's built

The CLI uses:

  • commander for argument parsing (--auth, --stable, --latest, --yes)
  • @inquirer/prompts for interactive prompts
  • fs-extra for template copying
  • chalk for terminal output

Instead of string-templating files (which is fragile), QuickStack copies real, working project directories and patches them based on your choices. The templates in the repo are actual runnable code — you can cd into them and they work.

The version-specific stuff (React 18 vs 19, Tailwind 3 vs 4) is handled by a preset engine that rewrites package.json dependencies and config files after copying the base template.

Getting started 

npx create-quickstack-app my-app
cd my-app
npm run dev
Enter fullscreen mode Exit fullscreen mode
  • Client → http://localhost:5173
  • Server → http://localhost:5000

Links

What’s next

  • TypeScript template variant
  • Docker Compose included in scaffold
  • PostgreSQL + Prisma as a database option
  • More framework options (Next.js?)

Final thoughts

If this saves you even 30 minutes on your next project, I'll consider it a win.

Would love to hear what features you'd want — feel free to open an issue or drop feedback.

If you found this useful, a ⭐ on the GitHub repo would mean a lot. Thanks for reading!

Top comments (0)