# MERN Stack Template

<img src='https://github.com/belferink1996/MERN-template/blob/images/images/mern.jpeg' alt='MERN banner' width='700' />

- **M** = [MongoDB](https://www.mongodb.com)
- **E** = [Express.js](https://expressjs.com)
- **R** = [React.js](https://reactjs.org)
- **N** = [Node.js](https://nodejs.org)

<br />
<br />

# How to use this template

[📀 Demo video](https://youtu.be/N2pvvkyoS68)

### STEP 1:

Click ["Use this template"](https://github.com/belferink1996/MERN-template/generate) to generate a
new repository.<br /> Then open your terminal and clone your repository:

> cd ~/Desktop <br /> git clone https://github.com/[your-user-name]/[your-repo-name].git

<br />

### STEP 2:

Go to your repository's folder, and install all dependecies:

> cd ~/Desktop/[your-repo-name]<br /> npm install

<br />

### STEP 3:

Prepare your MongoDB database ([atlas](https://www.mongodb.com/cloud/atlas),
[community](<https://github.com/belferink1996/MERN-template/wiki/Install-MongoDB-Community-Server-(MacOS)>)).<br />
Then go to your server folder (backend), and set your database within `server.js`,

<br />

### STEP 4: CODE !!!

<br />
<br />

# Node dependecies & versions:

###### Client:

> axios: 0.21.1 &nbsp;&nbsp;&nbsp; ---> &nbsp;&nbsp;&nbsp; Use the API<br /> react: 17.0.1
> &nbsp;&nbsp;&nbsp; ---> &nbsp;&nbsp;&nbsp; UI framework<br /> react-dom: 17.0.1 &nbsp;&nbsp;&nbsp;
> ---> &nbsp;&nbsp;&nbsp; UI framework<br /> react-scripts: 4.0.2 &nbsp;&nbsp;&nbsp; --->
> &nbsp;&nbsp;&nbsp; React 'npm' scripts

###### Server:

> cors: 2.8.5 &nbsp;&nbsp;&nbsp; ---> &nbsp;&nbsp;&nbsp; Enable HTTP requests<br/> dotenv: 8.2.0
> &nbsp;&nbsp;&nbsp; ---> &nbsp;&nbsp;&nbsp; Secure sensitive information<br /> express: 4.17.1
> &nbsp;&nbsp;&nbsp; ---> &nbsp;&nbsp;&nbsp; Server app<br /> mongoose: 5.11.15 &nbsp;&nbsp;&nbsp;
> ---> &nbsp;&nbsp;&nbsp; MongoDB database<br /> morgan: 1.10.0 &nbsp;&nbsp;&nbsp; --->
> &nbsp;&nbsp;&nbsp; Logs incoming requests