NodeSphere: Centralized Social Media Management with

[Link]
(HTML, CSS, JS - Frontend)

PROJECT REPORT

Submitted by
DEVIKA S
Register No:21105012
EDWIN PAUL A
Register No:21105015
SUSHMITHA Y
Register No:21105060

In partial fulfillment for the award of the degree

Of
BACHELOR OF COMPUTER APPLICATIONS
In
DEPARTMENT OF COMPUTER APPLICATIONS

SRI RAMAKRISHNA COLLEGE OF ARTS AND

SCIENCE (AUTONOMOUS)
COIMBATORE – 641 006

APRIL 2024
 BONAFIDE CERTIFICATE

Certified that this Project Report titled “NodeSphere: Centralized Social Media
Management with [Link]” is the bonafide work of Devika S and Edwin Paul A and
Sushmitha Y who carried out the work under my supervision.

------------------------------------- ---------------------------------

SIGNATURE OF THE GUIDE SIGNATURE OF THE HOD

Submitted for the Project viva voce examination held on ____________

----------------------------------- -----------------------------------

INTERNAL EXAMINER EXTERNAL EXAMINER

 DECLARATION

We affirm that the project work titled “NodeSphere: Centralized Social Media
Management with [Link]”, being submitted in partial fulfillment for the award of the
degree of BCA is the original work carried out by us. It has not formed the part of any
other project work submitted for award of any degree or diploma, either in this or any
other University.

-----------------------------------
(Signature of the Candidate)
Devika S
21105012

-----------------------------------
(Signature of the Candidate)
Edwin Paul A
21105015

-----------------------------------
(Signature of the Candidate)
Sushmitha Y
21105060

I certify that the declaration made above by the candidates is true.

------------------------------
(Signature of the Guide)

Assistant Professor
 ACKNOWLEDGEMENT

We express our heartfelt thanks to Sri D Lakshminarayanaswamy, Managing Trustee, and

Sri R Sundar, Joint Managing Trustee of SNR Sons Charitable Trust for having provided us
ample facilities to undertake this project.

We express our gratitude to Dr. B L Shivakumar, Principal, Sri Ramakrishna College of Arts &
Science for his continuous encouragement to complete the project successfully.

We are grateful to Dr. D Hari Prasad, HoD of Computer Applications for his unlisted guidance
and encouragement to accomplish this project.

We thank our guide Mrs Shobana R. Associate Professor, Department of Computer Applications
for her continuous professional support and encouragement to complete our project in all the
ways.

We thank our Industrial experts Mr. Dwaraknath Cheyyur co-founder & Director and Mr. G
Arulprakash Manager – Business and Operations of CouldRegin Technologies LLP, Chennai for
their support and guidance.

We also express our thanks to other staff members for their help and constant support to
complete this project.

We have great pleasure in thanking our parents and friends for their inspiration and
encouragement. We express our gratitude to various authors, whose works we referred to carry
out this project.
 TABLE OF THE CONTENTS

[Link] TITLE PAGENO

1. INTRODUCTION 08

1.1 INTRODUCTION 08

1.2 ABOUT THE PROJECT 08

1.2.1 Project Title 08

1.2.2 Abstract of Project 09

1.2.3 Features 09

1.2.4 Wireframe 12

1.2.5 Objective 13

1.2.6 Proposed System 13

1.2.7 Current Solution 14

1.3 MODULE DESCRIPTION 15

1.3.1 Module Description 15

1.3.2 Convert HTML into PWA 15

1.3.3 NodeJS Setup 34

1.3.4 CRUD Operations 38

[Link] Create 39

[Link] Read 39

[Link] Update 40

[Link] Delete 40
2. SYSTEM ANALYSIS 41

2.1 EXISTING SYSTEM 42

2.1.1. DISADVANTAGES OF EXISTING SYSTEM 42

2.2 PROPOSED SYSTEM 42

2.2.1 ADVANTAGES OF PROPOSED SYSTEM 43

3. SYSTEM SPECIFICATION 44

SOFTWARE SPECIFICATION 45

HARDWARE SPECIFICATION 45

SOFTWARE DESCRIPTION 46

4. PROJECT DESCRIPTION 47

4.1 ABOUT FRONT END 48

4.1.1 Architecture of Front End User 48

4.1.2 Software & Tools Used 48

a. HTML Introduction 48

b. CSS 57

c. Javascript 63

4.2. ABOUT BACK END 67

4.2.1 NodeJS’s Architecture 68

4.2.2 Software and tools used 68

a. NodeJS 68

b. Reasons to Use NodeJS 69

c. Main Features of NodeJS 76

5. SYSTEM DESIGN 81

DATA FLOW DIAGRAM 82

DATABASE DESIGN/STRUCTURE 83

6. SYSTEM TESTING & IMPLEMENTATION 84

SYSTEM TESTING 85

SYSTEM IMPLEMENTATION 87

7. CONCLUSION & FUTURE ENHANCEMENT 88

REFERENCE 88

APPENDIX 89

A) CODING 89

B) SAMPLE SCREENSHOT 92
[Link]
[Link]

Welcome to NodeSphere, a revolutionary project that redefines the landscape of social media
management. In the dynamic world of influencers and social media celebrities, maintaining a
strong online presence across multiple platforms is essential. NodeSphere is designed as a
centralized hub powered by [Link], offering influencers and celebrities a comprehensive
solution for managing and analyzing their social media accounts seamlessly.

In the digital era, juggling various social media platforms can be overwhelming. NodeSphere
simplifies this challenge by providing users with a unified interface to effortlessly view and
access all their social media accounts in one place. From Instagram and Twitter to YouTube and
beyond, NodeSphere streamlines the user experience, saving valuable time and effort.

One of the key features of NodeSphere is its robust analytics capabilities. Users can delve into
detailed insights such as followers, likes, unfollows, subscribers, and more, all consolidated in a
user-friendly dashboard. This data-driven approach empowers influencers and social media
celebrities to make informed decisions, optimize content strategy, and enhance engagement
across their digital footprint.

Targeted specifically at influencers and social media celebrities, NodeSphere aims to become an
indispensable tool in their toolkit. By providing a centralized platform for managing and
analyzing social media presence, NodeSphere equips users with the means to amplify their reach
and impact in the online realm.

Join us on this exciting journey as NodeSphere sets a new standard in Centralized Social Media
Management, where efficiency meets analytics, and influencers thrive in the interconnected
world of social media.

1.2 ABOUT THE PROJECT:

1.2.1 PROJECT TITLE:

The project title discussed by Devika S and Edwin Paul A and Sushmitha Y is
“NodeSphere: Centralized Social Media Management with [Link]”
1.2.2 ABSTRACT

NodeSphere presents a paradigm shift in social media management, specifically tailored for
influencers and social media celebrities. This innovative project, driven by the robust [Link]
framework, introduces a centralized hub where users can seamlessly manage and navigate all
their social media accounts from a unified platform. In an era where maintaining a strong online
presence is paramount, NodeSphere streamlines this process, offering a comprehensive solution
that spans platforms like Instagram, Twitter, and YouTube.

A key highlight of NodeSphere is its advanced analytics engine, providing detailed insights into
crucial metrics such as followers, likes, unfollows, and subscribers. This data-centric approach
empowers influencers to make informed decisions, refine content strategies, and optimize
engagement across their digital landscape.

NodeSphere is strategically designed to be an indispensable tool for influencers and social media
celebrities, offering efficiency and analytics in one cohesive package. By centralizing social
media management, NodeSphere enables users to amplify their reach and impact, setting a new
standard in the dynamic world of social media. Join us on this transformative journey as
NodeSphere redefines the way influencers thrive in the interconnected realm of digital
communication.

1.2.3. FEATURES OF THE PROJECT

ADD: Users can effortlessly expand their social media presence with NodeSphere's "Add
Account" feature. This module allows users to select and connect new social media accounts
from a curated list. Users can input account details, set preferences, and configure privacy
settings. Additionally, users have the option to enter relevant information, such as engagement
rates and audience demographics, providing a comprehensive profile for effective social media
management within the NodeSphere platform.

DELETE: Users can streamline their social media management within NodeSphere using the
"Delete Account" feature. This module offers a simple process to remove unwanted or inactive
social media accounts. By selecting the account to be deleted and confirming the action, users
can efficiently declutter their social media hub. This feature ensures a focused and relevant
online presence by allowing users to manage their connected accounts seamlessly, providing a
clean and organized social media environment within NodeSphere.

ANALYTICS DASHBOARD: A comprehensive analytics dashboard providing real-time

insights into engagement metrics, audience demographics, and content performance across
connected social media platforms.

CUSTOMIZABLE DASHBOARDS: Personalized dashboards that allow users to customize

the layout and arrangement of modules based on their preferences and priorities.

CONTACT AND SUPPORT: The website should provide customers with an easy way to get in
touch with the company for any questions or concerns, and offer support through email, phone,
or live chat.

1.2.4 WIRE-FRAME:

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that
represents the skeletal framework of a website. The term wireframe is taken from other fields
that use a skeletal framework to represent 3-dimensional shape and volume. Wireframes are
created to arrange elements to best accomplish a particular purpose. The purpose is usually
driven by a business objective and a creative idea.
The wireframe depicts the page layout or arrangement of the website's content, including
interface elements and navigational systems, and how they work together. The wireframe usually
lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior,
and priority of content. In other words, it focuses on what a screen does, not what it looks like.
Wireframes can be pencil drawings or sketches on a whiteboard, or they can be produced using a
broad array of free or commercial software applications. Wireframes are generally created by
business analysts, user experience designers, developers, visual designers, and those with
expertise in interaction design, information architecture, and user research.
Wireframes focus on:
● The range of functions available
● The relative priorities of the information and functions
● The rules for displaying certain kinds of information
● The effect of different scenarios on the display
 Screenshot(1)

1.2.5 OBJECTIVE

Amplify Presence: NodeSphere aims to boost influencers' social media presence across
platforms like Instagram, Twitter, Facebook, and YouTube through centralized account
management.

Inform Decision-Making: Provide insightful analytics for informed decision-making

on content strategies, audience engagement, and platform optimizations.

Foster Education: Offer educational insights on audience behavior, including followers,

likes, unfollows, and subscribers, fostering a deeper understanding of audience preferences.

Enhance Engagement: Develop captivating features to simplify account management

and foster an engaging experience for influencers.

Monetize Opportunities: Create revenue streams through online transactions,

including event ticket sales, merchandise, and follower donations, establishing a sustainable
ecosystem for influencers.
Overall, the objective of the NodeSphere project is to establish a user-friendly and engaging
platform that enhances influencers' social media presence, facilitates informed decision-making
through analytics, fosters educational insights, promotes audience engagement, and creates
monetization opportunities for influencers and social media celebrities.

1.2.6 PROPOSED SYSTEM

"NodeSphere: is an innovative online platform designed for influencers and social media
celebrities. The primary goal of NodeSphere is to streamline social media management by
providing a centralized hub for accessing and managing multiple accounts, including Instagram,
Twitter, Facebook, and YouTube.

1.2.7 Current Solution

"NodeSphere" redefines the social media experience for influencers and social media
celebrities. Offering a centralized platform, NodeSphere allows users to effortlessly view and
manage their accounts from a single site. Embracing the concept of an all-in-one solution,
NodeSphere eliminates the need to navigate multiple platforms by providing a unified interface
for accessing and overseeing Instagram, Twitter, Facebook, and YouTube accounts seamlessly.

Rules
● Edit and Delete: Users can modify or delete selected items within NodeSphere.
● Upload: User can upload to all social media platforms at once.
● Date & Time: IST format for displaying date and time.
● Language: English is the default language for NodeSphere.
1.3 MODULE DESCRIPTION
ADD:

The Add module in NodeSphere empowers users to seamlessly incorporate new social media
accounts into their centralized hub. Users can select and link their desired social media
platforms, providing essential details such as account handles and login credentials. Additionally,
users can input relevant information, such as engagement rates and audience demographics, to
enhance their understanding of their social media landscape. This module streamlines the process
of expanding and managing their online presence across various platforms within the
NodeSphere ecosystem.

DELETE:
The Delete module in NodeSphere offers users a straightforward mechanism to remove
unwanted or inactive social media accounts from their centralized hub.

UPDATE:
NodeSphere's Update module lets users effortlessly customize their fish orders. Quickly select
fish types, adjust quantities, and receive real-time updates, providing influencers and social
media celebrities with a seamless seafood ordering experience.

1.3.1 CONVERTING HTML INTO PWA

HTML
HTML stands for HyperText Markup Language. It is used to design web pages using a markup
language. HTML is a combination of Hypertext and Markup language. Hypertext defines the
link between web pages.

A markup language is used to define the text document within the tag which defines the structure
of web pages. This language is used to annotate (make notes for the computer) text so that a
machine can understand it and manipulate text accordingly. Most markup languages (e.g.
HTML) are human-readable. The language uses tags to define what manipulation has to be done
on the text.

Elements and Tags: HTML uses predefined tags and elements that tell the browser how to
properly display the content. Remember to include closing tags. If omitted, the browser applies
the effect of the opening tag until the end of the page.

WHY WE NEED HTML:

1. HTML is simple to understand and implement

● HTML is a simple language to learn and understand. HTML is the first and most
important language that anyone learning web development will encounter. There are no
complicated tags, and there is no case sensitivity with HTML.
● It consists of only a few tags that have a specific purpose. One can easily grasp others’
code and make adjustments if necessary, so there isn't much more to learn from it.
Moreover, unlike other programming languages, it does not throw an error or cause a
problem if the developer forgets to close the tags or makes a mistake in the code.

2. HTML is completely free

● One of the biggest advantages of using HTML is that it is free, and no special software is
required. HTML does not require any plugins, so one should not have to deal with them
when working with any software.
● Even with many open-source content management systems, all necessary plugins are not
always free. As a result, it is incredibly cost-effective from a per-business standpoint
because there is no fee for obtaining the license if the entire website is constructed in
HTML.

3. Every browser supports HTML

● HTML is supported by nearly all browsers worldwide such as Google, Safari, Opera, etc.
 So there is no need to be concerned about a website built in HTML for browser support
because the website will appear in all browsers if the program remembers to optimize the
website for the different browsers.
● It is neither difficult nor complex to optimize an HTML-based website for browser
compatibility. It gives web developers an easy way to optimize their websites for
browsers.

4. HTML is the most search engine friendly

● In comparison to other web programming languages on the market, HTML is one of the
most user-friendly search engines (Search Engine friendly means delivering users quality
websites with relevant information when searching for a particular one).
● HTML is far easier to use than other computer languages for creating SEO-compliant
websites. HTML websites are more accessible for web crawlers to read and access,
reducing crawling time and page load time and so enhancing website performance.
● HTML generates the fewest SEO difficulties and offers the most flexibility when
attempting to construct an SEO-compliant website. As long as you verify that your
HTML code is clean and validated.

5. HTML is Simple to Edit

HTML is very simple to edit because it does not require a special interface or platform. It is
written in plain Notepad and can thus be easily modified in any text editor such as Notepad,
Notepad++, etc.

6. HTML is simple to integrate with other languages

HTML is easily integrated with many languages and does not cause any problems. For example,
in Javascript, PHP, [Link], CSS, and many more languages, we write the code of these
languages inside the HTML, and it readily combines with them.
7. HTML is lightweight and quick

HTML is a lightweight markup language that loads quickly. It saves clients time by reducing
stacking time. When compared to other modes of communication, it has a high signal-to-noise
ratio. It is also faster to download HTML code, indicating that it is highly compressive.

8. HTML is the most fundamental of all programming

languages

● To be a frontend or backend developer, a programmer must know HTML because it is the

basic language and all other languages, such as JavaScript, JSP, and PHP, etc., integrate
with it while coding. Similarly, HTML syntax is similar to XML, which is now widely
used for data storage.
● As HTML and XML have similar syntax, making working between the two platforms is
simpler and more seamless. XML is increasingly being used for data storage today.
Working with XML is simple for someone familiar with HTML.

9. Display Changes Instantly

One of the most significant advantages of HTML is that changes can be seen immediately by
saving and reloading the previous HTML page. Unlike other web programming languages, there
is no need to run the entire code to find the error. For example, if you make a word italic, it will
appear on the page immediately after saving and reloading.

10. HTML is supported by the majority of development tools

Many web development tools allow you to create HTML-based websites more than any other
web programming language, whether it is FrontPage or any other programming tool.

11. HTML is user-friendly

 ● HTML is a simple web programming language. There is no prerequisite knowledge of
any language. Understanding basic tags is enough to work with them.
● HTML has been used in front-end development for many years before no other web
development languages were available on the market. Although HTML provides all of
the tags for the user to add anything to the webpage, such as a table, images, hyperlinks,
and so on, also the most recent version of HTML, i.e., HTML5, allows the user to insert a
graphic, multimedia, and semantic elements to develop powerful websites while
consistently improving UX.

FEATURES OF HTML
● User Friendly & Simple.
● Semantic Structure.
● SEO – Search Engine Optimisation.
● localStorage & IndexedDB – Client-side data storage.
● Offline Capabilities (PWA) with Cache API & Service Workers.
● Canvas for Game Development.
● Platform Independent.
● Media Support.
ADVANTAGES OF HTML

HTML is simple to understand and implement

● HTML is a simple language to learn and understand. HTML is the first and most
important language that anyone learning web development will encounter. There are no
complicated tags, and there is no case sensitivity with HTML.
● It consists of only a few tags that have a specific purpose. One can easily grasp others’
code and make adjustments if necessary, so there isn't much more to learn from it.
Moreover, unlike other programming languages, it does not throw an error or cause a
problem if the developer forgets to close the tags or makes a mistake in the code.

HTML is completely free

● One of the biggest advantages of using HTML is that it is free, and no special software is
required. HTML does not require any plugins, so one should not have to deal with them
when working with any software.
● Even with many open-source content management systems, all necessary plugins are not
always free. As a result, it is incredibly cost-effective from a per-business standpoint
because there is no fee for obtaining the license if the entire website is constructed in
HTML.

Every browser supports HTML

● HTML is supported by nearly all browsers worldwide such as Google, Safari, Opera, etc.
So there is no need to be concerned about a website built in HTML for browser support
because the website will appear in all browsers if the program remembers to optimize the
website for the different browsers.
● It is neither difficult nor complex to optimize an HTML-based website for browser
compatibility. It gives web developers an easy way to optimize their websites for
browsers.
HTML is the most search engine friendly

● In comparison to other web programming languages on the market, HTML is one of the
most user-friendly search engines (Search Engine friendly means delivering users quality
websites with relevant information when searching for a particular one).
● HTML is far easier to use than other computer languages for creating SEO-compliant
websites. HTML websites are more accessible for web crawlers to read and access,
reducing crawling time and page load time and so enhancing website performance.
● HTML generates the fewest SEO difficulties and offers the most flexibility when
attempting to construct an SEO-compliant website. As long as you verify that your
HTML code is clean and validated.

HTML is Simple to Edit

HTML is very simple to edit because it does not require a special interface or platform. It is
written in plain Notepad and can thus be easily modified in any text editor such as Notepad,
Notepad++, etc.

HTML is simple to integrate with other languages

HTML is easily integrated with many languages and does not cause any problems. For example,
in Javascript, PHP, [Link], CSS, and many more languages, we write the code of these
languages inside the HTML, and it readily combines with them.

HTML is lightweight and quick

HTML is a lightweight markup language that loads quickly. It saves clients time by reducing
stacking time. When compared to other modes of communication, it has a high signal-to-noise
ratio. It is also faster to download HTML code, indicating that it is highly compressive.

HTML is the most fundamental of all programming languages

 ● To be a frontend or backend developer, a programmer must have knowledge of HTML
because it is the basic language and all other languages, such as JavaScript, JSP, and PHP,
etc., integrate with it while coding. Similarly, HTML syntax is similar to XML, which is
now widely used for data storage.
● As HTML and XML have similar syntax, making working between the two platforms is
simpler and more seamless. XML is increasingly being used for data storage today.
Working with XML is simple for someone familiar with HTML.

Display Changes Instantly

One of the most significant advantages of HTML is that changes can be seen immediately by
saving and reloading the previous HTML page. Unlike other web programming languages, there
is no need to run the entire code to find the error. For example, if you make a word italic, it will
appear on the page immediately after saving and reloading.

HTML is supported by the majority of development tools

Many web development tools allow you to create HTML-based websites more than any other
web programming language, whether it is FrontPage, DreamWeaver, or any other programming
tool.

HTML is user-friendly

● HTML is a simple web programming language. There is no prerequisite knowledge of

any language. Understanding basic tags is enough to work with them.
● HTML has been used in front-end development for many years before no other web
development languages were available on the market. Although HTML provides all of
the tags for the user to add anything to the webpage, such as a table, images, hyperlinks,
and so on, also the most recent version of HTML, i.e., HTML5, allows the user to insert a
graphic, multimedia, and semantic elements to develop powerful websites while
consistently improving UX.
HTML Form
An HTML form is a section of a document that contains controls such as text fields, password
fields, checkboxes, radio buttons, submit buttons, menus, etc. An HTML form facilitates the user
to enter data that is to be sent to the server for processing such as name, email address, password,
and phone number.

Why do we use HTML Form?

HTML forms are required if you want to collect some data from the site visitor.

For example: If a user wants to purchase some items on the internet, he/she must fill out the form
such as the shipping address and credit/debit card details so that item can be sent to the given
address.

FEATURES OF HTML
● User Friendly & Simple.
● Semantic Structure.
● SEO – Search Engine Optimisation.
● localStorage & IndexedDB – Client-side data storage.
● Offline Capabilities (PWA) with Cache API & Service Workers.
● Canvas for Game Development.
● Platform Independent.
● Media Support.

ADVANTAGES

HTML is simple to understand and implement

● HTML is a simple language to learn and understand. HTML is the first and most
 important language that anyone learning web development will encounter. There are no
complicated tags, and there is no case sensitivity with HTML.
● It consists of only a few tags that have a specific purpose. One can easily grasp others’
code and make adjustments if necessary, so there isn't much more to learn from it.
Moreover, unlike other programming languages, it does not throw an error or cause a
problem if the developer forgets to close the tags or makes a mistake in the code.

HTML is completely free

● One of the biggest advantages of using HTML is that it is free, and no special software is
required. HTML does not require any plugins, so one should not have to deal with them
when working with any software.
● Even with many open-source content management systems, all necessary plugins are not
always free. As a result, it is incredibly cost-effective from a per-business standpoint
because there is no fee for obtaining the license if the entire website is constructed in
HTML.

Every browser supports HTML

● HTML is supported by nearly all browsers worldwide such as Google, Safari, Opera, etc.
So there is no need to be concerned about a website built in HTML for browser support
because the website will appear in all browsers if the program remembers to optimize the
website for the different browsers.
● It is neither difficult nor complex to optimize an HTML-based website for browser
compatibility. It gives web developers an easy way to optimize their websites for
browsers.
HTML is the most search engine friendly

● In comparison to other web programming languages on the market, HTML is one of the
most user-friendly search engines (Search Engine friendly means delivering users quality
websites with relevant information when searching for a particular one).
● HTML is far easier to use than other computer languages for creating SEO-compliant
websites. HTML websites are more accessible for web crawlers to read and access,
reducing crawling time and page load time and so enhancing website performance.
● HTML generates the fewest SEO difficulties and offers the most flexibility when
attempting to construct an SEO-compliant website. As long as you verify that your
HTML code is clean and validated.

HTML is Simple to Edit

HTML is very simple to edit because it does not require a special interface or platform. It is
written in plain Notepad and can thus be easily modified in any text editor such as Notepad,
Notepad++, etc.

HTML is simple to integrate with other languages

HTML is easily integrated with many languages and does not cause any problems. For example,
in Javascript, PHP, [Link], CSS, and many more languages, we write the code of these
languages inside the HTML, and it readily combines with them.

HTML is lightweight and quick

HTML is a lightweight markup language that loads quickly. It saves clients time by reducing
stacking time. When compared to other modes of communication, it has a high signal-to-noise
ratio. It is also faster to download HTML code, indicating that it is highly compressive.
HTML is the most fundamental of all programming languages

● To be a frontend or backend developer, a programmer must know HTML because it is the

basic language and all other languages, such as JavaScript, JSP, and PHP, etc., integrate
with it while coding. Similarly, HTML syntax is similar to XML, which is now widely
used for data storage.
● As HTML and XML have similar syntax, making working between the two platforms is
simpler and more seamless. XML is increasingly being used for data storage today.
Working with XML is simple for someone familiar with HTML.

Display Changes Instantly

One of the most significant advantages of HTML is that changes can be seen immediately by
saving and reloading the previous HTML page. Unlike other web programming languages, there
is no need to run the entire code to find the error. For example, if you make a word italic, it will
appear on the page immediately after saving and reloading.

HTML is supported by the majority of development tools

Many web development tools allow you to create HTML-based websites more than any other
web programming language, whether it is FrontPage, DreamWeaver, or any other programming
tool.

HTML is user-friendly

● HTML is a simple web programming language. There is no prerequisite knowledge of

any language. Understanding basic tags is enough to work with them.
● HTML has been used in front-end development for many years before no other web
development languages were available on the market. Although HTML provides all of
the tags for the user to add anything to the webpage, such as a table, images, hyperlinks,
and so on, also the most recent version of HTML, i.e., HTML5, allows the user to insert a
graphic, multimedia, and semantic elements to develop powerful websites while
 consistently improving UX.

HTML Form
An HTML form is a section of a document that contains controls such as text fields, password
fields, checkboxes, radio buttons, submit buttons, menus, etc. An HTML form facilitates the user
to enter data that is to be sent to the server for processing such as name, email address, password,
and phone number.

Why do we use HTML Forms?

HTML forms are required if you want to collect some data from the site visitor.

For example: If a user wants to purchase some items on the internet, he/she must fill out the form
such as the shipping address and credit/debit card details so that item can be sent to the given
address.

PWA application:
The PWA application is used in this website so that the website can be downloaded and also can
be used offline.
Progressive Web Apps (PWAs) are web apps that use service workers, manifests, and other
web-platform features in combination with progressive enhancement to give users an experience
on par with native apps.

Benefits Of PWA
● PWAs adapt to various screen sizes and are responsive.
● PWAs are fluid, quick, and light.
● Push notifications can be used to re-engage users.
● Increased engagement may result from installing a PWA.
● PWAs can be created using standard web technologies.
● Building costs are frequently lower.
● No need to give Google and Apple large sums of money.
 ● They operate independently of your regular website.

A progressive web application (PWA), or progressive web app, is a type of application

software delivered through the web, built using common web technologies including HTML,
CSS, JavaScript, and WebAssembly. It is intended to work on any platform with a
standards-compliant browser, including desktop and mobile devices.

Since a progressive web app is a type of webpage or website known as a web application, it does
not require separate bundling or distribution. Developers can simply publish the web application
online, ensure that it meets baseline installation requirements, and that users will be able to add
the application to their home screen. Publishing the app to digital distribution systems like Apple
App Store or Google Play is optional.

As of 2021, PWA features are supported to varying degrees by Google Chrome, Apple Safari,
Firefox for Android, and Microsoft Edge but not by Firefox for desktop.

Turning your website into a fully functional high-quality PWA (Progressive Web Application)
can be done in a lunch break! This article will take you through the end-to-end process.

PROCESS TO CONVERT HTML INTO PWA:

Step 1: Create a report card in PWA Builder

First, you'll want to check if your website has the features and metadata that great PWAs need.

1. Navigate to PWA Builder

2. Enter the URL of the website you'd like to convert to a PWA and click Start
3. PWA builder will display a PWA Report Card that indicates the features your
website has and does not have.
Step 2: Review your PWA Report Card

Your PWA Report Card contains your website's score, out of a maximum score of 100.

Scores are based on three categories of features.

Manifest:

PWA evaluates your website's Web Application Manifest if one is available, and identifies fields
or values that are required, recommended, and optional. You can improve your score by adding
missing values, either by editing and re-publishing your manifest file or by using the online
manifest editor.
Warning

Changes made in the online manifest editor will not be published on your website. The changes
you make will only be used by PWA Builder when creating your PWA.

Required values must be present, otherwise, the PWA builder won't be able to create your PWA.
Required fields include simply having a manifest, icons, name, short name, and start_url.

Recommended fields aren't required, but are important for your PWA's user experience. It is
strongly recommended you provide all recommended values, though PWA Builder can create a
PWA without them. Recommended values include display mode, splash screen background
color, description, orientation, screenshots, high-resolution icons, maskable icons, categories,
and shortcuts.

Optional fields are not required but can be specified if appropriate. Optional fields include an age
rating and related applications.

Service worker:

A service worker runs in the background to enable rich web app features where there would
otherwise be 404 errors. PWA Builder requires a service worker to create your PWA, but if you
do not have one you can use one of several prebuilt service workers provided by PWA Builder.
To use a prebuilt service worker:

1. Choose the Service Worker Options tab in the menu.

2. Select the appropriate service worker from the curated list. Note that there are
many prebuilt options; make sure to pick the service worker most appropriate for
your specific use case.
3. Once you've selected the service worker you'd like to use, you'll be returned to your
PWA Report Card.

Security

All PWAs built with PWA Builder require three security protocols.

1. Your site must use HTTPS.

 2. Your site must have a corresponding HTTPS certificate.
If your website does not have an HTTPS certificate present you can publish to
Azure to get built-in HTTPS support. Alternatively, there are free third-party tools
such as Letsencrypt that will allow you to obtain an HTTPS certificate for free.
3. Your site must not contain mixed content. Mixed content is when a page served
over HTTPS contains resources loaded over HTTP. Mixed content compromises
the security of HTTPS and your PWA.

Step 3: Collect important information from Partner Center

You'll need several pieces of information from your Partner Center account to create
your PWA. If you do not have an MSA, click here for instructions on how to get started. You
will also need to enroll in the Windows Developer Program.

If you have not already done so, you'll need to create your PWA app by reserving a new name.
Once you've reserved your name, click the Start your Submission button to create a new app
submission.
Next, click on the Product Management tab and select Product Identity. The product identity
page will list your product's package ID, your publisher ID, and your publisher display name.
Save these values and return them to PWA Builder.

Step 4: Generate your PWA on PWA Builder

You now have everything you need to create your PWA on PWA Builder. Return to the PWA
Builder site and click Generate.
PWA builder will prompt you for the information you obtained from Partner Center in step 3. Fill
in the values and click Generate.

Once PWA Builder has created your PWA, your browser will automatically download it. Your
PWA is packaged in a .zip file that contains six files.

The msix file is your PWA's main app package. This file will install your PWA on the user's
machine.
The appx file is a classic app package. It is used to install your PWA on older versions of
Windows. See Classic app packages for more information.

Step 5: Submit your app packages to the Microsoft Store

These packages can be submitted to the Microsoft Store in the same way any other app packaged
as an MSIX file can be. For further instructions on submitting your PWA packages to the store,
see.

1.3.2 NODEJS SETUP:

Step 1: Initialize [Link] Project

Open your terminal and navigate to the desired directory for your [Link] project. Run the
following command to initialize a new [Link] project:

> npm init -y

Wrote to D:\project\[Link]:
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "[Link]",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

Step 2: Install [Link] Modules

Install any necessary [Link] modules using npm. For example, if you need Express for web server
functionality:

> npm install express cjs

added 66 packages, and audited 67 packages in 4s

12 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Step 3: Create Your [Link] App

Create your [Link] application files, such as [Link] or [Link]. Write your code to set up routes,
handle requests, and define your application logic.

Step 4: Run Your [Link] App

Once your [Link] app is set up, you can run it using:

> node [Link]

Server is running at [Link]

Available NodeJS services for web

Now that you're setup to use NodeJS, you can start adding and using any of the following
available NodeJS services in your web app.
There are various [Link] services and frameworks available for web development, each tailored
to specific needs. Here are some popular [Link] services and frameworks for web development:

​ [Link]:
​ A minimal and flexible [Link] web application framework.
​ Widely used for building web and mobile applications.
​ Provides a robust set of features for web and mobile application development.

​ [Link]:
​ Enables real-time, bidirectional, and event-based communication.
​ Ideal for implementing features like chat applications and real-time updates.

​ [Link]:
​ A lightweight and modular web framework for [Link].

​ Developed by the creators of [Link], emphasizing better middleware flow control.

​ [Link]:
​ A powerful and flexible framework for building applications and services.

​ Known for its configuration-driven approach and extensibility.

​ [Link]:
​ A progressive [Link] framework for building efficient, scalable, and maintainable server-side applications.
​ Uses TypeScript and follows the modular architecture pattern.

​ [Link]:
​ A web framework designed to resemble the MVC architecture of frameworks like Ruby on Rails.
​ Ideal for building data-driven APIs and real-time features.

​ [Link]:
​ A full-stack JavaScript framework for building modern web applications.
​ Integrates with front-end frameworks like React and Angular.

​ [Link]:
​ A full-featured MVC framework for [Link], inspired by Laravel.
​ Emphasizes developer-friendly conventions and high-level abstractions.

​ LoopBack:
​ A highly extensible, open-source [Link] framework for quickly creating dynamic end-to-end REST APIs.

​ Ideal for building robust and scalable API-centric applications.

​ [Link]:
​ A lightweight web framework that facilitates the creation of real-time applications.

​ Supports various protocols and comes with built-in authentication and authorization.

​
Next steps:

Learn about NodeJS:

Explore Frameworks:
● Check out [Link] and [Link].
Learn Best Practices:
● Understand [Link] coding and error-handling best practices.
Discover npm Packages:
● Explore npm tools for [Link] development.
Join Communities:
● Connect with [Link] communities for insights.
Review Documentation:
● Dive into official [Link] documentation.
Front-End Basics:
● Brush up on HTML, CSS, and JavaScript.
Build RESTful APIs:
● Practice building RESTful APIs with [Link].
Git and GitHub:
● Learn Git version control and GitHub collaboration.
Testing Techniques:
● Implement tests using Mocha or Jest.
Stay Updated:
● Keep an eye on [Link] releases.
Deployment Basics:
● Learn deployment strategies and basics of Docker.
Contribute to Open Source:
● Collaborate on GitHub, contribute to [Link] projects.
1.3.4 CRUD OPERATION:

Organizations that keep track of customer data, accounts, payment information, health data, and
other records require data storage hardware and applications that provide persistent storage. This
data is typically organized into a database, which is simply an organized collection of data that
may be viewed electronically. There are many types of databases: hierarchical databases, graph
databases, and object-oriented databases to name a few. The most commonly implemented type
of database is a relational database, which consists of data tabled in rows and columns and
connected to other tables with complementary information by a system of keywords that includes
primary keys and foreign keys.

The CRUD acronym identifies all of the major functions that are inherent to relational databases
and the applications used to manage them, which include Oracle Database, Microsoft SQL
Server, MySQL, and others.

Four CRUD operations components are explained

A relational database consists of tables with rows and columns. In a relational database, each row
of a table is known as a tuple or a record. Each column of the table represents a specific attribute
or field. The four CRUD functions can be called by users to perform different types of operations
on selected data within the database. This could be accomplished using code or through a
graphical user interface. Let's review each of the four components in-depth to fully appreciate
their collective importance in facilitating database interactions.

[Link] Create
The create function allows users to create a new record in the database. In the SQL relational
database application, the Create function is called INSERT. In Oracle HCM Cloud, it is called
create. Remember that a record is a row and that columns are termed attributes. A user can create
a new row and populate it with data that corresponds to each attribute, but only an administrator
might be able to add new attributes to the table itself.
[Link] Read
The read function is similar to a search function. It allows users to search and retrieve specific
records in the table and read their values. Users may be able to find desired records using
keywords, or by filtering the data based on customized criteria. For example, a database of cars
might enable users to type in "1996 Toyota Corolla," or it might provide options to filter search
results by make model, and year.

[Link] Update
The update function is used to modify existing records that exist in the database. To fully change
a record, users may have to modify information in multiple fields. For example, a restaurant that
stores recipes for menu items in a database might have a table whose attributes are "item code,"
"item name," "cost" and "price." One day, the chef decides to replace an ingredient in the dish
with something different. As a result, the existing record in the database must be changed and all
of the attribute values changed to reflect the characteristics of the new dish.

[Link] Delete

The delete function allows users to remove records from a database that are no longer needed. A
hard delete permanently removes records from the database, while a soft delete might simply
update the status of a row to indicate that it has been deleted while leaving the data present and
intact.
[Link] ANALYSIS
2.1 EXISTING SYSTEM
NodeSphere is the go-to platform for influencers, streamlining social media management across
Instagram, Twitter, Facebook, and YouTube. With features like analytics, content scheduling, and
collaboration tools, NodeSphere offers a user-friendly and comprehensive solution for
influencers and social media celebrities.

2.1.1 DISADVANTAGES OF EXISTING SYSTEM

Limited User Interaction: NodeSphere may lack the personal touch and direct
interaction between users and the platform, potentially impacting the level of trust and
personalized support users receive.

Connectivity Issues: As a digital platform, NodeSphere may be susceptible to

connectivity issues, hindering users' ability to access and manage their social media accounts
seamlessly.

Privacy Concerns: Users may express concerns about the privacy and security of their
social media data within NodeSphere, particularly given the sensitive nature of personal and
engagement-related information.

Feature Overwhelm: The diverse range of features in NodeSphere could potentially

overwhelm users who may find it challenging to navigate and utilize all functionalities
effectively.
2.2 PROPOSED SYSTEM
"NodeSphere" revolutionizes social media management for influencers. It offers a centralized
hub for seamless navigation and management of Instagram, Twitter, Facebook, and YouTube
accounts. NodeSphere's goal is to empower influencers with advanced analytics and engagement
tools, enhancing their online presence and impact.

2.2.1 ADVANTAGES OF THE PROPOSED SYSTEM

Increased accessibility: NodeSphere ensures influencers have effortless access to

advanced analytics and centralized social media management, saving time and effort in
optimizing their online presence.

Comprehensive information:NodeSphere provides a comprehensive analytics

dashboard, offering influencers detailed insights into their audience, engagement metrics, and
content performance across various social media platforms.

Improved user experience:With an intuitive and visually appealing interface,

NodeSphere enhances the user experience, making social media management seamless,
engaging, and efficient for influencers.

Monetization Opportunities: NodeSphere facilitates online transactions, enabling

influencers to conveniently purchase and sell services, collaborate with brands, and explore
various monetization opportunities within the platform.

Overall, NodeSphere streamlines social media management, providing influencers with

advanced analytics and a centralized hub for optimized online presence. The platform enhances
the overall experience for influencers, making it efficient and comprehensive in navigating the
digital landscape.
[Link] SPECIFICATION
3.1 Software Specification:
Clear, concise, and executable requirements help development teams build high-quality products
that do what they are supposed to do. The best way to create, organize, and share requirements is
a Software Requirements Specification (SRS). But what is an SRS, and how do you write one?

In this blog, we'll explain what a software requirements specification is and outline how to create
an SRS document, including how to define your product's purpose, describe what you're
building, detail the requirements, and, finally, deliver it for approval. We'll also discuss the
benefits of using a dedicated requirements management tool to create your SRS vs. using
Microsoft Word.

Operating system:
Frontend: Visual Studio code
Backend: NodeJS
Web server: Google
A PWA web app must have a web manifest file, be served using HTTPS, and must
register a service worker with a fetch event handler.
PWAs are not available for iOs and are only compatible with Chrome on Android (and only in
recent versions of the browser).

3.2 Hardware specification:

Hardware Specifications means the detailed technical specifications for the Hardware, as
outlined in Exhibit A. The Hardware Specifications may change from time to time through
Engineering Change procedures. The Parties may, from time to time, add products to this
Agreement, in which event the Parties shall also mutually agree on revisions to this Agreement
as may be necessary to cover associated Hardware.
Hardware Specifications means the architecture, design, development, and implementation
documentation, including component lists, bill of materials, hardware component design and
architecture documentation, circuit designs and layouts, ASIC architectures, pin-outs, data
sheets, and white papers.

Processor: Core i3 ,1.5MHz , Google Chrome: Version 110.0.5481.181(official Build)(64 bit)

Hard disk: 150 GB
RAM: 2 GB
The system should have an operating system that supports modern web browsers.

3.3 SOFTWARE DESCRIPTION

System software is a software program created to control a computer's hardware, software, and
resources, including memory, processors, and hardware. System software is often included with
an operating system on a computer, and it further offers a platform for running application
software.
Any software items that cover a clearly defined field of application and may be utilized entirely
without any additional modifications when purchased are referred to as having a software
description.
4. PROJECT DESCRIPTION
4.1 ABOUT FRONTEND

4.1.1 ARCHITECTURE OF FRONTEND USER

4.1.2 SOFTWARE & TOOLS USED:

a) HTML
HTML stands for HyperText Markup Language. It is used to design web pages using a markup
language. HTML is a combination of Hypertext and Markup language. Hypertext defines the
link between web pages. A markup language is used to define the text document within the tag
which defines the structure of web pages. This language is used to annotate (make notes for the
computer) text so that a machine can understand it and manipulate text accordingly. Most
markup languages (e.g. HTML) are human-readable. The language uses tags to define what
manipulation has to be done on the text.

Elements and Tags: HTML uses predefined tags and elements that tell the browser how to
properly display the content. Remember to include closing tags. If omitted, the browser applies
the effect of the opening tag until the end of the page.

WHY WE NEED HTML:

HTML is simple to understand and implement

● HTML is a simple language to learn and understand. HTML is the first and most
important language that anyone learning web development will encounter. There are no
complicated tags, and there is no case sensitivity with HTML.
● It consists of only a few tags that have a specific purpose. One can easily grasp others’
code and make adjustments if necessary, so there isn't much more to learn from it.
Moreover, unlike other programming languages, it does not throw an error or cause a
problem if the developer forgets to close the tags or makes a mistake in the code.

HTML is completely free

● One of the biggest advantages of using HTML is that it is free, and no special software is
required. HTML does not require any plugins, so one should not have to deal with them
when working with any software.
● Even with many open-source content management systems, all necessary plugins are not
always free. As a result, it is incredibly cost-effective from a per-business standpoint
because there is no fee for obtaining the license if the entire website is constructed in
HTML.

Every browser supports HTML

● HTML is supported by nearly all browsers worldwide such as Google, Safari, Opera, etc.
So there is no need to be concerned about a website built in HTML for browser support
because the website will appear in all browsers if the program remembers to optimize the
 website for the different browsers.
● It is neither difficult nor complex to optimize an HTML-based website for browser
compatibility. It gives web developers an easy way to optimize their websites for
browsers.

HTML is the most search engine friendly

● In comparison to other web programming languages on the market, HTML is one of the
most user-friendly search engines (Search Engine friendly means delivering users quality
websites with relevant information when searching for a particular one).
● HTML is far easier to use than other computer languages for creating SEO-compliant
websites. HTML websites are more accessible for web crawlers to read and access,
reducing crawling time and page load time and so enhancing website performance.
● HTML generates the fewest SEO difficulties and offers the most flexibility when
attempting to construct an SEO-compliant website. As long as you verify that your
HTML code is clean and validated.

HTML is Simple to Edit

HTML is very simple to edit because it does not require a special interface or platform. It is
written in plain Notepad and can thus be easily modified in any text editor such as Notepad,
Notepad++, etc.

HTML is simple to integrate with other languages

HTML is easily integrated with many languages and does not cause any problems. For example,
in Javascript, PHP, [Link], CSS, and many more languages, we write the code of these
languages inside the HTML, and it readily combines with them.

HTML is lightweight and quick

HTML is a lightweight markup language that loads quickly. It saves clients time by reducing
stacking time. When compared to other modes of communication, it has a high signal-to-noise
ratio. It is also faster to download HTML code, indicating that it is highly compressive.

HTML is the most fundamental of all programming languages

● To be a frontend or backend developer, a programmer must know HTML because it is the

basic language and all other languages, such as JavaScript, JSP, and PHP, etc., integrate
with it while coding. Similarly, HTML syntax is similar to XML, which is now widely
used for data storage.
● As HTML and XML have similar syntax, making working between the two platforms is
simpler and more seamless. XML is increasingly being used for data storage today.
Working with XML is simple for someone familiar with HTML.

Display Changes Instantly

One of the most significant advantages of HTML is that changes can be seen immediately by
saving and reloading the previous HTML page. Unlike other web programming languages, there
is no need to run the entire code to find the error. For example, if you make a word italic, it will
appear on the page immediately after saving and reloading.

HTML is supported by the majority of development tools

Many web development tools allow you to create HTML-based websites more than any other
web programming language, whether it is FrontPage or any other programming tool.

HTML is user-friendly

● HTML is a simple web programming language. There is no prerequisite knowledge of

any language. Understanding basic tags is enough to work with them.
● HTML has been used in front-end development for many years before no other web
development languages were available on the market. Although HTML provides all of
the tags for the user to add anything to the webpage, such as a table, images, hyperlinks,
 and so on, also the most recent version of HTML, i.e., HTML5, allows the user to insert a
graphic, multimedia, and semantic elements to develop powerful websites while
consistently improving UX.

As A PWA
The project is installable

FEATURES OF HTML
● User Friendly & Simple.
● Semantic Structure.
● SEO – Search Engine Optimisation.
● localStorage & IndexedDB – Client-side data storage.
● Offline Capabilities (PWA) with Cache API & Service Workers.
● Canvas for Game Development.
● Platform Independent.
● Media Support.

ADVANTAGES

HTML is simple to understand and implement

● HTML is a simple language to learn and understand. HTML is the first and most
important language that anyone learning web development will encounter. There are no
complicated tags, and there is no case sensitivity with HTML.
● It consists of only a few tags that have a specific purpose. One can easily grasp others’
code and make adjustments if necessary, so there isn't much more to learn from it.
 Moreover, unlike other programming languages, it does not throw an error or cause a
problem if the developer forgets to close the tags or makes a mistake in the code.

HTML is completely free

● One of the biggest advantages of using HTML is that it is free, and no special software is
required. HTML does not require any plugins, so one should not have to deal with them
when working with any software.
● Even with many open-source content management systems, all necessary plugins are not
always free. As a result, it is incredibly cost-effective from a per-business standpoint
because there is no fee for obtaining the license if the entire website is constructed in
HTML.

Every browser supports HTML

● HTML is supported by nearly all browsers worldwide such as Google, Safari, Opera, etc.
So there is no need to be concerned about a website built in HTML for browser support
because the website will appear in all browsers if the program remembers to optimize the
website for the different browsers.
● It is neither difficult nor complex to optimize an HTML-based website for browser
compatibility. It gives web developers an easy way to optimize their websites for
browsers.

HTML is the most search engine friendly

● In comparison to other web programming languages on the market, HTML is one of the
most user-friendly search engines (Search Engine friendly means delivering users quality
websites with relevant information when searching for a particular one).
● HTML is far easier to use than other computer languages for creating SEO-compliant
websites. HTML websites are more accessible for web crawlers to read and access,
reducing crawling time and page load time and so enhancing website performance.
● HTML generates the fewest SEO difficulties and offers the most flexibility when
attempting to construct an SEO-compliant website. As long as you verify that your
 HTML code is clean and validated.

HTML is Simple to Edit

HTML is very simple to edit because it does not require a special interface or platform. It is
written in plain Notepad and can thus be easily modified in any text editor such as Notepad,
Notepad++, etc.

HTML is simple to integrate with other languages

HTML is easily integrated with many languages and does not cause any problems. For example,
in Javascript, PHP, [Link], CSS, and many more languages, we write the code of these
languages inside the HTML, and it readily combines with them.

HTML is lightweight and quick

HTML is a lightweight markup language that loads quickly. It saves clients time by reducing
stacking time. When compared to other modes of communication, it has a high signal-to-noise
ratio. It is also faster to download HTML code, indicating that it is highly compressive.

HTML is the most fundamental of all programming languages

● To be a frontend or backend developer, a programmer must know HTML because it is the

basic language and all other languages, such as JavaScript, JSP, and PHP, etc., integrate
with it while coding. Similarly, HTML syntax is similar to XML, which is now widely
used for data storage.
● As HTML and XML have similar syntax, making working between the two platforms is
simpler and more seamless. XML is increasingly being used for data storage today.
Working with XML is simple for someone familiar with HTML.
Display Changes Instantly

One of the most significant advantages of HTML is that changes can be seen immediately by
saving and reloading the previous HTML page. Unlike other web programming languages, there
is no need to run the entire code to find the error. For example, if you make a word italic, it will
appear on the page immediately after saving and reloading.

HTML is supported by the majority of development tools

Many web development tools allow you to create HTML-based websites more than any other
web programming language, whether it is FrontPage, DreamWeaver, or any other programming
tool.

HTML is user-friendly

● HTML is a simple web programming language. There is no prerequisite knowledge of

any language. Understanding basic tags is enough to work with them.
● HTML has been used in front-end development for many years before no other web
development languages were available on the market. Although HTML provides all of
the tags for the user to add anything to the webpage, such as a table, images, hyperlinks,
and so on, also the most recent version of HTML, i.e., HTML5, allows the user to insert a
graphic, multimedia, and semantic elements to develop powerful websites while
consistently improving UX.

HTML Form
An HTML form is a section of a document that contains controls such as text fields, password
fields, checkboxes, radio buttons, submit buttons, menus etc. An HTML form facilitates the user
to enter data that is to be sent to the server for processing such as name, email address, password,
and phone number.
Why do we use HTML Form?

HTML forms are required if you want to collect some data from the site visitor.

For example: If a user wants to purchase some items on the internet, he/she must fill out the form
such as the shipping address and credit/debit card details so that item can be sent to the given
address.

b) CASCADING STYLE SHEET:

CSS stands for Cascading Style Sheets. It is a style sheet language that is used to describe the
look and formatting of a document written in a markup language. It provides an additional
feature to HTML. It is generally used with HTML to change the style of web pages and user
interfaces. It can also be used with any kind of XML document including plain XML, SVG, and
XUL.

CSS is used along with HTML and JavaScript in most websites to create user interfaces for web
applications and user interfaces for many mobile [Link] (Cascading Style Sheets) are
used to style and layout web pages — for example, to alter the font, color, size, and spacing of
your content, split it into multiple columns, or add animations and other decorative features. This
module provides a gentle beginning to your path toward CSS mastery with the basics of how it
works, what the syntax looks like, and how you can start using it to add styling to HTML.

This module carries on where CSS first step left off — now you've gained familiarity with the
language and its syntax, and got some basic experience with using it, it's time to dive a bit
deeper. This module looks at the cascade and inheritance, all the selector types we have
available, units, sizing, styling backgrounds and borders, debugging, and lots more.

The aim here is to provide you with a toolkit for writing competent CSS and help you understand
all the essential theories, before moving on to more specific disciplines like text styling and CSS
layout.
Advantages of CSS

1) Solves a big problem

Before CSS, tags like font, color, background style, element alignments, border, and size had to
be repeated on every web page. This was a very long process. For example: If you are
developing a large website where fonts and color information are added on every single page, it
will become a long and expensive process. CSS was created to solve this problem. It was a W3C
recommendation.

2) Saves a lot of time

CSS style definitions are saved in external CSS files so it is possible to change the entire website
by changing just one file.

3) Provide more attributes

CSS provides more detailed attributes than plain HTML to define the look and feel of the
website.

CSS handles the look and feels part of a web page. Using CSS, you can control the color of the
text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, etc.

CSS saves time

You can write CSS once and then reuse the same sheet in multiple HTML pages. You can define
a style for each HTML element and apply it to as many Web pages as you want.

Easy maintenance

To make a global change, simply change the style, and all elements in all the web pages will be
updated automatically.
Global web standards

Now HTML attributes are being deprecated and it is recommended to use CSS. So it's a good
idea to start using CSS in all the HTML pages to make them compatible with future browsers.

Platform Independence

The Script offers consistent platform independence and can support the latest browsers as well.

Features of CSS
● Opportunity in Web designing: If anyone wants to begin a career in web designing
professionally, it is essential to know CSS and HTML.
● Website Design: With the use of CSS, we can control various styles, such as the text
color, the font style, the spacing among paragraphs, column size and layout, background
color and images, design of the layout, display variations for distinct screens and device
sizes, and many other effects as well.
● Web Control: CSS has controlling power over the documents of HTML, so it is easy to
learn. It is integrated with HTML and the XHTML markup languages.
● Other Languages: Once we know some basics of CSS and HTML, other associated
technologies like Angular, PHP, and JavaScript became clearer to understand.

CSS Applications
Some critical applications of CSS are discussed and listed below:

● Fast Page Loading: We don’t need to mention the attributes of the HTML element every
time we use CSS. We need to specify one rule of CSS for an element and use it for every
occurrence of that element. So, short code means high-speed download times.
● Easy Maintenance: To create a global alteration we need to alter the style. Every
element will get automatically updated within all web pages.
● Superior HTML Styles: HTML contains few extended attribute arrays than CSS, thus
 we can provide a much better view of our HTML page as compared to HTML attributes.
● Save Time: We can specify CSS once and reuse the same sheet within various HTML
pages. We can describe a style for every HTML tag and apply this style to as many web
pages as we want.
● Compatibility: The cascading style sheet permits content to be upgraded for one or more
device types. Distinct versions of the website could be granted for various handheld
devices like cell phones and PDAs, and printing.
● Global Standards: Now, the attributes of HTML are being recommended to apply CSS,
and they are being deprecated. Thus it is better to begin the use of CSS in every HTML
page for making them compatible with future browsers.

The CSS syntax contains the selector and the declaration block, which will be clearer with the
following example:

Selector: A CSS selector specifies the HTML tag we wish to style. A selector can be any
element such as <title>, and <h1>.
Declaration Block: This block can consist of more than one declaration that is isolated by the
semicolon. Here, there are two types of declarations for the example mentioned above:

● Color: red;
● Font size: 12px;

All the declarations include the property name and the value that is isolated by the colon.
Property: It is a part of the HTML element’s attributes. A property could be any color or border.
Value: CSS properties are required to be assigned by some values. Thus, values are provided to
the properties of CSS. Value “red” is given to the color property in the example, as mentioned
above.
Materialize CSS
Created and designed by Google, Material Design is a design language that combines the classic
principles of successful design along with innovation and technology. Google's goal is to develop
a system of design that allows for a unified user experience across all its products on any
platform.

Speeds up development
We did most of the heavy lifting for you to provide default stylings that incorporate our custom
components. Additionally, we refined animations and transitions to provide a smoother
experience for developers.

User Experience Focused

By utilizing elements and principles of Material Design, we were able to create a framework that
incorporates components and animations that provide more feedback to users. Additionally, a
single underlying responsive system across all platforms allows for a more unified user
experience.

Easy to work with

We have provided detailed documentation as well as specific code examples to help new users
get started. We are also always open to feedback and can answer any questions a user may have
about Materialize.

How to use Local Installation

Step1:Go to the website [Link] to install the latest

version.
Step2: Put the downloaded [Link] file in a directory of your website, e.g. /js, and
[Link] in /CSS.

c) JAVASCRIPT:

JavaScript is a scripting or programming language that allows you to implement complex

features on web pages — every time a web page does more than just sit there and display static
information for you to look at — displaying timely content updates, interactive maps, animated
2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably
involved. The core client-side JavaScript language consists of some common programming
features that allow you to do things like:

● Store useful values inside variables. In the above example, for instance, we ask for a new
name to be entered and then store that name in a variable called name.
● Operations on pieces of text (known as "strings" in programming). In the above example
we take the string "Player 1: " and join it to the name variable to create the complete text
label, e.g. "Player 1: Chris".
● Running code in response to certain events occurring on a web page. We used a click
event in our example above to detect when the label is clicked and then run the code that
updates the text label.
● And much more!
● What is even more exciting however is the functionality built on top of the client-side
JavaScript language. So-called Application Programming Interfaces (APIs) provide you
with extra superpowers to use in your JavaScript code.

APIs are ready-made sets of code building blocks that allow a developer to implement programs
that would otherwise be hard or impossible to implement. They do the same thing for
programming that ready-made furniture kits do for home building — it is much easier to take
ready-cut panels and screw them together to make a bookshelf than it is to work out the design
yourself, go and find the correct wood, cut all the panels to the right size and shape, find the
correct-sized screws, and then put them together to make a bookshelf.
FEATURES OF JAVASCRIPT:

Here we'll start looking at some code, and while doing so, explore what happens when you run
some JavaScript on your page.

Let's briefly recap the story of what happens when you load a web page in a browser (first talked
about in our How CSS Works article). When you load a web page in your browser, you are
running your code (the HTML, CSS, and JavaScript) inside an execution environment (the
browser tab). This is like a factory that takes in raw materials (the code) and outputs a product
(the web page).

A very common use of JavaScript is to dynamically modify HTML and CSS to update a user
interface, via the Document Object Model API (as mentioned above). Note that the code in your
web documents is generally loaded and executed in the order it appears on the page. Errors may
occur if JavaScript is loaded and run before the HTML and CSS that it is intended to modify

Each browser tab has its separate bucket for running code in (these buckets are called "execution
environments" in technical terms) — this means that in most cases the code in each tab is run
completely separately, and the code in one tab cannot directly affect the code in another tab — or
on another website. This is a good security measure — if this were not the case, then pirates
could start writing code to steal information from other websites, and other such bad things.
ADVANTAGES OF JAVASCRIPT

Speed:

JavaScript is an “interpreted” language, so it cuts down on the time needed for compilation in
other languages like Java. Additionally, it is a client-side script that shortens the time required to
establish a server connection, which speeds up program execution.

Reduces Load on the Server:

The language runs on the client side rather than the server. Thus, the server doesn’t have to deal
with the stress of executing JavaScript. Once this burden is reduced, the server will function
more quickly and concentrate on other tasks like data management.

Ease of Use:

JavaScript is one of the simplest languages to learn, particularly for web programming. It has
been designed to be simple for web developers to understand and use. Since difficult languages
have fewer engineers and demand a higher budget, this helps web companies save a lot of money
on development.

Rich Interface:

JavaScript offers developers a variety of interfaces to build engaging websites. Websites with
drag-and-drop elements or sliders may have a more robust user experience. This increases user
interaction with the website.
Versatile:

The versatility of JavaScript is its most valuable quality. Since [Link] integrates effectively with
MongoDB and MySQL, it can build and finish the front end and back end of the website.

Extended Functionality:
To save time and money, third-party add-ons such as Greasemonkey (a Mozilla Firefox
extension) enable developers to incorporate small sections of prefabricated code into their code.
These add-ons make it easier and faster for developers to create JavaScript applications than they
could with other coding languages.

Interoperability:

JavaScript seamlessly integrates with other programming languages, so many developers favor
using it to create various apps. Any webpage or script of another computer language can
incorporate it.

Popularity :

JavaScript is one of the most popular languages for web development. It is an important factor
for every working website. Even the most popular websites worldwide, including Amazon and
Google, use JavaScript since it is regarded as a very powerful technology. Due to its steadily
growing popularity, it is now simpler than ever to learn this language online through various
courses.

Independent Platform:

Most browsers support JavaScript, making it simple for any browser to comprehend and
recognize JavaScript code. You don’t need to go through any installation or setup procedures
because it is an easily available technology. Simply use your browser to create several webpage
editing zones.
JavaScript Has Powerful Frameworks:

Around JavaScript, many commanding frameworks display ready-to-use codes. Such codes are
all easy to comprehend and troubleshoot. Depending on the structure in question, you will have
access to several additional capabilities that will exponentially increase your efficiency.

JavaScript Provides Procedural Programming Features:

Despite being easy to learn, the language has all the characteristics that make it a popular and
significant programming language. JavaScript allows you to create branches, start conditional
checking, start loops, and much more, making using your website a lot more fun.

JavaScript Codes Are Activated in Response to User Activity:

JavaScript is an Event-Based coding language. This means that various code segments are run
after a user clicks a button. As a result, when the website loads, none of the code is initialized.
By doing this, you can be certain that your website’s load time won’t be at risk as you load it
with high-end features.

4.2 BACKEND:
The back end refers to parts of a computer application or a program's code that allow it to operate
and that cannot be accessed by a user. Most data and operating syntax are stored and accessed in
the back end of a computer system. Typically the code is comprised of one or more programming
languages. NodeJS is used as a backend for the development of the website
4.2.1 NODEJS ARCHITECTURE

4.2.2 ABOUT SOFTWARE &TOOLS USED

a) NODEJS:
[Link] was initially released in 2009 by Ryan Dahl and has since become a widely adopted
runtime for building scalable network applications. It uses an event-driven, non-blocking I/O
model, making it efficient and suitable for real-time applications.

[Link] allows developers to use JavaScript on the server-side, unifying the language across both
client and server environments. It is particularly well-suited for building applications that involve
a lot of concurrent connections, such as chat applications, real-time collaboration tools, and
streaming services.

b) REASON FOR USING NODEJS:

1. JavaScript Everywhere:

[Link] enables developers to use JavaScript for both server-side and client-side scripting,
creating a unified language stack. This facilitates seamless communication between the server
and the client.

2. Event-Driven and Asynchronous:

[Link] follows an event-driven, non-blocking I/O model, making it highly efficient for handling
concurrent connections. This is particularly beneficial for real-time applications, such as chat
applications and online gaming.

3. Fast Execution:
Powered by the V8 JavaScript engine from Google Chrome, [Link] provides fast code
execution, optimizing performance for server-side applications.

4. NPM Ecosystem:
Node Package Manager (NPM) offers a vast ecosystem of open-source packages and modules.
This allows developers to easily integrate third-party libraries and tools into their projects, saving
development time and effort.

5. Scalability:
[Link] is designed to scale horizontally, making it suitable for handling a large number of
concurrent connections. Its lightweight, event-driven architecture contributes to its scalability.

6. Cross-Platform Compatibility:
[Link] is cross-platform and can run on various operating systems, providing flexibility and
compatibility across different environments.

7. Community Support:
[Link] has a large and active community of developers. This community support results in a
wealth of resources, tutorials, and modules, contributing to the overall growth and improvement
of the technology.

8. Single Codebase:
Using JavaScript on both the client and server sides allows for a single codebase. Developers can
share code and libraries between front-end and back-end components, promoting code reusability
and consistency.

9. Real-Time Applications:
Ideal for building real-time applications like chat applications, collaboration tools, and streaming
services due to its ability to handle concurrent connections efficiently.

10. Microservices Architecture:

Well-suited for microservices architecture, allowing developers to create modular, independently

deployable services that can communicate with each other.

c) FEATURES
Authentication: [Link] supports authentication using various methods, including

traditional username/password, OAuth, and third-party authentication providers. [Link] is a

popular middleware for authentication in [Link].

Real Time Data Processing: [Link] is well-suited for real-time applications due to
its event-driven, non-blocking I/O architecture. Developers can build real-time features, such as
chat applications and live updates, efficiently.

Server-Side Rendering (SSR): [Link] can be used for server-side rendering,

allowing developers to render web pages on the server before sending them to the client.
Frameworks like [Link] leverage this capability.

WebSocket Support: [Link] supports WebSocket communication, enabling

bidirectional, real-time communication between clients and servers.

Cross-Platform Compatibility: [Link] is cross-platform, ensuring compatibility

across different operating systems, including Windows, macOS, and Linux.

BUILT BETTER APPLICATION: This feature mainly includes backend

services that help developers to build and manage their applications in a better way. Services
included under this feature are:

● [Link] Framework: [Link], coupled with [Link], offers a robust and flexible
framework for building scalable and efficient web applications. It simplifies routing,
middleware handling, and overall application structure.
● MongoDB for Database Management: Leveraging MongoDB, a popular NoSQL
database, developers can efficiently manage and organize data in a flexible, JSON-like
format. This allows for seamless integration with [Link] applications.
● [Link] for Authentication: [Link] is a widely-used authentication middleware
 for [Link], providing developers with a simple and modular approach to implementing
user authentication. It supports various authentication strategies, including OAuth and
JWT.
● [Link] for Real-Time Communication:[Link], in combination with [Link],
enables real-time bidirectional communication between clients and servers. This is
especially useful for applications requiring live updates, chat features, and collaborative
functionalities.
● PM2 for Process Management: PM2 is a production-ready process manager for [Link]
applications, offering features like automatic restarts, load balancing, and error tracking.
It ensures the application's stability and performance in a production environment.

DEVELOPER TOOLS

Chrome Developer Tools is a comprehensive toolkit for developers, built directly into the
Chrome browser. These tools let you edit web pages in real-time, diagnose problems more
quickly, and build better websites faster.

With Chrome DevTools, developers can:

Inspect and modify the HTML, CSS, and JavaScript code of a web page in real time. Debug
JavaScript code with breakpoints, console messages, and step-by-step execution. Monitor
network traffic and analyze performance metrics to optimize page load timesTest responsive
design and view the web page in different device sizes and orientations

Emulate different network speeds and user agents to test the web page in different
environmentsChrome DevTools is a powerful tool for web developers, and it's included with
Google Chrome, which makes it easily accessible for anyone who wants to use it.
5. SYSTEM DESIGN
5.1 DATAFLOW FLOW DIAGRAM

A data flow diagram (DFD) maps out the flow of information for any process or system. It uses
defined symbols like rectangles, circles, and arrows, plus short text labels, to show data inputs,
outputs, storage points, and the routes between each destination. Data flowcharts can range from
simple, even hand-drawn process overviews, to in-depth, multi-level DFDs that dig progressively
deeper into how the data is handled.
They can be used to analyze an existing system or model a new one. Like all the best diagrams
and charts, a DFD can often visually “say” things that would be hard to explain in words, and
they work for both technical and non-technical audiences, from developers to CEO. That’s why
DFDs remain so popular after all these years. While they work well for data flow software and
systems, they are less applicable nowadays to visualizing interactive, real-time or
database-oriented software or systems.

Symbols and Notations Used in DFDs

Using any convention’s DFD rules or guidelines, the symbols depict the four components of data
flow diagrams.

1. External entity: an outside system that sends or receives data, communicating with the
system being diagrammed. They are the sources and destinations of information
entering or leaving the system. They might be an outside organization or person, a
computer system, or a business system. They are also known as terminators, source,s
and sinks, or actors. They are typically drawn on the edges of the diagram.
2. Process: any process that changes the data, producing an output. It might perform
computations, sort data based on logic, or direct the data flow based on business rules.
A short label is used to describe the process, such as “Submit payment.”
3. Data store: files or repositories that hold information for later use, such as a database
table or a membership form. Each data store receives a simple label, such as “Orders.”
4. Data flow: the route that data takes between the external entities, processes and data
stores. It portrays the interface between the other components and is shown with
arrows, typically labeled with a short data name, like “Billing details.”
5.2 Database structure with diagram
The NodeJS Realtime Database is a cloud-hosted database in which data is stored as JSON. The
data is synchronized in real-time to every connected client. All of our clients share one Realtime
Database instance and automatically receive updates with the newest data when we build
cross-platform applications with our iOS, and JavaScript SDKs.

The Realtime database helps our users collaborate. It ships with mobile and web SDKs,
which allow us to build our app without the need for servers. When our users go offline,
the Real-time Database SDKs use a local cache on the device for serving and storing
changes. The local data is automatically synchronized when the device comes online.

DATABASE STRUCTURE
[Link] TESTING &

IMPLEMENTATION
6.1 SYSTEM TESTING:

System Testing includes testing of a fully integrated software system. Generally, a computer
system is made with the integration of software (any software is only a single element of a
computer system). The software is developed in units and then interfaced with other software
and hardware to create a complete computer system. In other words, a computer system consists
of a group of software to perform the various tasks, but only software cannot perform the task;
for that software must be interfaced with compatible hardware.

System testing is a series of different type of tests with the purpose to exercise and examine the
full working of an integrated software computer system against [Link] testing is
a critical element of software quality assurance and represents the ultimate review of
specification, design and coding. In fact, testing is the one step in the software engineering
process that could be viewed as destructive rather than constructive.

A strategy for software testing integrates software test case design methods into a well planned
series of steps that result in the successful construction of software. Testing is the set of activities
that can be planned in advance and conducted [Link] underlying motivation of
program testing is to affirm software quality with methods that can economically and effectively
apply to both strategic to both large and small-scale systems.

Software testing is the process of evaluating and verifying that a software product or application
does what it is supposed to do. The benefits of testing include preventing bugs, reducing
development costs and improving performance.

CONDITIONAL TESTING

In this part of the testing each of the conditions were tested to both true and false aspects. And all
the resulting paths were tested. So that each path that may be generated on a particular condition
is traced to uncover any possible errors.
TYPES OF SOFTWARE TESTING:

There are many different types of software tests, each with specific objectives and strategies:
Acceptance testing: Verifying whether the whole system works as intended.

Integration testing: Ensuring that software components or functions operate together.

Unit testing: Validating that each software unit performs as expected. A unit is the smallest
testable component of an application.

Functional testing: Checking functions by emulating business scenarios, based on functional

requirements. Black-box testing is a common way to verify functions.

Performance testing: Testing how the software performs under different workloads. Load
testing, for example, is used to evaluate performance under real-life load conditions.

Regression testing: Checking whether new features break or degrade functionality. Sanity
testing can be used to verify menus, functions and commands at the surface level, when there is
no time for a full regression test.

Stress testing: Testing how much strain the system can take before it fails. Considered to be a
type of non-functional testing.

Usability testing: Validating how well a customer can use a system or web application to
complete a task.

In each case, validating base requirements is a critical assessment. Just as important, exploratory
testing helps a tester or testing team uncover hard-to-predict scenarios and situations that can
lead to software errors.

Even a simple application can be subject to a large number and variety of tests. A test
management plan helps to prioritize which types of testing provide the most value – given
available time and resources. Testing effectiveness is optimized by running the fewest number of
tests to find the largest number of defects.
Few can argue against the need for quality control when developing software. Late delivery or
software defects can damage a brand’s reputation — leading to frustrated and lost customers. In
extreme cases, a bug or defect can degrade interconnected systems or cause serious
malfunctions.

Though testing itself costs money, companies can save millions per year in development and
support if they have a good testing technique and QA processes in place. Early software testing
uncovers problems before a product goes to market. The sooner development teams receive test
feedback, the sooner they can address issues such as

​ Architectural flaws
​ Poor design decisions
​ Invalid or incorrect functionality
​ Security vulnerabilities
​ Scalability issues
​
When development leaves ample room for testing, it improves software reliability and
high-quality applications are delivered with few errors. A system that meets or even exceeds
customer expectations leads to potentially more sales and greater market share.

6.2 SYSTEM IMPLEMENTATION

During the Webpage-testing phase each module of the Website is thoroughly tested for bugs and
for accuracy of output. The system developed is very user-friendly and the detailed
documentation is also given to the user as online help wherever necessary. The implementation
phase normally ends with the formal test involving all the components. The entire system was
developed using Javascript, HTML, and CSS. The HTML is used to design the web page.

The css is used to style the website and NodeJs is used as a backend..
 7. CONCLUSION &

FUTURE ENHANCEMENT
7. CONCLUSION & FUTURE ENHANCEMENT

Improve website design: The website design would be visually appealing, user-friendly, and
easy to navigate. Will Ensure that the website is optimized for mobile devices and has fast
loading times.

Add high-quality images and videos: High-quality images and videos of fish, aquatic plants,
and aquarium setups will be added to enhance the website's visual appeal and help visitors
understand the products and services being offered.

Incorporate interactive features: Interactive features such as virtual aquariums, quizzes, and
polls will engage visitors and make the website more interactive.

Add customer reviews and testimonials: Including customer reviews and testimonials will help
build trust with potential customers and enhance the credibility of the website.

Offer personalized recommendations: Providing personalized recommendations based on a

visitor's interests and needs can help visitors find the products and services that are best suited
for them.

Provide educational resources: Providing educational resources such as blog articles, videos,
and e-books will help visitors learn more about aquarium keeping and build trust with the
website

7.1 REFERENCES

1. [Link]
2. [Link]
3. [Link]
4. [Link]
5. [Link]
6. Developer support websites
7. [Link]/nodejs/node
7.2 APPENDIX:

Additional features of this PWA

● Responsive design that works on desktop, tablet, and mobile devices.

● Offline functionality that allows users to continue using the app even without an internet
connection.
● Push notifications that keep users informed about their aquariums' status and updates.
● User authentication and authorization that ensures the security of user data and privacy.
● Data synchronization that enables users to access their aquariums from multiple devices.

In conclusion, TITLE PWA is a responsive and interactive web application that provides
aquarium enthusiasts with a virtual aquarium creation and management platform. It is built using
modern web technologies and provides offline functionality, data synchronization, and push
notifications.

A) CODING

[Link]

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->

<!-- Favicon -->

<link rel="icon" type="image/png" sizes="32x32" href="./img/[Link]">

<!-- Required Social Preview MetaTags -->

<!-- Primary Meta Tags -->

 <meta name="title" content="Social Media Dashboard | Frontend Mentor Challenge Completed
by alnahian2003">
<meta name="description"
content="Social Media Dashboard With Theme Style Switcher is a Very Simple and
Responsive HTML, CSS, JS Challenge from [Link] and the challenged is
accomplished by alnahian2003">

<!-- Open Graph / Facebook -->

<meta property="og:type" content="website">
<meta property="og:url" content="[Link]
<meta property="og:title" content="Social Media Dashboard | Frontend Mentor Challenge
Completed by alnahian2003">
<meta property="og:description"
content="Social Media Dashboard With Theme Style Switcher is a Very Simple and
Responsive HTML, CSS, JS Challenge from [Link] and the challenged is
accomplished by alnahian2003">
<meta property="og:image" content="design/[Link]">

<!-- Twitter -->

<meta property=" twitter:card" content="summary_large_image">
<meta property="twitter:url" content="[Link]
<meta property="twitter:title" content="Social Media Dashboard | Frontend Mentor Challenge
Completed by alnahian2003">
<meta property="twitter:description"
content="Social Media Dashboard With Theme Style Switcher is a Very Simple and
Responsive HTML, CSS, JS Challenge from [Link] and the challenged is
accomplished by alnahian2003">
<meta property="twitter:image" content="design/[Link]">

<!-- End of Required Social Preview MetaTags -->

<!-- Main Stylesheet Source -->

<link rel=" stylesheet" href="/css/[Link]">

<!-- Inter Google Font -->

<link href="[Link]
rel="stylesheet">

<title>Nodesphere | Social Media Dashboard | Noobatorium</title>

</head>

<body class="dark">
<!-- Main Container -->
<div class="contianer">
<!-- Header Area -->
<div class="header">
<div class="header-left">
<h1 class="header-heading">Nodesphere</h1>
<p class="total-followers">Total Followers: 23,004</p>
</div>
<div class="header-right">
<div class="dark-mode-title">
<p>Theme</p>
</div>
<div class="dark-mode-toggle">
<label class="switch">
<input id="toggleSwitch" type="checkbox" class="toggle-switch">
<span class="slider round"></span>
</label>
</div>
</div>
</div>

<!-- Total Summary Area -->

<div class="summary">
<div class="cards">
<div class="card">
<a
href="[Link]
target="_blank" rel="noopener noreferrer" >
<div class="usern-info">
<img src="./img/[Link]" alt="facebook">
<span class="username">@noobatorium</span>
</div>
<div class="followers">
<h2>0</h2>
<span>FOLLOWERS</span>
</div>
<span class="todays-stats">
 <img src="./img/[Link]" alt="up">
0 Today
</span></a>
</div>
<div class="card">
<a href="[Link]
target="_blank" rel="noopener noreferrer" >
<div class="usern-info">
<img src="./img/[Link]" alt="twitter">
<span class="username">@noobatorium</span>
</div>
<div class="followers">
<h2>1044</h2>
<span>FOLLOWERS</span>
</div>
<span class="todays-stats"><img src="./img/[Link]" alt="up"> 99 Today</span>
</a>
</div>

<div class="card">
<a href="[Link] target="_blank" rel="noopener
noreferrer" >
<div class="usern-info">
<img src="./img/[Link]" alt="facebook">
<span class="username">@[Link]</span>
</div>
<div class="followers">
<h2>241</h2>
<span>FOLLOWERS</span>
</div>
<span class="todays-stats"><img src="./img/[Link]" alt="up"> 10 Today</span>
</a>
</div>

<div class="card">
<a href="[Link] target="_blank" rel="noopener
noreferrer" class="youtube-link">
<div class="usern-info">
 <img src="./img/[Link]" alt="youtube">
<span class="username">Noobatorium</span>
</div>
<div class="followers">
<h2>101</h2>
<span>SUBSCRIBERS</span>
</div>
<span class="todays-stats-down"><img src="./img/[Link]" alt="down"> 2
Today</span>
</a>
</div>

</div>
</div>

<!-- Overview Area -->

<div class="overview">
<h2>Overview - Today</h2>
<div class="cards">
<div class="card-overview">
<div class="card-items">
<div class="card-top">
<p class="card-title">Page Views</p>
<img class="social-icons" src="./img/[Link]" alt="facebook">
</div>
<div class="card-bottom">
<h3 class="number">
87
</h3>
<div class="rate">
<img src="./img/[Link]" alt="up">
<span class="rate-up">3%</span>
</div>
</div>
</div>
</div>
<div class="card-overview">

<div class="card-items">
 <div class="card-top">
<p class="card-title">Likes</p>
<img class="social-icons" src="./img/[Link]" alt="facebook">
</div>
<div class="card-bottom">
<h3 class="number">
52
</h3>
<div class="rate">
<img src="./img/[Link]" alt="down">
<span class="rate-down">2%</span>
</div>
</div>
</div>
</div>
<div class="card-overview">
<div class="card-items">
<div class="card-top">
<p class="card-title">Likes</p>
<img class="social-icons" src="./img/[Link]" alt="instagram">
</div>
<div class="card-bottom">
<h3 class="number">
5462
</h3>
<div class="rate">
<img src="./img/[Link]" alt="up">
<span class="rate-up">2257%</span>
</div>
</div>
</div>
</div>
<div class="card-overview">
<div class="card-items">
<div class="card-top">
<p class="card-title">Profile Views</p>
<img class="social-icons" src="./img/[Link]" alt="instagram">
</div>
<div class="card-bottom">
<h3 class="number">
 52k
</h3>
<div class="rate">
<img src="./img/[Link]" alt="up">
<span class="rate-up">1375%</span>
</div>
</div>
</div>
</div>
<div class="card-overview">
<div class="card-items">
<div class="card-top">
<p class="card-title">Retweets</p>
<img class="social-icons" src="./img/[Link]" alt="twitter">
</div>
<div class="card-bottom">
<h3 class="number">
117
</h3>
<div class="rate">
<img src="./img/[Link]" alt="up">
<span class="rate-up">303%</span>
</div>
</div>
</div>
</div>
<div class="card-overview">
<div class="card-items">
<div class="card-top">
<p class="card-title">Likes</p>
<img class="social-icons" src="./img/[Link]" alt="twitter">
</div>
<div class="card-bottom">
<h3 class="number">
507
</h3>
<div class="rate">
<img src="./img/[Link]" alt="up">
<span class="rate-up">553%</span>
</div>
 </div>
</div>
</div>
<div class="card-overview">
<div class="card-items">
<div class="card-top">
<p class="card-title">Likes</p>
<img class="social-icons" src="./img/[Link]" alt="youtube">
</div>
<div class="card-bottom">
<h3 class="number">
107
</h3>
<div class="rate">
<img src="./img/[Link]" alt="down">
<span class="rate-down">19%</span>
</div>
</div>
</div>
</div>
<div class="card-overview">
<div class="card-items">
<div class="card-top">
<p class="card-title">Total Views</p>
<img class="social-icons" src="./img/[Link]" alt="youtube">
</div>
<div class="card-bottom">
<h3 class="number">
1407
</h3>
<div class="rate">
<img src="./img/[Link]" alt="down">
<span class="rate-down">12%</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
 <!-- Footer Attribution Section -->
<div class="attribution">
Challenge by <a href="[Link]
target="_blank">Fullstacker</a>.
Coded by <a href="[Link] target="_blank">Darcred</a>.
</div>

<!-- Main JavaScript Source -->

<script src="js/[Link]"></script>
</body>

</html>

[Link]

{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "[Link]",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon [Link]"
},
"author": "",
"license": "ISC",
"dependencies": {
"ejs": "^3.1.9",
"express": "^4.18.2",
"jsdom": "^24.0.0",
"nodemon": "^3.0.3"
}
}

[Link]

const express = require('express');

const path = require('path');

const app = express();

const port = 3000;

[Link]([Link]('public'))
[Link]('/css',[Link](__dirname + 'public/css'))
[Link]('/js',[Link](__dirname + 'public/js'))
[Link]('/img',[Link](__dirname + 'public/img'))

// Set the 'views' directory to store your HTML files

//[Link]('', (req, res) =>(
// [Link](__dirname + '/views/[Link]')
//))
[Link]('views', [Link](__dirname, 'views'));

// Set the view engine to 'html'

[Link]('view engine', 'html');
[Link]('html', require('ejs').renderFile);

// Define routes
[Link]('/', (req, res) => {
[Link]('index');
});

[Link]('/about', (req, res) => {

[Link]('about');
});

[Link]('/contact', (req, res) => {

[Link]('contact');
});
// Start the server
[Link](port, () => {
[Link](`Server is running at [Link]
});
[Link]

var toggleSwitch = [Link]("#toggleSwitch");

function themeSwitcher() {
if ([Link]) {
[Link]("dark");
[Link]("light");
// Add Light Theme in LocalStorage
[Link]("theme", "light")
} else {
[Link]("light");
[Link]("dark");
[Link]("theme");
}
}

[Link]("click", function () {
themeSwitcher();
})

// Get Theme From Local Storage while Toggle Switch is Clicked

function latestTheme() {
if ([Link]("theme")) {
[Link]('light');
[Link] = true;
}
}

latestTheme();
B) Output Screenshot:

screenshot 1

screenshot 2