diff --git a/README.md b/README.md index ead73ac..c8907a7 100644 --- a/README.md +++ b/README.md @@ -1,678 +1,221 @@ - +# ๐Ÿš€ MERN Project Generator CLI: Create Full-Stack Projects in a Flash โšก -# ๐Ÿš€ MERN Project Generator CLI +Say goodbye to hours of setup! **MERN Project Generator CLI** lets you create production-ready MERN stack projects in just **seconds**. With pre-configured setups and instant MongoDB integration, you can skip the boring part and jump straight into building your next big thing. Whether you're a beginner or an experienced dev, this tool is designed to **save time** and keep you focused on what you do bestโ€”**coding**! -> Create production-ready MERN stack projects in seconds! - -### NPM Package Website [mern-project-cli](https://www.npmjs.com/package/mern-project-cli) +--- -### Website [https://devcli.vercel.app](https://devcli.vercel.app) +## ๐ŸŒ Links Youโ€™ll Need +- **NPM Package**: [MERN Project CLI](https://www.npmjs.com/package/mern-project-cli) +- **Website**: [devcli.vercel.app](https://devcli.vercel.app) -![NPM Total Downloads](https://img.shields.io/npm/dt/mern-project-cli?color=brightgreen&label=Total%20Downloads&style=for-the-badge) -![NPM Weekly Downloads](https://img.shields.io/npm/dw/mern-project-cli?color=blue&label=Weekly%20Downloads&style=for-the-badge) +![NPM Total Downloads](https://img.shields.io/npm/dt/mern-project-cli?color=brightgreen&label=Total%20Downloads&style=for-the-badge) +![NPM Weekly Downloads](https://img.shields.io/npm/dw/mern-project-cli?color=blue&label=Weekly%20Downloads&style=for-the-badge) [![Node.js Package](https://github.com/manishraj27/mern-project-cli/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/manishraj27/mern-project-cli/actions/workflows/npm-publish.yml) -**MERN Project Generator CLI** is a powerful tool designed to simplify the process of setting up a complete, production-ready MERN stack project in seconds. - -This tool eliminates the need for manual configurations, boilerplate code copying, and repetitive tasks, allowing developers to start building their apps right away with best practices in place. Perfect for both beginners and experienced developers, it saves time and ensures a solid project foundation. - -## โœจ Features - -- **One Command Setup**: Generate both frontend and backend with a single command -- **Industry-Standard Structure**: Pre-configured folder structure following best practices -- **Create frontend with shadcn and vite**, a new React project with either Shadcn UI + Tailwind CSS or just Vite + Tailwind CSS using a single command. -- **Instant MongoDB Integration**: Connect to MongoDB with zero configuration -- **Generate Mongoose Schema**: Generate Mongoose Schema with just one command -- **Development Ready**: Hot-reloading enabled for both frontend and backend -- **Pre-configured Environment**: `.env.example` files included with sensible defaults -- **Git Ready**: Initialized Git repository with proper `.gitignore` files - -## ๐Ÿ“‘ Index - -- [Requirements](#-requirements) -- [Installation](#-installation) -- [Commands](#%EF%B8%8F-commands) - - [1. devcli create](#1-create-mern-project) - - [2. devcli mongodb-connect](#2-connect-mongodb) - - [3. devcli mongoose-schema](#3-mongoose-schema) - - [4. devcli add-redux](#4-add-redux) - - [5. devcli create-frontend ](#5-create-frontend-project) - - [6. devcli init-dockerfiles](#6-initialize-docker-files) -- [Complete User Journey Example](#-Complete-User-Journey-Example) -- [Future Enhancements](#-future-enhancements) -- [Contribute](#-contribute-to-the-project) -- [License](#-license) -- [Support the project](#-support-the-project) +--- -## โšก Requirements +## โœจ Why Youโ€™ll Love It -Before you begin, ensure your system meets these requirements: +- **One Command Setup**: Generate frontend and backend projects instantly! +- **MongoDB on Autopilot**: Zero config required to connect your app with MongoDB. +- **Pre-Configured Structure**: Follow best practices right out of the box. +- **Redux & Docker Support**: Easily add state management and containerization. +- **Hot-Reload Everywhere**: Develop faster with real-time updates for both backend and frontend. -- **Node.js**: Version 14.x or higher -- **npm**: Version 6.x or higher -- **MongoDB**: Local or remote installation +--- -## ๐Ÿ“ฆ Installation +## โšก Quickstart: How to Use It -Install the CLI tool globally to use it from anywhere in your system: +Hereโ€™s how to get started: +### Step 1: Install the CLI Tool Globally ```bash npm install -g mern-project-cli ``` -To check installation version: - +### Step 2: Create Your Project ```bash -devcli --version +devcli create my-awesome-app ``` -## ๐Ÿ› ๏ธ Commands - -### 1. Create MERN Project - +### Step 3: Start Development +For Backend: ```bash -devcli create -``` - -#### What This Command Does: - -##### 1. **๐Ÿ“ Creates Project Structure**: - -The generated project follows the MVC (Model-View-Controller) pattern, a battle-tested architecture that separates your application into three main components: - -``` -your-project-name/ -โ”œโ”€โ”€ backend/ -โ”‚ โ”œโ”€โ”€ controllers/ # Handle business logicdocumentation -โ”‚ โ”œโ”€โ”€ db/ # Database configuration -โ”‚ โ”œโ”€โ”€ middlewares/ # Custom middleware functionsdocumentation -โ”‚ โ”œโ”€โ”€ models/ # MongoDB Schema model -โ”‚ โ”œโ”€โ”€ routes/ # API route definitions -โ”‚ โ”œโ”€โ”€ utils/ # Helper functionsdocumentation -โ”‚ โ”œโ”€โ”€ .env.example # Environment variables template -โ”‚ โ”œโ”€โ”€ .gitignore # Git ignore rules -โ”‚ โ”œโ”€โ”€ constants.js # Application constants -โ”‚ โ”œโ”€โ”€ package.json # Dependencies and scripts -โ”‚ โ”œโ”€โ”€ README.md # Backend documentation -โ”‚ โ””โ”€โ”€ server.js # Server entry point -โ””โ”€โ”€ frontend/ - โ”œโ”€โ”€ public/ # Static files - โ”œโ”€โ”€ src/ # React source code - โ”‚ โ”œโ”€โ”€ components/ # React components - โ”‚ โ”œโ”€โ”€ pages/ # Page components - โ”‚ โ”œโ”€โ”€ utils/ # Helper functions - โ”‚ โ””โ”€โ”€ App.js # Root component - โ”œโ”€โ”€ .env.example # Frontend environment template - โ””โ”€โ”€ package.json # Frontend dependencies +cd my-awesome-app/backend +npm run dev ``` -##### 2. **Installs Dependencies**: - -- Backend: Express, Mongoose, CORS, dotenv, nodemon. -- Frontend: React, React Router, Axios, Other Create React App dependencies. - -#### After Creation: - -##### **Start Backend Development**: - +For Frontend: ```bash -cd your-project-name/backend +cd my-awesome-app/frontend +npm start ``` -```bash -npm run dev # Start development server with nodemon -``` +Boom ๐Ÿ’ฅ! You now have a complete MERN app running on your local machine! ๐ŸŽ‰ -##### **Start Frontend Development**: +--- -```bash -cd your-project-name/frontend -``` +## ๐Ÿ“‘ Features That Make Your Life Easier -``` -npm start # Start React App -``` +1. **Generate Frontend Projects** with `Vite + Tailwind CSS` or **Shadcn UI**. +2. **Instant MongoDB Setup**: Auto-connect with just one command. +3. **Mongoose Schema Generator**: Skip manual schema writingโ€”generate with ease! +4. **Redux Store Integration**: Add slices and actions without breaking a sweat. +5. **Pre-configured Docker Support**: Get Dockerfiles and `docker-compose.yml` ready to roll. -### 2. Connect MongoDB +--- -- Create database as your_project_name_db +## ๐Ÿ› ๏ธ Essential Commands +### 1. **Create a New MERN Project** ```bash -devcli mongodb-connect -``` - -- Or with custom database name - -``` -devcli mongodb-connect --project custom-name +devcli create ``` +This sets up a full-stack project with separate **frontend** and **backend** folders. -#### Options: - -- `-p, --project `: Specify custom database name -- No options: Uses project folder name as database name - -#### What This Command Does: - -##### 1. **Creates Database Connection**: - -- Generates `connection.js` in the `db` folder -- Sets up Mongoose connection with error handling -- Configures connection string based on environment variables - -##### 2. **Updates Server Configuration**: - -- Adds database connection import to `server.js` -- Sets up connection status logging - -#### Usage Examples: - +### 2. **Connect MongoDB** ```bash -# Using project name devcli mongodb-connect - -# Using custom database name -devcli mongodb-connect --project custom_name -``` - -#### Generated Files: - -```javascript -// db/connection.js -require('dotenv').config(); -const mongoose = require('mongoose'); - -const dburl = process.env.DB_URL || 'mongodb://localhost:27017/your_db_name'; -mongoose - .connect(dburl) - .then(() => console.log('Connected to DB Successfully')) - .catch((err) => console.log(err.message)); ``` - -### 3. Generate Mongoose Schema - -- Create mongoose schema for your backend. - +Or specify a custom database name: ```bash -devcli devcli mongoose-schema - +devcli mongodb-connect --project my-custom-db ``` -#### Usage Example - +### 3. **Generate Mongoose Schema** ```bash devcli mongoose-schema User name:String email:String password:String ``` +Creates a `User` model in the backendโ€™s `models/` directory. -This will create a `User.js` file with a Mongoose schema inside the `models/` directory: - -```javascript -//models/User.js -import mongoose from 'mongoose'; - -const UserSchema = new mongoose.Schema({ - name: { type: String, required: true }, - email: { type: String, required: true }, - password: { type: String, required: true }, -}); - -const User = mongoose.model('User', UserSchema); -export default User; -``` - -#### Explanation: - -The `mongoose-schema` command takes a model name (User) and field definitions (name:String, email:String, password:String), generating a Mongoose model file in the `models/` folder. - -### 4. Add Redux - -Set up Redux in your project or add new Redux slices. - -#### Initialize Redux - +### 4. **Add Redux State Management** +Initialize Redux: ```bash devcli add-redux --init ``` - -###### What does this command do: - -- Sets up Redux store configuration -- Creates necessary store files and directories -- Installs required dependencies (@reduxjs/toolkit and react-redux) -- Creates hooks for easier Redux usage - -#### Create Redux Slice - -```bash -devcli add-redux --slice --actions="action1,action2" --state="field1:type,field2:type" -``` - -Options: - -- `--slice`: Name of the slice to create -- `--actions`: Comma-separated list of actions for the slice -- `--state`: Initial state fields with types (string, boolean, array) - -#### Usage Example: - -```bash -devcli add-redux --slice user --actions="login,logout" --state="username:string,isLoggedIn:boolean" -``` - -This creates: - -- A new slice file in `src/store/slices` -- Boilerplate for specified actions -- Initial state with typed fields -- Automatic integration with the Redux store - -#### Example Generated Redux Slice - -When you run the command: - +Create a Redux slice: ```bash devcli add-redux --slice user --actions="login,logout" --state="username:string,isLoggedIn:boolean" ``` -It generates the following slice in `src/store/slices/userSlice.js`: - -```javascript -import { createSlice } from '@reduxjs/toolkit'; - -const initialState = { - username: '', - isLoggedIn: false, -}; - -const userSlice = createSlice({ - name: 'user', - initialState, - reducers: { - login: (state, action) => { - // Implement login logic here - }, - logout: (state, action) => { - // Implement logout logic here - }, - }, -}); - -export const { login, logout } = userSlice.actions; -export default userSlice.reducer; -``` - -### 5. Create Frontend Project - -Create a new React project with either Shadcn UI + Tailwind CSS or just Vite + Tailwind CSS using a single command. - +### 5. **Create Frontend Project with Shadcn UI or Vite** +With Shadcn UI: ```bash -# Create project with Shadcn UI -devcli create-frontend --shadcn - -# Create project with Vite + Tailwind CSS -devcli create-frontend --vite +devcli create-frontend my-app --shadcn ``` - -#### Features - -##### With --shadcn flag: - -- Creates a Vite + React project -- Installs and configures Tailwind CSS -- Sets up Shadcn UI with New York style and Zinc color scheme -- Configures project structure with best practices -- Adds initial button component as example -- Sets up path aliases for better imports -- Includes all necessary configuration files - -##### With --vite flag: - -- Creates a basic Vite + React project -- Installs and configures Tailwind CSS -- Sets up minimal project structure -- Includes starter template with modern styling - -#### Options - -- `--shadcn`: Include Shadcn UI setup with Tailwind CSS -- `--vite`: Create basic Vite project with Tailwind CSS only - -#### Usage Examples - +With Vite + Tailwind CSS: ```bash -# Create a new React project with Shadcn UI -devcli create-frontend my-app --shadcn - -# Create a new React project with just Vite + Tailwind devcli create-frontend my-app --vite - -# Navigate to project -cd my-app - -# Start development server -npm run dev ``` -#### Generated Project Structure with --shadcn - -``` -your-project/ -โ”œโ”€โ”€ src/ -โ”‚ โ”œโ”€โ”€ components/ -โ”‚ โ”‚ โ””โ”€โ”€ ui/ -โ”‚ โ”‚ โ””โ”€โ”€ button.jsx -โ”‚ โ”œโ”€โ”€ lib/ -โ”‚ โ”‚ โ””โ”€โ”€ utils.js -โ”‚ โ”œโ”€โ”€ App.jsx -โ”‚ โ””โ”€โ”€ index.css -โ”œโ”€โ”€ jsconfig.json -โ”œโ”€โ”€ tailwind.config.js -โ”œโ”€โ”€ vite.config.js -โ””โ”€โ”€ components.json -``` - -#### After Creation with --shadcn - -- Add more Shadcn components using: - ```bash - npx shadcn@latest add - ``` -- Available components can be found at [shadcn/ui components](https://ui.shadcn.com/docs/components) -- Customize theme in `tailwind.config.js` -- Add your own components in `src/components` - - -### 6. Initialize Docker Files +--- -Generate Dockerfiles for both backend and frontend, along with a docker-compose.yml file for your MERN stack project. +## ๐Ÿณ Docker Support: Go Full DevOps +Easily generate Docker configurations: ```bash devcli init-dockerfiles ``` +This command creates: -#### What This Command Does: - -1. **Creates Backend Dockerfile**: - - Uses Node.js 20 Alpine image - - Sets up working directory - - Installs dependencies - - Configures for development mode - - Exposes port 5000 - -2. **Creates Frontend Dockerfile**: - - Uses Node.js 20 Alpine image - - Sets up working directory - - Installs dependencies - - Exposes port 3000 - - Configures for development mode - -3. **Generates docker-compose.yml**: - - Configures services for backend, frontend, and MongoDB - - Sets up proper networking between services - - Configures volumes for development - - Sets environment variables - - Establishes service dependencies - -#### Requirements: - -- Project must have `backend` and `frontend` directories in root -- Docker must be installed on your system - -#### Generated Files: - -``` -your-project/ -โ”œโ”€โ”€ backend/ -โ”‚ โ”œโ”€โ”€ Dockerfile -โ”‚ โ””โ”€โ”€ .dockerignore -โ”œโ”€โ”€ frontend/ -โ”‚ โ”œโ”€โ”€ Dockerfile -โ”‚ โ””โ”€โ”€ .dockerignore -โ””โ”€โ”€ docker-compose.yml -``` - -#### Usage: +- Dockerfiles for **backend** and **frontend** +- A `docker-compose.yml` to spin everything up in one go +To start the project with Docker: ```bash -# Navigate to your project root -cd your-project - -# Generate Docker files -devcli init-dockerfiles - -# Start the containerized application docker-compose up ``` -This will start your application with: -- Backend running on `http://localhost:5000` -- Frontend running on `http://localhost:3000` -- MongoDB running on port `27017` - - -## ๐Ÿ“– Complete User Journey Example - -Let's create a blog application from scratch: - -```bash -# Step 1: Install CLI globally -npm install -g mern-project-cli - -# Step 2: Create new project -devcli create my-blog-app - -# Step 3: Set up backend -cd my-blog-app/backend -npm run dev - -# Step 4: Set up frontend (new terminal) -cd ../frontend -npm start - -# Step 5: Connect MongoDB (optional) -cd ../backend -devcli mongodb-connect - -# Step 6: Generate Mongoose Scheama (optional) -devcli mongoose-schema Blog name:String category:String - - -# Step 7: Set up Redux -cd ../frontend -devcli add-redux --init - -# Step 8: Create blog slice for Redux -devcli add-redux --slice blog --actions="addPost,deletePost,updatePost" --state="posts:array,loading:boolean" - -๐ŸŽ‰ Congratulations! Your blog application structure is ready with: -- Backend running on `http://localhost:5000` -- Frontend running on `http://localhost:3000` -- MongoDB connected and ready to use -``` - -## โš™๏ธ Environment Configuration - -### Backend (.env) - -```env -# Server Configuration -PORT=5000 - -# Database Configuration -DB_URI=mongodb://localhost:27017/your_db_name -``` - -### Frontend (.env) - -```env -# API Configuration -REACT_APP_API_URL=http://localhost:5000 - -``` - -## ๐Ÿ”ง Available Commands - -### CLI Commands - -#### Project Setup - -```bash -npm install -g mern-project-cli # Install CLI globally -devcli --version # Check CLI version -devcli create # Create new MERN project -``` - -```bash -OR [Create frontend with shadcn+tailwind/ vite+tailwind] - -devcli create-frontend --shadcn # shadcn-frontend -devcli create-frontend --vite # vite-frontend -``` - -#### Backend CLI Commands - -```bash -# Database Connection -devcli mongodb-connect # Connect MongoDB using project name -devcli mongodb-connect -p custom-name # Connect with custom database name - -# Schema Generation -devcli mongoose-schema # Generate Mongoose schema -# Example: devcli mongoose-schema User name:String email:String password:String -``` - -#### Frontend CLI Commands - -```bash -# Redux Setup -devcli add-redux --init # Initialize Redux in frontend -devcli add-redux --slice --actions="action1,action2" --state="field1:type,field2:type" #Create Slice -# Example: devcli add-redux --slice user --actions="login,logout" --state="username:string,isLoggedIn:boolean" -``` - -#### Docker CLI Commands - -```bash -# Docker Configuration -devcli init-dockerfiles # Generate Dockerfiles and docker-compose.yml -``` - -### Development Commands +--- -#### Backend Development +## ๐ŸŽฏ Complete User Journey: From Zero to App Hero -```bash -cd backend # Navigate to backend directory -npm install # Install dependencies -npm run dev # Start with auto-reload (development) -npm start # Start without auto-reload (production) -``` +Letโ€™s say youโ€™re building a **blog app**. Hereโ€™s how easy it is with the MERN Project Generator CLI: -#### Frontend Development +1. **Install the CLI**: + ```bash + npm install -g mern-project-cli + ``` -```bash -cd frontend # Navigate to frontend directory -npm install # Install dependencies -npm start # Start development server -``` +2. **Create the Project**: + ```bash + devcli create my-blog-app + ``` -#### Docker Development +3. **Set Up Backend**: + ```bash + cd my-blog-app/backend + npm run dev + ``` -```bash -docker-compose up # Start all services (backend, frontend, mongodb) -docker-compose down # Stop all services -docker-compose up --build # Rebuild and start all services -``` +4. **Set Up Frontend**: + ```bash + cd ../frontend + npm start + ``` - - +๐Ÿš€ **Voila!** Your blog app is ready to conquer the world! ๐ŸŒ - +## ๐ŸŒฑ Contribute to the Project -## ๐Ÿ”ฎ Future Enhancements +We believe in the power of **open-source**! Feel free to: -1. **Code Generation** - More Code-Snippets +1. **Report Bugs**: Found a bug? Open an [issue](https://github.com/manishraj27/mern-project-cli/issues). +2. **Submit Pull Requests**: Fork the repo, make changes, and contribute back. +3. **Share Ideas**: Weโ€™re always open to suggestions on how to make this tool better! -## ๐Ÿค Contribute to the Project +--- -We welcome and appreciate contributions to MERN Project Generator CLI! If youโ€™d like to help improve this tool, feel free to do so. +## ๐Ÿ“„ License -## ๐Ÿ“„ License +This project is licensed under the **MIT License**. See the [LICENSE](https://github.com/manishraj27/mern-project-cli?tab=MIT-1-ov-file) for details. -This project is licensed under the MIT License - see the [LICENSE](https://github.com/manishraj27/mern-project-cli?tab=MIT-1-ov-file) file for details. +--- -## ๐ŸŒŸ Support the Project +## ๐ŸŒŸ Support the Project -If you find this tool helpful, please consider: +If you find MERN Project Generator CLI useful: -- Giving it a star on [GitHub](https://github.com/manishraj27/mern-project-cli) -- View on NPM [mern-project-cli](https://www.npmjs.com/package/mern-project-cli) -- Sharing it with your fellow developers -- Contributing to its development +- โญ **Give it a star** on [GitHub](https://github.com/manishraj27/mern-project-cli) +- ๐Ÿ“ฆ Check it out on [NPM](https://www.npmjs.com/package/mern-project-cli) +- ๐Ÿ—ฃ๏ธ **Share** it with other developers ---
-

๐ŸŒŸ Made with โค๏ธ by Manish Raj

+

๐Ÿ’ป Built with โค๏ธ by Manish Raj

Portfolio โ€ข GitHub โ€ข @@ -680,3 +223,7 @@ If you find this tool helpful, please consider: Twitter

+ +--- + +Happy coding, and may your projects be as seamless as this CLI tool! ๐Ÿš€