🚀 create-bz-mern-app

A modern fullstack boilerplate powered by:

• ⚛️ Frontend: Vite + React + Mantine
• 🔐 Authentication: Google Login + JWT
• 🌐 Backend: Node.js + Express + MongoDB

⚙️ Full Setup Instructions

🔹 Step 1: Create a Git Repository

Create a new GitHub repository (e.g.):

https://github.com/kaushikkumarbz/url-shortener-dev-example

During repo creation, select .gitignore → Node.

🔹 Step 2: Clone the Repository

git clone [email protected]:kaushikkumarbz/url-shortener-dev-example.git
cd url-shortener-dev-example

🔹 Step 3: Scaffold the Project

Inside the cloned folder:

npx create-bz-mern-app@latest

This will set up the following folder structure:

url-shortener-dev-example/
  ├── backend/
  └── frontend/

🔹 Step 4: Configure .gitignore and .env Files

By default, .env files are ignored. But for Vite frontend to work properly, you should:

1. Open .gitignore
2. Replace:

   .env
   .env/*

   with:

   /backend/.env

✅ This allows:

• ✅ frontend/.env to be committed (used by Vite)
• 🔒 backend/.env to stay private (JWT, DB credentials)

🔹 Step 5: Setup Environment Variables

📁 backend/.env

MONGODB_URI=your_mongodb_connection_string
PORT=3000
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
JWT_SECRET=your_secure_jwt_secret

📁 frontend/.env

VITE_GOOGLE_CLIENT_ID=your_google_client_id
VITE_BZENV=development  # or production
VITE_DEV_PROXY=http://localhost:3000

🔹 Step 6: Install Dependencies and Start

Quick Start Start frontend and backend together from root:

npm run dev

OR

If you prefer running frontend and backend separately, follow the setup steps below.

➤ Frontend

cd frontend
npm install
npm run build
npm start

➤ Backend

cd ../backend
npm install
npm start

🛠️ Tech Stack

• Frontend: Vite, React, Mantine, Google OAuth2
• Backend: Node.js, Express, MongoDB, JWT
• Tooling: ESLint, Prettier, dotenv

🙌 Contributing

Feel free to fork and create PRs to improve the boilerplate!

📄 License

MIT © 2025 Kaushikk