News Media Platform with MERN Stack

In this article, we’ll walk through the step-by-step process of creating a News Media Platform using the MERN (MongoDB, ExpressJS, React, NodeJS) stack. This project will showcase how to set up a full-stack web application where users can view a news article, add a new news article, and delete one.

Preview of final output: Let us have a look at how the final application will look like.

Prerequisites:

• React JS
• MongoDB
• ExpressJS
• NodeJS
• MERN Stack

Approach to Create a News Media Platform:

• List all the requirement for the project and make the structure of the project accordingly.
• Chooses the required dependencies and requirement which are more suitable for the project.

For Backend:

1. Create a directory named model inside root directory.
2. Create a javascript file named articleSchema.js in the model directory for collection news schema.
3. Then create another route directory inside root(Backend folder).
4. Create another javascript file named articleRoute.js to handle API request.

For Frontend:

1. Create a components directory inside root directory(Frontend folder).
2. Create three file of javascript inside components folder namely DeleteArticle.jsx, NewsArticleForm.jsx and NewsList.jsx which are used to delete, add new article and show a list of news respectively.

Steps to Create the Backend:

Step 1: Create a directory for project

mkdir Backend
cd Backend

Step 2: Initialized the Express app and installing the required packages

npm init -y
npm i express mongoose cors nodemon

Project Structure:

The package.json file of backend will look like:

"dependencies": {
 "cors": "^2.8.5",
 "express": "^4.18.2",
 "mongoose": "^8.2.0",
 "nodemon": "^3.1.0"
}

Example : Below is an example of creating a server for New Media platform.

Start your server using the following command.

node index.js

Steps to Create the Frontend:

Step 1: Initialized the React App with Vite and installing the required packages

npm create vite@latest -y
->Enter Project name: "Frontend"
->Select a framework: "React"
->Select a Variant: "Javascript"
cd Frontend
npm install

Project Structure:

The package.json file of frontend will look like:

 "dependencies": {
 "react": "^18.2.0",
 "react-dom": "^18.2.0"
 },
 "devDependencies": {
 "@types/react": "^18.2.56",
 "@types/react-dom": "^18.2.19",
 "@vitejs/plugin-react": "^4.2.1",
 "vite": "^5.1.4"
 }
}

Example: Below is an example of creating a frontend of News Media platform.

Start your frontend application using the following command.

npm run dev

Output:

• Browser Output

• Output of data saved in Database: