🌐 MERN Stack

MongoDB, Expressjs, React, Nodejs

MERN is a fullstack implementation in MongoDB, Expressjs, Reactjs, Nodejs.

MERN stack is the idea of using Javascript/Node for fullstack web development.

PROJECT SETUP

git clone this repo
Install all dependencies for both the front-end and back-end
Install nodemon and change your directory to the root directory of the project and then run npm run dev
The project will run concurrently

clone or download

$ git clone https://github.com/Babarindeolanrewaju2/mernapptask.git
$ change your directory to the client directory and run the command below
$ npm i
$ in the root folder of the project run the command below
$ npm i
and then run `npm run dev` in the root directory

...

Usage (run fullstack app on your machine)

Prerequirements

MongoDB
Node ^10.0.0
npm

notice, the client and server runs concurrently in different terminal session, in order to make them talk to each other

Client-side usage(PORT: 3000)

$ cd client   // go to client folder
$ npm i       // npm install pacakges
$ npm start // run it locally

// deployment for client app
$ npm run build // this will compile the react code using webpack and generate a folder called docs in the root level
$ npm run start // this will run the files in docs, this behavior is exactly the same how gh-pages will run your static site

Server-side usage(PORT: 4000)

Start

$ cd mernapptask   // go to root folder of the project
$ npm i       // npm install pacakges
$ npm run dev // run it locally

Deploy Server to Heroku

$ npm i -g heroku
$ heroku login
...
$ heroku create
$ npm run heroku:add <your-super-amazing-heroku-app>
// remember to run this command in the root level, not the server level, so if you follow the documentation along, you may need to do `cd ..`
$ pwd
/Users/<your-name>/mern
$ npm run deploy:heroku

Dependencies(tech-stacks)

Client-side	Server-side
axios: ^0.15.3	bcrypt-nodejs: ^0.0.3
babel-preset-stage-1: ^6.1.18	body-parser: ^1.15.2
react: ^16.2.0	bcrypt: ^5.0.0
react-dom: ^16.2.0	express: ^4.17.1
react-bootstrap: ^1.0.1	cookie-parser: ^1.4.5
react-router-dom: ^4.2.2	cors: ^2.8.5
bootstrap: ^4.5.0	jsonwebtoken: ^8.5.1
axios: ^0.19.2	mongoose: ^5.9.20
universal-cookie: ^4.0.3	morgan: ^1.10.0
-	nodemon: ^2.0.4
-	path : ^0.12.7
-	helmet: ^3.23.3