Installation:

To create a new project using MERN-X, simply run the following command:

npx mern-x@latest
// For yarn 
yarn exec mern-x

How to run project

npm run mern   // Project Back End Will Run @3000
npm run dev    // Complete Project Will Run @3001

// For yarn 
yarn run mern
yarn run dev

How create Model

npm run create:model YourModelName
// For yarn 
yarn run create:model YourModelName

How create Controller

npm run create:controller YourControllerName
// For yarn 
yarn run create:controller YourControllerName

How create Middleware

npm run create:middleware YourMiddlewareName
// For yarn 
yarn run create:middleware YourMiddlewareName

How create Page

npm run create:page YourPageName
// For yarn 
yarn run create:page YourPageName

How create Component

npm run create:component YourComponentName
// For yarn 
yarn run create:component YourComponentName

How create Loader

npm run create:loader YourLoaderName
// For yarn 
yarn run create:loader YourLoaderName

How create Layout

npm run create:layout YourLayoutName
// For yarn
yarn run create:layout YourLayoutName

Project Structure

1mern-x/
2│
3├── app/                                      
4│   ├── config/                                 
5│   │   ├── cli.js
6│   │   ├── config.js
7│   │
8│   ├── controllers
9│   │   ├── todoController.js
10│   │
11│   ├── middlewares
12│   │   ├── authMiddleware.js
13│   │
14│   ├── models
15│   │   ├── todosModel.js
16│   │
17│   ├── storage/
18│   │
19│   ├── utility/
20│   │   ├── emailUtility.js
21│   │   ├── tokenUtility.js
22│   │   ├── validationUtility.js
23│   │
24│   ├── dist/
25│   │
26│   ├── node_modules/
27│   │
28│   ├── public/
29│   │
30│   ├── routes/
31│   │   ├── api.js
32│   │   ├── web.jsx
33│   │
34│   ├── views/
35│   │   ├── assets/
36│   │   │   ├── css/
37│   │   │   │    ├── style.js
38│   │     
39│   │   ├── components/
40│   │   │   ├── CreateForm.jsx
41│   │   │   ├── List.jsx 
42│   │   
43│   │   ├── layout/
44│   │   │   ├── AppLayout.jsx
45│   │   │
46│   │   
47│   │   ├── loader/
48│   │   │   ├── ListLoader.jsx
49│   │   │ 
50│   │   ├── pages/
51│   │   │   ├── CreatePage.jsx
52│   │   │   ├── ListPage.jsx 
53│   │     
54│   │   ├── main.jsx  
55│   │
56│   │
57│   ├── .gitattributes
58│   ├── .gitignore
59│   ├── app.js
60│   ├── index.html
61│   ├── LICENSE
62│   ├── package.json
63│   ├── package-lock.json
64│   ├── postcss.config.js
65│   ├── README.md
66│   ├── tailwind.config.js
67│   ├── vite.config.js

• app: This directory contains the main application code.
  • config: Configuration files for the application.
  • controllers: Controllers for handling business logic.
  • Middleware functions for handling requests.
  • models: Database models.
  • storage: Directory for storing files (if applicable).
  • utility: Utility functions.
• dist: Distribution files (compiled code).
• node_modules: Node.js modules installed via npm.
• public: Public assets.
• routes: Route definitions.
• views: React components and views.
  • assets: Static assets like CSS files.
  • components: Reusable React components.
  • layout: Layout components.
  • loader: Loading components.
  • pages: Individual pages/components.
• .gitattributes: Git attributes file.
• .gitignore: Git ignore file.
• app.js: Entry point of the Node.js application.
• index.html: Main HTML file.
• LICENSE: License file.
• package.json: Project metadata and dependencies.
• package-lock.json: Dependency lock file.
• postcss.config.js: PostCSS configuration file.
• README.md: Project documentation. -tailwind.config.js: Tailwind CSS configuration file. -vite.config.js: Vite configuration file.