Department of Computer Engineering

Atharva College of Engineering

Malad (W), Mumbai - 400 095
University of Mumbai (AY 2022-2023)

Blog Website Using MERN Stack

Submitted in partial fulfillment of the requirements of the degree
BACHELOR OF ENGINEERING IN COMPUTER
ENGINEERING

By

Jamil Shaikh | Roll No: 38

Divy Solanki | Roll No: 53
Pratham Tank | Roll No: 56
Prem Sangle | Roll no: 31

Supervisor:
Dr. Suvarna Pansambal

1
 CERTIFICATE

This is to certify that the Mini Project entitled “Blog Website Using MERN

Stack” is bonafide work of Jamil Shaikh (Roll no. 38), Divy Solanki (Roll

no. 53), Pratham Tank (Roll no. 56), and Prem Sangle (Roll no. 31)

submitted to the University of Mumbai in partial fulfillment of the requirement

for the award of the degree of “Bachelor of Engineering” in “Computer

Engineering”.

Dr. Suvarna Pansambal

Supervisor

Prof. Ranjita Asati Dr. Suvarna Pansambal Dr. S. Kallurkar

Mini Project Coordinator Head of Department Principal

2
 Mini Project Approval

This Mini Project entitled “Blog Website Using MERN Stack” by Jamil
Shaikh (Roll no. 38), Divy Solanki (Roll no. 53), Pratham Tank (Roll
no. 56), and Prem Sangle (Roll no. 31) is approved for the degree of
Bachelor of Engineering in Computer Engineering.

Examiners

1………………………………………
(Internal Examiner Name & Sign)

2……………………………………..
(External Examiner name & Sign)

Date:

Place: Mumbai

3
Contents

Abstract 5

Acknowledgement 6

List Of Figures 7

1 Introduction 8
1.1 Introduction
1.2 Motivation
1.3 Problem Statement & Objectives
1.4 Organization of the Report

2 Literature Survey 12

2.1 Survey of Existing System

2.2 Limitation Existing system or research gap

3 Proposed System (e.g., New Approach of Data Summarization) 13

3.1 Introduction
3.2 Architecture/ Framework
3.3 Details of Hardware & Software
3.4 Experiment and Results
3.5 Conclusion and Future work.

References 17

4
 Abstract

An online-based Blogging platform where any and every user can publish and read different

types of blogs and also track their profile or someone else’s. The website is implemented using

MERN stack, therefore, it gives a seamless smooth experience of a Single Page Application

(SPA).

We have also implemented a search engine for fetching a particular category of blogs or for

fetching a particular user’s blogs. Overall, the website is a complete package that allows user

to write and save their blogs without any hinderance.

5
 Acknowledgement

We would like to express a deep sense of thanks and gratitude to our project guide Dr.
Suvarna Pansambal for constantly guiding us throughout this project. Her constructive
advice and constant motivation have been responsible for the successful completion of this
project.
We have been greatly benefitted from the valuable guidance, encouragement and kind
supervision given to us throughout this project which helped us to develop the project
successfully.

Under the guidance of

Dr. Suvarna Pansambal

Submitted by,
Jamil Shaikh
[Roll no: 38]

Divy Solanki
[Roll no: 28]

Pratham Tank
[Roll no: 56]

Prem Sangle
[Roll no: 31]

6
 1. Introduction

1.1 Introduction

As technology upgrades at a rapid pace and previously implemented technologies become

outdated and lacking, there is requirement for new technologies to emerge and replace and
enhance the previously existing technologies. Various blogging website exist out there on the
internet and they use framework that has been outdated or lag behind in providing workable
response time. Our intention is to provide the best possible response time and user experience.

We were absolutely sure that not any blog website would do so we came down the road of
using a well-known and popular technology development stack (Tech Stack), i.e., MongoDB,
Express, ReactJS and NodeJS. MERN allows us to create well managed and modular Single-
Page Applications.

1.2 Motivation

The idea stuck us with a realization that how in today’s era there is continuous need for
exposure. A student or any blooming individual requires to put forward his perspective in need
of his/her identity. Therefore, we were deemed to implement a blog web application that could
offer the services to such individuals to write and publish their work and share it for their own
sake.
Also, our mutual understanding and group stability helped us to work harder. Many tutors out
there helped and motivated us during the learning and development phase thoroughly.

7
 1.3 Problem Statement & Objectives

Problem Statement:

Blog websites that have been outdated due to their technology of development fail to provide
an efficient response time. Also, they may make several http requests for data continuously and
this makes the application chunky and less responsive.

Objectives: -

We have certain objectives alongside the implementation of the project, these few objectives
are listed below:
 Ease of Use
 Exposure for individuals
 Modern UI (MERN design)
 Account Tracking
 Search bar
 Preserving blogs in database

8
 2. Literature Survey

1. Quora – It is a well-established blog post website which is both efficient and content.
Quora is an interactive learning platform. Easily find and create engaging articles for any
categorized topic and get the formative insights you need.
[1] Quora’s mission is to share and grow world’s knowledge.

2. BuzzFeed – It is a premier digital media company for the most diverse, most online, and
most socially engaged generation the world has ever seen. It has availability of great content
that is for general public.
[2] making content on the Internet more inclusive, empathetic, and creative.

9
 3. Proposed Architecture
3.1 Introduction

This project is titled “Blog Website using MERN Stack”. As the name suggests, we have
create an online platform using ReactJS for frontend, NodeJS and Express framework for
building REST API, Lastly, we have used MongoDB to provide support for database. The
project emphasizes on categorizing various blogs and provide end-users with the content they
really want to see. And any registered user can publish their on blog too. It is a simple and
easy structure and has everything working together, in MERN stack. We’ve implemented
different sections to the same page, following are the sections:
 Blog feed: It contains all the blogs being fetched from the database and being sorted
by recently published blog first.
 Register and Login page: It contains forms that interact to our backend for storing
user info for future login.
 Profile page: It displays all the necessary details about a registered and logged in user.
 Publish Blog page: It hold tools that allow a user to write their own blog.
 Update page: This is the setting page for user to conveniently update their account
details.

10
3.2 Architecture

Blog website using MERN Stacks comprises of ReactJS for frontend where we define
different components of the page which are later added to the DOM using react-router-
dom package from NodeJS. Using ReactJS we serve a Single-Page application at once
which bundles all the required frontend tools, i.e., HTML, CSS, and Vanilla JS in the
form of JSX.
The Backend of the Website includes REST API for handling our route handlers that
connects our database and the user. The REST API includes:
 Authentication – We make use of hash passwords to add layer of encryption and
security.
 User route – This bundles routes to authenticate and login a verified user.
 Post route – This enables us to publish blogs from a certain user account.
 Category route – This enables any end-user to fetch a specific category of blogs,
for example, music, nature, etc.
We have Created a database using MongoDB and Mongoose. Lastly, we connected the
Express app with MongoDB and deployed the website in development environment
using NodeJS.

11
3.2.1 Process Design

Data Flow:

3.2.1. A flowchart of website

12
3.3 Details of Hardware & Software

Websites are flexible over all the device and browser platforms, loading most of the websites
present on web is possible for any and every device. The HTML & CSS updates do come
along every now and then bringing new features to the board. Latest versions of HTML is
HTML5, and CSS uses level 2 (i.e., CSS2). Whereas, ECMAScript 2021 brings new
operations to JavaScript like string and promises.

The react application is defined using widely know package installer – npx create-react-app.
The above environment bundles all the necessary modules required for building a Frontend
using ReactJS. Lastly, REST API is created using Express framework of NodeJS, which
communicates with the frontend and the backend along with our database in MongoDB.

Software Requirement -

1. Operating System: Windows XP/Vista/7/8/8.1/10 for both 64 bits & 32bits system.
2. Any IDE like Visual studio code, Sublime, Atom for efficient coding (*optional)
3. Any well recognized browser like Chrome, Firefox, Microsoft Edge, etc.

Hardware Requirement –

Memory (RAM): 2 GB or higher

Processor: Pentium IV or higher (for coding)

13
3.4 Experiment and Results

1. Main Page (Blog Feed):

2. Single Blog Page:

14
3. Write Page:

4. Account Page:

15
5. Register Page:

6. Login Page:

16
3.5 Conclusion and Future work:

3.5.1 Conclusion

We have learnt the following about frontend development:

 Frontend library ReactJS

 React hooks

 CSS

 Modularity using React components.

Also, while implementing additional features we learnt about:

 JS function

 HTML DOM manipulation using JS

 CSS design manipulation using JS.

Backend Implementation using:

 NodeJS

 NodeJS framework Express

 MongoDB and Mongoose NodeJS package.

3.5.2 Future work

Following are some implementations that we plan on working:

 Likes and Comments section.

 Personalized theming based on user preferences.

 Hosting of the website through a server.

 More efficient Search Engine to prompt better blogs to a user.

17
 REFERENCES:

1. About Quora: https://www.quora.com/about

2. Buzzfeed - https://www.buzzfeed.com/about

3. “JavaScript and jQuery: Interactive Front-End Web Development” 2014 published by

John Wiley & Sons, Inc. - Jon Duckett
4. https://nodejs.dev/learn/nodejs-with-typescript
5. www.developer.mozilla.org

6. www.bennettfeely.com (CSS clip path maker)

7. www.pixabay.com (For images)

18