Blogging app using mern stack technologies with the complete authentication system.

Github:https://github.com/mehulk05/Blogapp-using-MERNLive Demo:https://mehulk05.github.io/Blogapp-using-MERN/

A demo of what we are creating

Complete Demo of Application

Let us understand what does MERN stack means.

• Mongo DB – It’s an open-source NoSQL cross-platform document-oriented database.
• Express JS – It’s a web-based application framework work with Node JS, It helps to build web apps and RESTful APIs.
• React– React is a JavaScript library created by Facebook. React is a User Interface (UI) library. React is a tool for building UI components
• Node JS – It is a free JavaScript run-time environment, It executes JavaScript code outside of a browser. It is available for macOS, Windows, Linux, and Unix.

I will be using the following plugins and tools to create the MERN Stack app.

• Node JS
• MongoDB
• Mongoose JS
• Express JS
• ReactJS
• Visual Studio Code

#1 Setup Node JS development environment

Follow this link to set up Node JS in your system. Simply download and install the node as per your system bit i.e 32 and 64 bit and OS

#2 Build a Node.JS Backend

To write the manageable code, we should keep the MERN Stack backend folder separate. Create a folder by the name of the backend or anything you like in React’s root directory. This folder will handle the backend code of our application, remember it will have the separate node_modules folder from React.

mkdir backend
cd backend
npm init -y

The above command will take you inside the backend folder and then generate package.json with all default configuration.

Install and Configure required NPM packages for MERN Stack app development

Use the below command to install the following node modules.

npm install --save body-parser cors express mongoose

• body-parser: The body-parser npm module is a JSON parsing middleware. It helps to parse the JSON data, plain text, or a whole object.
• CORS: This is a Node JS package, also known as the express js middleware. It allows enabling CORS with multiple options. It is available through the npm registry.
• Express.js: Express js is a free open source Node js web application framework. It helps in creating web applications and RESTful APIs and act as middleware
• Mongoose: Mongoose is a MongoDB ODM for Node. It allows you to interact with the MongoDB database.

Starting and stopping a server every time a change is made is a time-consuming task. To get rid of this problem we use nodemon the npm module. This package restarts the server automatically every time we make a change. We’ll be installing it locally by using the given below command.

npm install nodemon --save-dev

Also, make sure to change the package.json to start nodemon

#3 Folder Structure for Backend

#4 Writing App.js

const path = require("path");
const express = require("express")
const mongoose = require("mongoose")const db = require("./db/db")
const postRouter = require("./Routes/post");const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
   extended: false
}));
app.use(cors());const PORT = process.env.PORT || 3000app.use("/api/posts", postRouter)app.listen(PORT, (req, res) => {
console.log(`app is listening to PORT ${PORT}`)
})

#5 Writing db.js

To create the database you can go here to register and create a new database. Also, you will get the connection URL which I will be using in my code

const mongoose = require('mongoose');mongoose.Promise = global.Promise;const url = "mongodb://testuser:<password>@cluster0-shard-00-00.ecaql.mongodb.net:27017?ssl=true&replicaSet=atlas-ceza4t-shard-0&authSource=admin&retryWrites=true&w=majority"// Connect MongoDB at default port 27017.let mong = mongoose.connect(url, {
    useNewUrlParser: true,
    useCreateIndex: true,
    useUnifiedTopology: true
}, (err) => {
    if (!err) {
        console.log('MongoDB Connection Succeeded.')
    } else {
        console.log('Error in DB connection: ' + err)
    }
});

#6 Create Model with Mongoose JS

const mongoose = require('mongoose');const Post = mongoose.model('Post', {
    title: {
        type: String,
        required: true
    },content: {
        type: String,
        required: true
    },

});module.exports = Post

#react #mongodb #node #express #javascript