MERN Stack App Template

To setup the project, use npx and NOT npm i

Run the following command in your terminal:

npx mern-stack-app-template my-mern-app

or to setup in root folder

npx mern-stack-app-template .

Getting Started

To clone the project, Run the following command in your terminal:

git clone https://github.com/Vishal-Katta/MERN-stack-template.git
cd MERN-stack-template

Configuration

You will need latest version of NodeJS and MongoDB installed locally on your machine.

To configure this application for use of MongoDB, you should change the Environment variable in .env file with your database url.

Quick Note: This project is equiped with a basic API setup using Mongoose. It is expected that you will modify this API backend as necessary to suite your project. DO NOT count on and use the current API's USER SCHEMA as it is only meant as a placeholder and is far from a complete model.

Installation

To get started with this project, you'll want to install the required dependencies and The following command installs both client and server packages including root directory package.json:

npm run setup

Running the server

Starting the project

To run whole project ( backend and frontend ) you can use the following command:

npm run start

To start just the backend MonogoDB server and work on the API you can run:

npm run server

To start just the frontend and work on the UI, you can run:

npm run client

To run backend on build file of frontend, you can run:

npm run build:preview

Dependencies

A list of dependencies used in the project, along with brief explanations for each.

Backend Dependencies

• 
  Express is a fast, unopinionated, minimalist web framework for Node.js, used for building web applications and APIs.
• 
  Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js, providing a higher-level abstraction for MongoDB operations.
• 
  jsonwebtoken is an implementation of JSON Web Tokens (JWT) for authentication and authorization.
• 
  Nodemon is a utility that monitors for changes in files and automatically restarts the server when any changes occur during development.
• 
  bcrypt is a password-hashing function library used for hashing passwords before storing them securely.
• 
  CORS is a Node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options.
• 
  body-parser is a Node.js body parsing middleware, used for parsing incoming request bodies in a middleware before handling.
• 
  dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.
• 
  morgan is an HTTP request logger middleware for Node.js, used for logging requests to the server.
• 
  path is a Node.js module that provides utilities for working with file and directory paths.
• 
  colors is a Node.js package for adding color to terminal text output.

Frontend Dependencies

• 
  React is a JavaScript library for building user interfaces, developed and maintained by Facebook.

• 
  React DOM is the package responsible for rendering React components in the DOM.

• 
  React Router DOM provides declarative routing for React applications, enabling navigation between different components.

• 
  Redux Toolkit is the official toolset for efficient Redux development, offering simplified Redux setup and improved developer experience.

• 
  React Redux is the official React bindings for Redux, allowing React components to interact with the Redux store.

• 
  Axios is a promise-based HTTP client for making HTTP requests from the browser.

• 
  Material UI is a popular React UI framework that provides pre-designed React components following the Material Design guidelines.

• 
  Tailwind CSS Forms provides styles and utilities for styling forms in Tailwind CSS.

• 
  React Toastify is a notification library for React applications, providing customizable toast notifications.

• 
  Emotion is a popular CSS-in-JS library for styling React components.

• 
  Material UI Icons provides a collection of high-quality icons for use with Material-UI components.

• 
  React Icons provides a collection of popular icon libraries as React components for easy integration.

• 
  Redux Logger is a middleware for Redux that logs actions and state changes, useful for debugging Redux applications.

• 
  Redux Thunk is a Redux middleware that allows dispatching asynchronous actions, enabling more complex logic in Redux.

• 
  Tailwind Scrollbar Hide is a utility for hiding scrollbars in Tailwind CSS, useful for customizing scrollbar appearance.