E-BLOG WEBISTE

INSTITUTION TRAINING – MINOR PROJECT

(22SSP539)
Submitted By
Yuvaanesh P
(22MSS060)
Under the Guidance of

[Link] MCA.,[Link].,PhD.,NET

Associate Professor
Department of Software Systems
In Partial Fulfillment of the Requirements for the Award of the Degree of

MASTER OF SCIENCE IN SOFTWARE SYSTEMS

(Five-Years Integrated Course)

DEPARTMENT OF SOFTWARE SYSTEMS

PSG COLLEGE OF ARTS & SCIENCE
An Autonomous College - Affiliated to Bharathiar University
Accredited with ‘A++’ Grade by NAAC (4th Cycle)
College with Potential for Excellence (Status Awarded by the UGC)
Star College Status Awarded by DBT - MST
An ISO 9001:2015 Certified Institution Coimbatore
- 641 014

October 2024
 DEPARTMENT OF SOFTWARE SYSTEMS
PSG COLLEGE OF ARTS & SCIENCE
An Autonomous College - Affiliated to Bharathiar University Accredited
with ‘A++’Grade by NAAC (4th Cycle)
College with Potential for Excellence
(Status Awarded by the UGC)
Star College Status Awarded by DBT - MST
An ISO 9001:2015 Certified Institution
Coimbatore - 641 014

CERTIFICATE
This is to certify that this project work entitled “E-BLOG WEBSITE” is a bonafide record

of work done by Yuvaanesh P (22MSS060) in partial fulfillment of the requirements for the award

of Degree of Master of Science in Software Systems (Five Years Integrated Course) of Bharathiar

University.

Faculty Guide Head of the Department

Submitted for Viva-Voce Examination held on

Internal Examiner External Examiner

 DECLARATION

I, Yuvaanesh P (22MSS060), hereby declare that this project work entitled “E- BLOG WEBSITE” is

submitted to PSG College of Arts &Science, Coimbatore in partial fulfilment of the requirements for the

award of the degree of Master of Science in Software Systems, is a record of original work done by me

under the supervision and guidance of Dr. Umagandhi MCA MPhil PhD NET., Associate Professor

Department of Software Systems, PSG College of Arts &Science, Coimbatore.

This report has not been submitted by me for the award of any other Degree / Diploma/ Associateship /

Fellowship or any other similar degree to any other university.

Place: Coimbatore

Date:

Yuvaanesh P
22MSS060
 ACKNOWLEDGEMENT
My venture stands imperfect without dedicating my gratitude to a few people who have contributed

a lot towards the victorious completion for my project work.

I would like to thank Thiru L. Gopalakrishnan, Managing Trustee, PSG & Sons Charities, for

providing me a prospect and surroundings that made the work possible.

I take this opportunity to express my deep sense of gratitude to Dr. T. Kannaian, Secretary of

PSG College of Arts & Science, Coimbatore for permitting and doing the needful towards the successful

completion of this project.

I express my deep sense of gratitude and sincere thanks to our Principal Dr.D. Brindha for her

valuable advice and concern on students. I am very thankful to Dr. M Umarani, Vice Principal for her

support towards my project.

I sincerely thank Dr. K. V. Rukmani Head of the Department, Department of Software Systems

for his whole hearted help to complete this project successfully by giving valuable suggestions.

I convey my heartiest and passionate sense of thankfulness to my project guide

Dr. Umagandhi, Associate Professor, Department of Software Systems, for her timely suggestion

which had enable me in completing the project successfully.

This note of acknowledgement will be incomplete without paying my heartful devotion to my

parents, my friends and other people, for their blessings, encouragement, financial support and the

patience, without which it would have been impossible for me to complete the job.

Yuvaanesh P

22MSS060
 SYNOPSIS

The project, “E-Blog Website” aims to develop a modern, responsive, and interactive blogging platform
that allows users to create, edit, and manage blog posts with advanced text formatting features. The
platform will provide an intuitive and user-friendly interface, making it accessible across various devices
while offering smooth navigation between pages without the need for reloads. Users will be able to
engage with the content through bookmarking and liking posts, adding a social layer to the website,
which enhances user interaction. The project will also feature a secure user authentication system,
ensuring that only authorized users can create or edit blog posts, thereby maintaining the integrity of the
content. Strong security and privacy measures will be implemented to protect user data and prevent
vulnerabilities .
 TABLE OF CONTENTS

[Link] CONTENTS PAGE NO

1 INTRODUCTION 1
1.1 Project Overview 1
2
1.2 Module Description
2 SYSTEM ANALYSIS 3
2.1 Existing System 3
2.2 Proposed System 3

3 SYSTEM CONFIGURATION 4
3.1 Hardware Specification 4

3.2 Software Specification 4

4 SOFTWARE DESCRIPTION 5
4.1 Front End 5
4.2 Back End 6
5 SYSTEM DESIGN 7
5.1 Data Flow Diagram 7
5.2 Entity Relationship Diagram 9
5.3 Table Design 11
5.4 Input Design 12
5.5 Output Design 13
6 SYSTEM TESTING & IMPLEMENTATION 15
7 SCOPE FOR FUTURE ENHANCEMENT 17
8 CONCLUSION 18
9 BIBLIOGRAPHY 19
10 APPENDIX 20
A. Screenshot 20
B. Sample Coding 22
 1. INTRODUCTION

1.1 PROJECT OVERVIEW

The blog site aims to develop a responsive, user-friendly blog site using [Link] andmodern web
[Link] site allows users to browse, create, edit, and manage blog posts with rich
[Link] Router enables smooth navigation between different pages without page
reloads,enhancing the user [Link] project also features interactive elements like post
bookmarking and "liking," addinga social layer to the [Link] is used for efficient dependency
management, ensuring a fast and optimizeddevelopment [Link], security measures are
integrated to ensure safe deployment and [Link] project aims to showcase the use of React and related
tools in building a functional andengaging blogging platform.

MODULES

• User Interface (UI)

• Blog Post Management
• Routing
• User Authentication
• Error handling and Notification
• Bookmarking and Liking
• Security & Privacy
• Routing
• API Integration

1
 1.2 MODULE DESCRIPTION

User Interface (UI)

Manages the layout and visual components of the application, ensuring a responsive design and user
-friendly experience across different devices.

Blog Post Management

Handles the creation, editing, deletion, and display of blog posts, utilizing [Link] for rich text editing
capabilities that allow users to format their content easily.

Routing
Manages navigation between different views of the application using React Router, enabling seamless
transitions between the homepage, individual blog posts, and forms for creating or editing posts.

User Authentication
Facilitates user login and registration processes, managing user sessions and access control to ensure
that only authorized users can create and edit posts.

Bookmarking and Liking

Enables users to bookmark their favorite posts or like them, enhancing user engagement and allowing
for a personalized content experience.

API Integration
Manages interactions with backend services, facilitating the fetching, creating, updating, and deleting
of blog posts through RESTful APIs or GraphQL.

Error Handling and Notification

Provides feedback to users regarding the success or failure of their actions and manages error messages
throughout the application for a smoother user experience.

2
 2. SYSTEM ANALYSIS

System analysis is conducted for the purpose of studying or its part in order to identify its objectives.
It is a problem-solving technique that improves the system and ensures that all the components of
the system work efficiently to accomplish their purpose.

2.1 EXISTING SYSTEM

Existing blogging systems, such as traditional platforms like WordPress and static sitegenerators, often
face significant limitations that affect user [Link] of these platforms provide basic functionality
for content creation while lackingadvanced engagement tools like commenting and liking [Link]
complex user interfaces can overwhelm new users, andcustomization options are typically limitedto pre-
built [Link] systems require technical knowledge for updates, making them less accessible for
non- technical [Link], performance issues during high traffic can lead to slow load times. This
project aims to address these shortcomings by creating a more interactive and user-friendly blogging
platform.

2.2 PROPOSED SYSTEM

The proposed system aims to develop a modern blogging platform that addresses the limitations
of existing systems by offering an intuitive user interface and interactive features. It willinclude a
powerful rich text editor using [Link] for easy post formatting, along with user engagement tools
like commenting, liking, and bookmarking to foster community [Link] React Router,
the application will provide seamless navigation without page reloads and implement user
authentication for secure profile [Link] API integration will ensure smooth data
handling, while robust error handling will offer real-time feedback. Additionally, performance
optimization and security measures will enhance user experience and protect against vulnerabilities.

3
 3. SYSTEM CONFIGURATION

3.1 HARDWARE SPECIFICATIONS

• RAM : 8 GB
• System Type : 64-bit operating system
• Hardware : Keyboard and Mouse
• Internet Connection : Stable connection for online access
• Testing Devices : Smartphones/tablets for testing

3.2 SOFTWARE SPECIFICATIONS

• Operating System : Windows, macOS, or Linux

• Web Browser : Chrome or Firefox
• Yarn :package management
• [Link] : building user interfaces
• React Router : For routing management
• Version Control : Git

4
 4. SOFTWARE DESCRIPTION

4.1 FRONT END REACT JS

[Link] was utilized as the core technology for developing the frontend of the e-blog website.
[Link], a widely adopted JavaScript library, allows for the creation of dynamic, component-based user
interfaces, providing a responsive and efficient user experience. The library's component-driven
architecture enabled the modularization of the user interface into reusable components, such as blog post
displays, input forms, and navigation bars, promoting maintainability and scalability. React Router was
employed to facilitate seamless navigation between different sections of the website, enabling a single-
page application (SPA) structure that improves performance by minimizing page reloads. React's
powerful state management capabilities were crucial in handling dynamic content updates, user
interactions, and rendering changes efficiently, making it an ideal choice for building a modern e-blog
platform.
Advantages:
• Facilitates the creation of dynamic and responsive UIs
• component-based architecture promotes reusability and easier maintenance
• efficient rendering improves application performance.

Web Browser
Latest versions of Chrome or Firefox. The web browser is an essential tool for developing, testing,
and debugging web [Link] latest versions of Google Chrome and Mozilla Firefox are used due to
their widespread usage and robust feature sets.
Advantages:
• Supports modern web standards;
• includes powerful developer tools for debugging and testing;

5
 4.2 BACK END YARN
Yarn is a package manager that streamlines the management of project dependencies and libraries. It
offers features such as offline caching, deterministic installs, and parallel operations, which enhance the
speed and reliability of dependency management. Using Yarn helps ensure that the development
environment remains organized and that all necessary packages are easily accessible and up to date.

Advantages

• Provides fast and reliable package installations

• supports offline caching, which speeds up development;
• helps maintain a clean and organized project structure

6
 5. SYSTEM DESIGN

5.1 DATA FLOW DIAGRAM

A Data Flow Diagram (DFD) is a traditional visual representation of the information flows within a
system. A neat and clear DFD can depict the right amount of the system requirement graphically. It
can be manual, automated, or a combination of both. It shows how data enters and leaves the system,
what changes the information, and where data is stored.
The objective of a DFD is to show the scope and boundaries of a system as a whole. It may be used
as a communication tool between a system analyst and any person who plays a part in the order that
acts as a starting point for redesigning a system. The DFD is also called as a data flow graph or bubble
chart.

DIAGRAM

LEVEL 0

Fig 1.0

7
Fig 1.1

8
 5.2 ENTITY - RELATIONSHIP DIAGRAM (E-R)

An Entity-Relationship (ER) diagram is a specialized graphical tool used to illustrate the entities within
a database and the relationships between them. In an ER diagram, symbols such as rectangles (or boxes)
are used to represent entities, diamonds depict relationships, and ovals represent the attributes of entities.
These diagrams are widely employed in data modeling to design and visualize the structure of an
information system.
An Entity-Relationship Diagram (ERD) serves as a conceptual framework for understanding how data
is structured and related within a system. It provides a visual representation of entities (like users,
products, or orders), their attributes (such as name, ID, or date), and the connections between them
(such as "has," "belongs to," or "contains"). ERDs are essential tools in database design, helping
developers and stakeholders communicate and design a system’s data flow and relationships
effectively.

The elements of an ERD are

▪ Entities
▪ Relationships
▪ Attributes
Steps involved in creating an ERD include
▪ Identifying and defining the entities
▪ Determining all interactions between the entities
▪ Analyzing the nature of determining the cardinality of the relationships ▪

Creating the ERD

9
Diagram

Fig 2.0

10
5.3. TABLE DESIGN

DATA BASE DESIGN

A database is an organized mechanism that has the capability of storing informationthroughwhich a user
can retrieve stored information in an effective and efficient manner. The database designis a two level
process. In the first step, user requirements are gathered together and a database is designed which will
meet these requirements as clearly as possible. This step is calledInformation Level Design and it is
taken independent of any individual DBMS.
The database design for the blogging platform consists of several interconnected tables to manage various
functionalities. The Users table includes columns such as `user_id` (primary key), `username`, password`,
and `email`, along with timestamps for account creation and updates. The Blog_Posts table tracks each
post with a unique `post_id`, a foreign key `user_id` referencing the author, along with fields for the post
title, content, creation, and update timestamps, and a status indicating whether the post is a draft or
published. Comments on posts are managed in the Comments table, which features a unique comment_id`,
foreign keys `post_id` and `user_id`, and fields for the comment content and timestamps. Additionally,
the Bookmarks table allows users to bookmark posts, linking users to posts through
`user_id` and `post_id`. Finally, the Likes table captures user interactions with posts, including a unique
`like_id` and foreign keys for both users and posts. This structured approach ensures efficient data retrieval
and integrity while supporting the core features of the blogging platform.

Advantages

• Structured Organization
• Scalability
• Data Integrity
• Efficient Querying
• User Interaction Tracking
• Security
• Flexibility
• Comprehensive Functionalit

11
 5.4 INPUT DESIGN

Input design serves as the crucial connection between users and the information system, transforming
user-generated inputs into a format that a computer can process. This process involves collecting and
organizing data into cohesive groups based on similarities, which allows for efficient management and
retrieval. Selecting suitable input methods is essential to ensure the system effectively captures the
necessary information. As a key component of the overall system architecture, the input design lays the
groundwork for the entire processing cycle, starting from the moment data is entered through various
input devices like keyboards or forms. It is imperative that the source documents are logical and user-
friendly, facilitating ease of understanding and interaction. Careful consideration in input design is vital;
if inaccurate data is entered, it can lead to compounded errors during processing and output stages,
ultimately compromising the system's reliability and effectiveness.

12
 5.5 OUTPUT DESIGN

Output design plays a crucial role in any information system, ensuring that results are presented in a way
that meets user expectations and enhances understanding. The formatting of output is tailored to improve
clarity, allowing users to quickly grasp the information they need. Depending on the user's requirements,
the system generates outputs that are both relevant and timely, presenting all necessary data in a coherent
manner.
When designing output, system analysts must address several key considerations. First, they must
identify the specific information that needs to be conveyed. Next, they determine the most effective method
of delivery, whether it be displaying on a screen, printing on paper, or using audio output. The arrangement
of the information is also critical, as it should be structured in an easily digestible format. Finally, analysts
must decide how to distribute the output to the intended audience, ensuring accessibility and ease of use.
Effective output design is fundamental to the success of a computerized system. If users do not receive
reliable and clear outputs, they may perceive the system as unnecessary and choose to disengage.
Therefore, a well-thought-out output design not only supports informed decision-making but also
strengthens the relationship between the system and its users, facilitating a more efficient and productive
interaction. Ultimately, the goal of output design is to deliver the right information in the right format,
thereby enhancing the overall user experience and system effectiveness.

13
14
 6. SYSTEM TESTING & IMPLEMENTATION

SYSTEM TESTING:
Testing is a process, which reveals errors in the program. System testing is a crucial phase in
the software development lifecycle that verifies the complete and integrated software product to
ensure it meets specified requirements. It involves various testing types, including unit testing,
integration testing, functional testing, usability testing, performance testing, and security testing. The
primary purpose of system testing is to identify and rectify defects before the software is deployed,
thereby ensuring reliability, functionality, and user satisfaction. By rigorously testing the application
in real-world scenarios, system testing minimizes the risk of failures and enhances the quality of the
software, ultimately leading to a more positive user experience and reducing maintenance costs.

IMPLEMENTATION:

1. Preparation and Planning: A detailed implementation plan is developed to outline objectives,

timelines, and resource requirements. This plan also identifies potential risks and mitigation
strategies to address challenges during deployment.

2. Environment Setup: The production environment is configured to host the blogging platform.
This includes setting up web servers, databases, and necessary network configurations to ensure
the system can handle user traffic and provide reliable performance.

3. Data Migration: If there is any existing user or blog data, a structured migration strategy is
employed to extract, transform, and load this data into the new system. Ensuring data integrity
and accuracy is a priority during this process.

4. User Training and Documentation: Comprehensive training sessions are conducted to

familiarize users with the new blogging platform. User manuals and online tutorials are provided
to support users in effectively navigating the system.

5. Deployment: The blogging platform is launched, allowing users to access its features. Depending
on the strategy, this may involve a full rollout or a phased introduction, with monitoring tools in
place to observe system performance and user interactions.

6. Post-Deployment Support: After the launch, ongoing support is offered to address any issues
users encounter. A feedback mechanism is established to gather user input, facilitating continuous
improvement.
15
7. Maintenance and Continuous Improvement: Regular monitoring and maintenance activities
are performed to ensure the blogging platform operates smoothly. Updates, bug fixes, and feature
enhancements are implemented based on user feedback and evolving needs.

16
 7. SCOPE FOR FUTURE ENHANCEMENT

The blogging platform has a solid foundation, with numerous opportunities for future enhancements to
improve functionality and user experience. One area for improvement is the **user interface**, which
can benefit from modern design updates, responsive layouts, and customizable themes to attract a wider
audience.

Enhancing content management features such as tagging, categorization, and will help users organize
and discover content more effectively. Social media integration is crucial for enabling users to share their
blog posts easily, increasing visibility and traffic.

Exploring monetization options, such as affiliate marketing and ad placements, will empower users to
generate revenue from their content. Creating a mobile application will enhance accessibility, allowing
users to manage their blogs on the go.

To ensure security, it’s essential to implement enhanced security features, including two-factor
authentication and data encryption. Finally, fostering community features and adding multi-language
support will broaden the platform's appeal and enhance user engagement. By addressing these areas, the
platform can evolve and meet the changing needs of users in a competitive market.

17
 8. CONCLUSION

The blogging platform project has effectively combined modern technologies and user-centric design to
create a robust environment for content creation and sharing. Utilizing [Link] for the front end has
enabled a dynamic and responsive user interface, ensuring that users can interact with the platform
seamlessly across various devices. The use of Yarn for package management has streamlined the
development process, allowing for efficient dependency management and project scalability.

Key features such as user authentication, blog post management, and commenting systems have been
successfully implemented, providing users with essential tools for managing their content and engaging
with their audience. The bookmarking and liking module enhances user experience by allowing readers
to save and show appreciation for their favorite posts, while API integration ensures that the platform
can connect with external services and enhance its functionality.

Looking ahead, there are ample opportunities for future enhancements, including improved userinterface
designs, advanced content management features, and SEO optimization tools. By focusing oncontinuous
user feedback and iteration, the platform can adapt to the evolving needs of its community. Overall, this
blogging platform serves as a powerful tool for individual expression and community engagement,
laying a strong foundation for ongoing growth and innovation in the digital content space.

18
 9. BIBLIOGRAPHY

Reference Books

1. Learning React: Functional Web Development with React and Redux,

- Alex Banks and Eve Porcello

2. HTML and CSS: Design and Build Websites

-Jon Duckett

Reference Websites
[Link]
[Link] [Link]

19
 10. APPENDIX

[Link]

20
21
[Link] CODE
[Link]

* { box-sizing: border-
box;
}

.App { margin: 0
auto; width:
1000px;
}

.btn { background: #fff; border: solid

1px rgba(0, 0, 0, 0.1); padding: 10px
20px; font-size: 14px; border-radius:
5px;
}

[Link] { text-decoration:
none; color: #000;
}

.btn:hover { cursor:
pointer; border-
color: #000;
}

.navbar { padding:
30px 0;
}

.navbar ul {
margin: 0;
padding: 0;
}

.navbar ul li { display:
inline-block; width:
calc(100% / 3);
}

.navbar ul li {

22
 text-align: center;
}

.navbar ul li img {
background-color: #20232a;
height: 40px; width: 40px;
}

.navbar ul li:first-child {
text-align: left; margin:
0;
}

.navbar ul li:last-child {
text-align: right;
margin: 0;
}

.all-posts { width:
calc(100% - 370px); float:
left;
}

.bookmarks-sidebar
{ width: 360px;
float: right;
}

.post { margin-bottom:
30px; padding: 0
25px;
}

.post a { color:
#000;
text-decoration: none;
}

.post h3 { font-size:
26px; margin-
bottom: 15px;
}

.post p { line-height:
1.8;

23
ssingle-post h2, .DraftEditor-editorContainer h2 { font-size:
34px;
}

.single-post h3, .DraftEditor-editorContainer h3 { font-size:

30px;
}

.single-post h4, .DraftEditor-editorContainer h4 { font-size:

26px;
}

.single-post h5, .DraftEditor-editorContainer h5 { font-size:

22px;
}

.single-post h6, .DraftEditor-editorContainer h6 { font-size:

18px;
}

.single-post ul li, .single-post ol li, .DraftEditor-editorContainer ul li,

.DraftEditoreditorContainer ol li { padding: 12px 0; font-size: 21px;
}

.single-post a, .DraftEditor-editorContainer a {
color: #000; text-decoration: underline;
}

.single-post p, .DraftEditor-editorContainer p {
margin: 0; font-size: 22px; line-height: 1.7;
}

.single-post p code, .DraftEditor-editorContainer p code {

background-color: rgba(0,0,0,.05); padding: 3px 5px;
font-size: 0.8em;
}

.single-post figure, .DraftEditor-editorContainer figure {

margin: 30px auto; text-align: center;

24
}

.single-post blockquote, .DraftEditor-editorContainer blockquote {

border-left: 4px solid #000; margin: 0; padding: 10px 25px; font-
style: italic;
}

.single-post pre, .DraftEditor-editorContainer pre {

background-color: rgba(0,0,0,.05); padding: 20px;
white-space: pre-wrap;
}

.single-post pre code, .DraftEditor-editorContainer pre code { font-

size: 17px;
color: rgba(0, 0, 0.75);
}

.post-foot { border-top: solid 1px rgba(0,

0, 0, 0.1); margin: 0; margin-top: 35px;
padding: 35px 0;
}

.msg-success { color:
#4CAF50;
}

.msg-error { color:
#F44336;
}

.post-foot li { list-
style: none; display:
inline-block;
}

.bookmark-page { margin-top:
100px;
}

.bookmark-page h1 { border-bottom: solid 1px

rgba(0, 0, 0, 0.1);

25
mport Content from './Components/Content'; import
Bookmark from './Components/Bookmark'; import
NewStory from './Components/NewStory'; import
SinglePost from './Components/SinglePost'; import
Footer from './Components/Footer';

import './[Link]'; import

data from './data';

export default class App extends Component

{ constructor(props) { super(props);
[Link] = {
posts: data
}

[Link] = [Link](this);
[Link] =
[Link](this); [Link] =
[Link](this); [Link] =
[Link](this);
}

handleBookmark(data) { let posts = [Link]; posts = [Link](post => post

=== data ? {id: [Link], title: [Link], body:
[Link], bookmark: true} : post);
[Link]({posts});
}

handleRemoveBookmark(data) { let posts = [Link]; posts = [Link](post

=> post === data ? {id: [Link], title: [Link], body:
[Link], bookmark: false} : post);
[Link]({posts});
}

handleSubmission(data) { let
posts = [Link];
posts = [data, ...posts];
[Link]({posts});
}

handleRemove(post, history) { let posts =

[Link]; posts = [Link](onepost =>
onepost !== post); [Link]({posts});

26
 [Link]('/');
[Link]();
}

handleWindow() { [Link](0,
0);
}

render() {
return (
<Router basename="/react-mini-blog">
<div className="App">
<Route path="*" render={(props) => <Header {...props} />} />
<Route exact path="/" render={() => <Content posts={[Link]}
bookmarks={[Link](post => [Link])}
handleBookmark={[Link]} handleRemoveBookmark={[Link]}
/>} />
<Route exact path="/new" render={() => <NewStory
handleSubmission={[Link]} />} />
<Route exact path="/bookmark" render={() => <Bookmark
bookmarks={[Link](post => [Link])} />} />
<Route exact path="/post/:id" render={(props) => <SinglePost {...props}
posts={[Link]} handleBookmark={[Link]}
handleRemoveBookmark={[Link]} handleRemove={[Link]}
handleWindow={[Link]()} />} />
<Footer/>
</div>
</Router>
);
}
}

27
.single-post h1, .DraftEditor-editorContainer h1 {
margin: 0; font-size: 38px;
}

.single-post h2, .DraftEditor-editorContainer h2 { font-size:

34px;
}

.single-post h3, .DraftEditor-editorContainer h3 { font-size:

30px;
}

.single-post h4, .DraftEditor-editorContainer h4 { font-size:

26px;
}

.single-post h5, .DraftEditor-editorContainer h5 { font-size:

22px;
}

.single-post h6, .DraftEditor-editorContainer h6 { font-size:

18px;
}

.single-post ul li, .single-post ol li, .DraftEditor-editorContainer ul

li,
.DraftEditor-editorContainer ol li {
padding: 12px 0; font-size: 21px;
}

.single-post a, .DraftEditor-editorContainer a { color:

#000;
text-decoration: underline;
}

.single-post p, .DraftEditor-editorContainer p {
margin: 0; font-size: 22px; line-height: 1.7;
}

28
import App from './App';
it('renders without crashing', () => { const
div = [Link]('div');
[Link](<App />, div);
[Link](div);
});

[Link]

export default [

{ id: '10', title: "Actually We’re not friends, We’re Family", body: '<p>I think
the best gift given from Allah is the friendship. Friendship is
a bond which cannot be broken with any power. Who you are and where you from, your
power can’t break a friendship. I can say, even Hitlar didn’t have this power to break
it. It is the toughest relationship in this galaxy.</p><p>I’ve got some friends in my
life. They’re the most valuable person to me. There is no other reasons for it, only
friendship. Most of the friends I’ve got in my life are very simple in their nature.
They’re very friendly. They can sacrifice anything for me. They give me inspirations
when I need. In fact I get everything. My life couldn’t be perfect if I didn’t meet
some people. I don’t want to mention their name here because I can’t describe them
with my bad English. After all, I have to say that I’ve got a best friend circle in
the world. We’ve got us, we’ve got each other. Thanks duds for being with me….</p>',
bookmark: true
}
]

29
[Link]

export const leveningStr = (data, amount) => { let

string = [Link](/<\/?\w*>/);
string = [Link]((data, one)=>data+=one);
string = [Link](0, amount); return
string;
}
[Link]

body {
margin: 0; padding: 0; font-family: sans-serif;
}

[Link]

import React from 'react'; import

ReactDOM from 'react-dom'; import
'./[Link]'; import App from
'./App';
import registerServiceWorker from './registerServiceWorker';

[Link](<App />, [Link]('root'));

registerServiceWorker();

30
[Link]

const isLocalhost = Boolean(

[Link] === 'localhost' ||
// [::1] is the IPv6 localhost address.
[Link] === '[::1]' ||
// [Link]/8 is considered localhost for IPv4.
[Link](
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);

export default function register() { if ([Link].NODE_ENV === 'production'

&& 'serviceWorker' in navigator) { // The URL constructor is available in
all browsers that support SW. const publicUrl = new
URL([Link].PUBLIC_URL, [Link]); if ([Link] !==
[Link]) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see [Link]
app/issues/2374

31
 );
});
} else {
// Is not local host. Just register service worker
registerValidSW(swUrl);
}
});
} }

function registerValidSW(swUrl) {
[Link]
.register(swUrl)
.then(registration => { [Link] =
() => { const installingWorker =
[Link];
[Link] = () => { if
([Link] === 'installed') { if
([Link]) {
// At this point, the old content will have been purged and
// the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is //
available; please refresh." message in your web app.
[Link]('New content is available; please refresh.');
} else {
// At this point, everything has been precached.
// It's the perfect time to display a

32
 }
};
};
})
.catch(error => { [Link]('Error during service worker
registration:', error); }); }

function checkValidServiceWorker(swUrl) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
if ( [Link] === 404 ||
[Link]('content-type').indexOf('javascript') === -1
) {
// No service worker found. Probably a different app. Reload the page.
[Link](registration => {
[Link]().then(() => { [Link]();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl);
}
})
.catch(() => {
[Link](
'No internet connection found. App is running in offline mode.'
);
}); }

export function unregister() { if ('serviceWorker' in

navigator) {
[Link](registration => {
[Link]();
});
}
}

33
[Link]

.RichEditor-root { background:
#fff; border: 1px solid #ddd;
font-family: 'Georgia', serif;
font-size: 14px; padding:
15px;
}

.RichEditor-editor { border-
top: 1px solid #ddd;
cursor: text; font-size:
16px; margin-top: 10px;
}

.RichEditor-editor .public-DraftEditorPlaceholder-root,
.RichEditor-editor .public-DraftEditor-content {
margin: 0 -15px -15px; padding: 15px;
}

.RichEditor-editor .public-DraftEditor-content { min-height:

100px;
}

.RichEditor-hidePlaceholder .public-DraftEditorPlaceholder-root {
display: none;
}

.RichEditor-editor .RichEditor-blockquote {
border-left: 5px solid #eee; color: #666; font-
family: 'Hoefler Text', 'Georgia', serif; font-
style: italic; margin: 16px 0; padding: 10px
20px;
}

34
 padding: 20px;
}

.RichEditor-controls { font-family:
'Helvetica', sans-serif; font-size:
14px; margin-bottom: 5px; user-
select: none;
}

.RichEditor-styleButton
{ color: #999; cursor:
pointer; margin-right:
16px; padding: 2px 0;
display: inline-block;
}

.RichEditor-activeButton { color:
#5890ff;
}

35
[Link]

{
"name": "react-mini-blog",
"version": "0.1.0",
"homepage": "[Link]
"private": true,
"dependencies": {
"draft-js": "^0.10.5",
"draft-js-export-html": "^1.2.0",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-render-html": "^0.6.0",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4",
"uuid": "^3.2.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

.gitignore

36
# See [Link] for more about ignoring files.

# dependencies
/node_modules
# testing
/coverage
# production
/build
# misc
.DS_Store
.[Link]
.[Link]
.[Link]
.[Link]

[Link]* yarn-
[Link]* [Link]*

37
 SYNOPSIS

The project, “E-Blog Website” aims to develop a modern, responsive, and interactive blogging platform
that allows users to create, edit, and manage blog posts with advanced text formatting features. The
platform will provide an intuitive and user-friendly interface, making it accessible across various devices
while offering smooth navigation between pages without the need for reloads. Users will be able to
engage with the content through bookmarking and liking posts, adding a social layer to the website,
which enhances user interaction. The project will also feature a secure user authentication system,
ensuring that only authorized users can create or edit blog posts, thereby maintaining the integrity of the
content. Strong security and privacy measures will be implemented to protect user data and prevent
vulnerabilities .

YUVAANESH P 22MSS060, III [Link]. Software

Systems, Batch (2022-2027) in PSG College of Arts & Science,
Coimbatore.