Zoopelearn.

com
A Dissertation submitted
for the partial fulfillment of the degree of
Bachelor of Engineering in
Computer Science
(Session 2022-2023 )

Guided By: Submitted By:

RONIT SAGAR (0111CS203D12)

Sahwag Kumar Mishra(0111CS203D13)

TECHNOCRATS INSTITUTE OF
TECHNOLOGY
(M.P.)
(www.technocratsgroup.edu.in)
Nov - 2022
 Dissertation Approval Sheet

The dissertation entitled “Zoopeelearn.com” submitted by RONIT SAGAR, SAHWAG

KUMAR MISHRA is approved as partial fulfillment for the award of Bachelor of

Engineering in Computer Science degree by Rajiv Gandhi Proudyogiki
Vishwavidyalaya, Bhopal.

Internal Examiner External Examiner

Director
Technocrats Institute of Technology
Rajiv Gandhi Proudyogiki
Vishwavidyalaya
Bhopal (M.P.)
 Recommendation

The dissertation entitled “Zoopelearn.com” submitted by RONIT SAGAR, SAHWAG

KUMAR MISHRA is a satisfactory account of the bonafide work done under my

supervision is recommended towards the partial fulfillment for the award of Bachelor
of Engineering in Computer Science degree by Rajiv Gandhi Proudyogiki
Vishwavidyalaya, Bhopal

Date:
Project Guide

Endorsed By :
HOD, Department of Computer Science
 Candidate Declaration
We hereby declare that the work which is being presented in this project entitled
Project Name in partial fulfillment of the degree of Bachelor of Engineering in
(Computer science & engineering) is an authentic record of our own work carried out
under the supervision and guidance of ----- in Department of Computer Science,
Technocrats Institute of Technology, Rajiv Gandhi Proudyogiki Vishwavidyalaya,
Bhopal

We are fully responsible for the matter embodied in this project in case of any
discrepancy found in the project and the project has not been submitted for the award
of any other degree.

Date:

Place: Bhopal

Ronit Sagar
Sahwag kr Mishra
 ACKNOWLEDGEMENTS

I would like to convey my heartfelt gratitude to Prof -----, my mentor, for his
invaluable advice and assistance in completing my project. He was there to assist me
every step of the way, and his motivation is what enabled me to accomplish my task
effectively.
I would also like to express my gratitude towards our Head of Department Dr. Manoj
Tyagi sir for giving me this great opportunity to do a project on Zoopelearn.com.
Without their support and suggestions, this project would not have been completed
 ABSTRACT

The main aim of this project is to create online mobile applications on which we
can guide our upcoming graduate students who will get benefited from them. We
are graduated students and we have an idea about the course structure and all the
curriculums of the desired role or whatever we want to be. So what we are doing
we will give him the/ guide him about what to learn and from where to learn it.
We will upload all the contents and learning material like ROAD MAP/ ROLE
BASED LEARNING MATERIAL …etc.

What this application will have?

➢ Road map.
➢ Off-campus job alert.
➢ 1:one doubt support.
➢ Blog post from experienced candidate.
➢ On-going contest alert.
➢ Live course announced by some renowned industry.
TABLE OF CONTENTS Page No
Dissertation Approval Sheet i
Recommendation ii
Certificate (If any) iii
Candidate Declaration iv
Acknowledgments v
Abstract vi

Chapter 1 Introduction
1.1 Overview and issues involved 8
1.2 Problem Definition 9
1.3 Proposed Solution 10

Chapter 2 Literature Survey

2.1 Methodology 13
2.2 Existing Solutions 14
Chapter 3 Analysis & Design
3.1 Software Requirements 15
3.2 Hardware Requirements 16
3.3 Analysis Diagrams 17
3.4 Design Diagrams 18
Chapter 4 Implementation and Testing
5.1 Database Design 19
5.2 Class diagram . 20
5.3 Test Cases 21
Chapter 5 Conclusion 22
References 24
Appendix 25
Chapter-1 Introduction

1. Overview and issues involved

A Zoopelearn is a type of web& mobile Application that focuses mainly

on written content, also known as blog posts.
In the early stages, a blog was a personal web log or journal in which someone
could share information or their opinion on a variety of topics. The information
was posted reverse chronologically, so the most recent post would appear first.

A blog post is an individual web page on your website that dives into a particular
sub-topic of your blog.
Blog posts allow you to rank on search engines for a variety of keywords. In the
above example, your blog post could enable your business to rank on Google for
"fall shoes". When someone searches for fall shoes and comes across your blog
post, they have access to the rest of your company's website. They might click
"Products" after they read your post, and take a look at the clothing items your
company sells

A blog is typically a section of your business's website -- but, unlike the rest of
your website, you need to update the blog section frequently by adding new
posts. Additionally, your blog is a tool that allows you to engage more with an
audience, either by analyzing how many readers share your blog posts on social,
or by allowing readers to comment on your individual posts. In this way, a blog

is more like a two-way conversation than the rest of your website. However, a
blog can also be an entire website, and often is, if the blog is for personal use
alone for instance, a travel blog.

What is a blog used for?

● To help your company rank on search engines.
● To share information about a given topic and become an expert in an
industry.
● To attract visitors to your site, and turn those visitors into leads.
To cultivate an online community and engage with an audience.
2. Problem Definition

● Categorized Content :-
Not-structured categorized Content with different parameter of different Domain
Over the blog like Technology, fitness, books and their sub-domains etc.
● Less Interactive User-Interface :-
A smooth user interface is required for better visuals and look and feel of the
applications which make it easier to read, write and post the content.
● Less Editing Options ;-
There are were less content editing feature in the editor for making interactive
and Smooth experience of writing blog is missing in most of the web
Applications
● Missing Like and Dislike Functionality ;-
Functionality of like, dislike and Comment was missing in almost all blog
applications With most liked and comment on post makes the profile of blogger
upvoted .

3. Proposed solution

● A Cleaner User Experience: well Categorized and Domain Specific content

with smooth control flow over domain and subdomain of different topics.
● Improved distribution and discovery: Blog Studio’s most important job is to
connect readers with the stories they most care about and the flip side —
helping writers find and grow their audience.
● Dark Mode: option to the user so that it reduces effect on the eyes of the user
and makes it comfortable to read
● Better Profiles: As mentioned previously, we are bringing much more
customization options to Blog Studio publications. Blog Studio is about to
look more colorful, expressive, and differentiated. What we didn’t mention
before is that these options are also coming to Blog Studio profiles
● Post Categories: I’ve always wanted to organize my posts in categories so it
would be easier for readers to find what they are looking for without having
to move through the whole list. This is important especially for writers with a
lot of articles.
Chapter-2 Literature Survey

1. Methodology: -

The approach we have divided into following Steps are: -

It is paramount to our project that the information that we collect and show, is classified
on the basis of the requirements of each specific domain of blogger and its posts.
This involves the following tasks:
● Creating a dynamic web architecture to sort blog posts on the basis of the likes
and comments arranging them on the basis of its popularity and reach.
● Implementing a model based upon the aforementioned architecture.
● Ensuring ease of access and uninterrupted flow of data between user’s end and
the server

2.1.1 Intuitive and responsive UI

We at Blog Studio are committed to provide best in class user experience and
user-interface. Be it a mobile viewer or a large screen user the UI will adjust and adapt
according to the viewport.
The user interface (UI) is the point of human-computer interaction and communication
in a device. This can include display screens, keyboards, a mouse and the appearance of
a desktop. It is also the way through which a user interacts with an application or a
website.

2.1.3 Save the data in a secure database for convenient access:

Use of a secure and fast database will enable us to provide faster and reliable logins
bloggers will be able to access the studio at any time of the day from anywhere.
A data loss prevention (DLP) strategy is crucial to protecting your organization’s
sensitive data
Blog Studio has worked tirelessly to demolish all barriers that exist between you and
your written word, and the resulting super simple editor is a tremendous asset in
accomplishing such an ambitious target
2. Existing Solutions

Some Existing solution in the market provides following functionalities: -

2.2.1. Embedding: - Don’t tell your audience. Instead, show them. There are better ways

to present another work other than the trusty underlined blue hyperlink.
2.2.2. Highlights: - You’ve likely noticed the highlighting feature that was released

earlier in the year. It’s a great little function for readers, but writers can also utilize this
feature to their advantage.
2.2.3 Sharing Drafts: - As the adage goes, two heads are better than one. Before you
publish
your next story, send the draft over to a friend or colleague for a quick glance. Worst
case they will catch a couple typos. Best case — they will shine light on some rough
spots in you're writing that could use a little polishing.
2.2.4. Social Cards: - Sharing on social media is deeply integrated to the blog product,
and is
likely a root cause for virality. blog stories are shared on Twitter and Facebook using
“Cards,” which are brief summaries that include a title, subtitle, teaser, and a thumbnail
version of your cover image.
2.2.5. Note URLs: - One of the fundamental differences with Medium compared to
other publishing platforms is the focus on context. Medium ripped out the traditional
below-the-post commenting system in favor of in-line notes.
2.2.6 Linked Images;- Unless you are writing for altruism or goodwill (which is totally
OK), you likely want your audience to take an action — join a mailing list, visit a
product page, etc. In the industry, these are referred to as calls-to-action. Although
Medium’s editor does not allow for custom buttons to be inserted, there is a clever
workaround.
2.27. Notes : -Leave notes on your own story to clarify a point, provide further
resources, or callout an update or amendment to the original text. This keep readers
from having to scroll all the way to the bottom and then back up to where they left off.
As the story matures and reader feedback is collected, adding notes can improve the
story over time
Chapter-3 Analysis
1. Software Requirements

The Platform is intended to be secure from the side of the server through
multiple security measures ensuring data validity, data protection and
safeguarding confidential data. The user’s end must ensure that the connection
they are using the platform through any device, is uninterrupted and secure, so as
to avoid any data loss on the temporal or permanent basis. The following
software interfaces are required:
● Operating System: Windows, Ubuntu, Android etc.
Windows version – 11,10,7
● Software: Web browser
Google chrome version – latest (87.0.4280.88)
Firefox version – latest (87.0.4280.88)

2. Hardware Requirements

The hardware specifications should be appropriately compatible with the system

browser
The actual browser application can be installed on a low – end computer as well
but the implementation of the software consists of processing a large amount of
data that requires a certain level of hardware requirements
● Device Storage: 500 GB HDD. The implementation can take place on
ordinary Storage as well but an SSD storage would speed the
processing exponentially
● Processor: Dual Core / Quad Core / Octa Core
● Memory: At least 4GB, preferably higher
● Hardware Interface: The interface can either be touchscreen or simply
keyboard and mouse/touchpad.
3. Analysis Diagrams

3.3.1 Use Case Model

This Use Case Diagram is a graphic depiction of the interactions among the
elements of Blogging System. It represents the methodology used in system
analysis to identify, clarify, and organize system requirements of Blogging
System.

An effective use case diagram can help your team discuss and represent:
● Scenarios in which your system or application interacts with people,
organizations, or external systems
● Goals that your system or application helps those entities (known as
actors) achieve
● The scope of your system
3.3.2 Use Case Description

The main actors of Blogging System in this Use Case Diagram are: Super
Admin, System User, Blogger, Anonymous Users, who perform the different
type of use cases such as Manage Blog, Manage Blog Category, Manage Create
Blog, Manage Blog Type, Manage Comment, Manage Technology Blog, Manage
Web Page, Manage Users and Full Blogging System Operations. Major elements
of the UML use case diagram of Blogging System are shown on the picture
below.
This Use Case Diagram is a graphic depiction of the interactions among the
elements of Blogging System. It represents the methodology used in sys tem
analysis to identify, clarify, and organize system requirements of Blogging
System. The main actors of Blogging System in this Use Case Diagram are:
Super Admin, System User, Blogger, Anonymous Users, who perform the
different type of use cases such as Manage Blog, Manage Blog Category,
Manage Create Blog, Manage Blog Type, Manage Comment, Manage
Technology Blog, Manage Web Page, Manage Users and Full Blogging System
Operations. Major elements of the UML use case diagram of Blogging System
are shown in the picture below.

The relationships between and among the actors and the use cases of Blogging
System:
1. Admin Entity: Use cases of Super Admin are Manage Blog, Manage Blog
Category, Manage Create Blog. Manage Blog Type, Manage Comment, Manage
Technology Blog. Manage Web Page, Manage Users and Full Blogging System
Operations
System User Entity: Use cases of System User are Manage Blog, Manage Blog
Category, Manage Create Blog. Manage Blog Type, Manage Comment, Manage
Technology Blog. Manage Web Page
2.Blogger Entity: Use cases of Blogger are Create Category, Add Blog Posts,
Make Comments, View Comments, Search Blogs
3. Anonymous Users Entity: Use cases of Anonymous Users are View
Information, Fill Contact Us, Search Content
3.4 Design Diagrams
3.4.1 Architecture Diagram
An architectural diagram is a visual representation that maps out the
physical implementation for components of a software system. It shows
the general structure of the software system and the associations,
limitations, and boundaries between each element.
Architecture diagrams typically depict the sequential order of events in a
project. They include various symbols that describe what is happening at
any given moment in the process. They provide a visual representation
that allows us to comprehend the structure of a system, such as a process,
a procedure, a method, or a database. They depict the components of the
system in terms of the relationship between the parts and the purpose of
each part.

This is a Component diagram of Blogging System which shows

components, provided and required interfaces, ports, and relationships
between the Comment, Blog Type, Web Page, Blog and Category. This
type of diagrams is used in Component-Based Development (CBD) to
describe systems with Service-Oriented Architecture (SOA). Blogging
System UML component diagram, describes the organization and wiring
of the physical components in a system.
You can show the models the components of Blogging System.
1. Model the database schema of Blogging System
2. Model the executables of an application of Blogging System
3. Model the system's source code of Blogging System
3.4.2 Sequence diagrams.

Sequence diagrams are a popular dynamic modeling solution in UML because

they specifically focus on lifelines, or the processes and objects that live
simultaneously, and the messages exchanged between them to perform a function
before the lifeline ends.

This is the Login Sequence Diagram of Blogging System, where admin will be
able to login in their account using their credentials. After login user can manage
all the operations on Blog Type, Blog, Web Page, Comment, Category. All the
pages such as Web Page, Comment, Category are secure and user can access
these pages after login. The diagram below helps demonstrate how the login
page works in a Blogging System. The various objects in the Comment, Blog
Type, Blog, Web Page, and Category page-interact over the course of the
sequence, and user will not be able to access this page without verifying their
identity.
Chapter – 4 Implementation and Testing

4.1 Database Design

ER Diagram represents the model of Blogging System
Blogging System shows all the visual instrument of database ta bless and the
relations between Blog Category, Blog Type, Blog, Technology Blog etc. It used
structure data and to define the relationships between structured data groups of
Blogging System functionalities. The main entities of the Blogging System are
Blog, Blog Category, Create Blog, Blog Type, Comment and Technology Blog.
The details of Blog is store into the Blog tables respective with all tables.
Each entity (Technology Blog, Create Blog, Comment, Blog Category, Blog)
contains primary key and unique keys.
The entity Create Blog, Comment has binded with Blog, Blog Category entities
with foreign key.
1. There is one-to-one and one-to-many relationships available between
Comment, Blog Type, Technology Blog, Blog
2. All the entities Blog, Comment, Create Blog. Technology Blog are normalized
and reduce duplicacy of records.
We have implemented indexing on each tables of Blogging System tables for fast
query execution.
4.2 Class diagram

Class diagram is a static diagram. It represents the static view of an application.

Class diagram is not only used for visualizing, describing, and documenting
different aspects of a system but also for constructing executable code of the
software application.
Classes of Blogging System Class Diagram:
1. Blog Class: Manage all the operations of Blog
2. Blog Category Class: Manage all the operations of Blog Category
Create Blog Class: Manage all the operations of Create Blog Type Class:
Manage all the operations of Blog Type
3. Comment Class: Manage all the operations of Comment
Classes and their attributes of Blogging System Class Diagram:
1. Blog Attributes: blog_id, blog_user_id blog_title, blog_type,blog content
blog_description
2. Blog Category Attributes: blog_category_id, blog_category,
blog_category_title, blog_category_description ,blog_category_type,
blog_category_content,
3. Create Blog Attributes: blog_id, blog_user_id blog_title, blog_type,
blog_content, blog_description
Chapter – 5 Conclusion

In this project we will work towards developing a solution for proper blogging
-application by creating a website that is easy to use, responsive, provides transparency
to the customers, fully functional and available for every device from smartphones to
desktops.
It may help collect perfect management in detail. In a very short time, the collection
will be obvious, simple and sensible. It will help a person to know the management of
the past year perfectly and vividly. It also helps in current work relative to Online
Blogging System. It will also reduce the cost of collecting the management &
collection procedure will go on smoothly."

Our project is only a humble venture to satisfy the needs to manage their project work.
Several user friendly coding have also adopted. This package shall prove to be a
powerful package in satisfying all the requirements of the school. The objective of
software planning is to provide a frame work that enables the manger to make
reasonable estimates made within a limited time frame at the beginning of the software
project and should be updated regularly as the project progresses.

Our project aims at Business process automation, i.e. we have tried to optimizes
various processes of Online Blogging System.
In computer system the person has to fill the various forms & number of copies of the
forms can be easily generated at a time.
In computer system, it is not necessary to create the manifest but we can directly print
it, which saves our time
REFRENCES

[1] https://reactjs.org/docs/getting-started.html, Getting Started - React

[2] React-Bootstrap · React-Bootstrap Documentation, React Bootstrap is for designing
the responsive view of the page.
[3] https://nodejs.org/en/docs/, Documentation | Node.js
[4] Welcome to the MongoDB Documentation — MongoDB Documentation, mongo
dB is for cloud database management.
[5] https://expressjs.com/en/api.html , Express is a minimal and flexible Node.js web
application framework that provides a robust set of features for web and mobile
applications.
[6] https://jwt.io/introduction, JSON Web Token Introduction to JSON Web Token
[7] https://docs.npmjs.com/packages-and-modules, npm packages and modules used in
our project
[8] https://www.medium.com , Helps to make ui and interfeace reference with medium
architecture.
[9] https://www.Blogger.com , Top Blogging website companies In the world.