MINI PROJECT REPORT

ON

CRYPTO DASHBOARD USING NODE JS AND

REACT

MINI PROJECT LAB (KCS-554)

Submitted by:
Rahul Lodhi (2000970130089)
Rahul Kumar Sachdeva (2000970130088)
Prakhar Kumar Singh (2000970130078)

Under the supervision of:

Ms. Raunak Sulekh

Session 2022-23
Department of Information Technology
Galgotias College of Engineering and Technology
Greater Noida
 ACKNOWLEDGEMENT

We want to give special thanks to our Mini Project coordinator Ms. Raunak Sulekh for the
timely advice and valuable guidance during designing and implementation of this project work.

We also want to express my sincere thanks and gratitude to Dr. Sanjeev Kumar Singh, Head of
Department (HOD), and Information Technology Department for providing me with the
facilities and for all the encouragement and support.

Finally, we express my sincere thanks to all staff members in the department of Information
Technology branch for all the support and cooperation.

Rahul Lodhi
(2000970130089)

Rahul Kumar Sachdeva

(2000970130088)

Prakhar Kumar Singh

(2000970130078)
 TABLE OF CONTENTS

1. INTRODUCTION
1.1. What Is A Dashboard?
1.1.1. Dashboard Benefits
1.2. Cryptocurrency
1.2.1. What Is A Blockchain?
1.2.2. How Blockchain Works ?
1.3. How Does Cryptocurrency Work ?
1.4. Cryptocurrency Dashboard
1.4.1. Need Of Cryptocurrency Dashboard
2. LITERATURE REVIEW
2.1. Historical Overview
2.2. Related Research Work
3. PROBLEM STATEMENT
4. IMPLEMENTATION
4.1. Methodology
4.2. Our Approach
4.2.1. Nodejs
4.2.2. Create A New React App
4.2.3. Apexcharts
4.2.4. API – Coingecko
4.2.5. Creating Components
4.2.6. Bootstrap
4.2.7. React Chart
4.3. Code
4.3.1. App.Js
4.3.2. Render Function
4.3.3. Component
4.3.3.1. Header.Js
4.3.3.2. Cardsection.Js
4.3.3.3. Chartsection.Js
4.3.4. Function For Fetching Data
5. RESULT / SNAPSHOTS
5.1. Available Coins
5.2. Header And Cards
5.3. Charts
5.4. Download Options
5.5. SVG / PNG
5.6. CSV/ Excel Sheet
6. CONCLUSION AND FUTURE WORK
6.1. Conclusion
6.2. Future Work
7. REFERENCES
 LIST OF FIGURES

Figure 1.1. A Block of Blockchain

Figure 1.2. Blockchain representation
Figure 2.1. Digital Dashboard of MS Outlook in 2010
Figure 4.1. Screenshot of Nodejs .exe
Figure 4.2. Code of fetching data from API
Figure 4.3. Code for header section
Figure 4.4. Code for cards section
Figure 4.5. Code for chart section
Figure 4.6. Demo of React Chart
Figure 4.7. Code for App.js
Figure 4.8. Code for Render function
Figure 4.9. Code for header.js
Figure 4.10. Code for CardSection.js
Figure 4.11. Code for ChartSection.js
Figure 4.12. Function for fetching data
Figure 5.1. Screenshot of all available coins
Figure 5.2. Screenshot of Header Section and Cards
Figure 5.3. Screenshot of Chart Section
Figure 5.4. All download options of charts
Figure 5.5. Three graphs in SVG/PNG format
Figure 5.6. Market price of bitcoin in excel sheet
 ABSTRACT

Crypto is really hyped area right now with lots of public interest so there is tons of opportunity
to create websites and apps that could be monetized in a number of different ways. Investors
who actively engage with more than three different cryptocurrencies are encouraged to use a
crypto tracker to manage their assets. The ultimate goal for crypto dashboards (and most other
wealth dashboards) is to give an overview of all your assets and how they play together. The
purpose of the dashboard is to use data to evaluate trends and develop data driven interventions.
This tool is available to key stakeholders including administration, quality, program leadership
and care providers. Overall goal of this project is to provide an interface which display the all
kind of information regarding crypto-currency which eventually useful in investment purposes.
In future, this project includes wealth tracking app, that allows users to track their assets from
all major investment classes (including cryptocurrency).
 1. INTRODUCTION

1.1 WHAT IS A DASHBOARD?

In business computer information systems, a dashboard is a type of graphical user interface

which often provides at-a-glance views of key performance indicators (KPIs) relevant to a
particular objective or business process. In other usage, "dashboard" is another name for
"progress report" or "report" and considered a form of data visualization. In providing this
overview, business owners can save time and improve their decision making by utilizing
dashboards.

The “dashboard” is often accessible by a web browser and is usually linked to regularly
updating data sources. Well known dashboards include Google Analytics dashboards, used on
55% of all websites, which show activity on a website; such as visits, entry pages, bounce rate
and traffic sources.

A digital dashboard or dashboard is a business intelligence tool that allows business leaders to
track, analyze and report on Key Performance Indicators (KPIs) and metrics. Modern,
interactive dashboards make it easy to combine data from multiple sources and deeply explore
and analyze the data directly within the dashboard itself.

A digital dashboard is an analysis tool that allows business users to monitor and analyze their
most important data sources in real time. With interactive data visualizations, digital
dashboards allow for an improved decision-making process and continuous growth.

The user can oversee a number of critical areas by displaying historical trends, actionable
insights, and real-time information in a digestible, presentational format. If you're curious to
present your insights in a meaningful way, online data visualization is a powerful tool to do so
indeed – data-driven dashboards offer a means of gaining access to vital information and
delivering it throughout the organization with ease.

Digital dashboards allow managers to monitor the contribution of the various departments in
their organization. In addition, they enable “rolling up” of information to present a consolidated
view across an organization. To gauge exactly how well an organization is performing overall,
digital dashboards allow you to capture and report specific data points from each department
within the organization, thus providing a "snapshot" of performance.

Dashboards offers a holistic view of the entire business as it gives the manager a bird's eye
view into the performance of sales, data inventory, web traffic, social media analytics and other
associated data that is visually presented on a single dashboard. Dashboards lead to better
management of marketing/financial strategies as a dashboard for the display of marketing data
makes the process of marketing easier and more reliable as compared to doing it manually.
Web analytics play a crucial role in shaping the marketing strategy of many businesses.
Dashboards also facilitate for better tracking of sales and financial reporting as the data is more
precise and in one area. Lastly, dashboards offer for better customer service through monitoring
because they keep both the managers and the clients updated on the project progress through
automated emails and notifications.
1.1.1 Dashboard Benefits

Visualizing data by using modern dashboard software can immediately benefit your
organization in following ways:
• Decision-making: The accessible visual nature of digital dashboards facilitates faster
data-driven decision-making in all critical aspects of the organization by empowering
users to analyze and drill down into important metrics and insights with ease.
• Accessibility: Expanding on our previous point, the fact that these kinds of dashboards
offer intuitive data visualization means that comprehensive training isn’t necessary. On
the contrary – modern dashboards are designed to be accessible and easy to navigate.
Their graphical nature allows for easy interaction with invaluable information.
• Mobility: Digital dashboards are customizable and present every single strand of
relevant information in one central location and the best platforms are also accessible
through mobile devices and apps, which means you can gain access to essential
information no matter where you are in the world.
• Business intelligence: By gaining the ability to access past, real-time, and predictive
analytics in addition to clear-cut indicators aimed at growth, evolution, and professional
development, you will enhance your team's business intelligence skills – and ultimately,
get ahead of your competitors.
• Benchmarking: Sector or industry aside, the best way to achieve or even exceed your
goals is by working to clearly define benchmarks that align with your most important
objectives. Digital-style dashboards feature dynamic visual key performance indicators
that not only serve up invaluable real-time information but will also help you gain a
deep understanding of what you need to do to meet important milestones.
• Communication: Organizational silos kill productivity and stunt innovation. The
flexible yet detailed nature of BI-based dashboards makes sharing and discussing data-
driven discoveries swift, simple, and effective. In turn, such tools encourage cross-
departmental communication while breaking down communication barriers - both of
which are essential to success in the modern age.

1.2 CRYPTOCURRENCY

A cryptocurrency, crypto-currency, or crypto is a digital currency designed to work as a

medium of exchange through a computer network that is not reliant on any central authority,
such as a government or bank, to uphold or maintain it. It is a decentralized system for verifying
that the parties to a transaction have the money they claim to have, eliminating the need for
traditional intermediaries, such as banks, when funds are being transferred between two
entities.

Cryptocurrency does not exist in physical form (like paper money) and is typically not issued
by a central authority. Cryptocurrencies typically use decentralized control as opposed to a
central bank digital currency (CBDC). When a cryptocurrency is minted or created prior to
issuance or issued by a single issuer, it is generally considered centralized. When implemented
with decentralized control, each cryptocurrency works through distributed ledger technology,
typically a blockchain, that serves as a public financial transaction database. Traditional asset
classes like currencies, commodities, and stocks, as well as macroeconomic factors, have
modest exposures to cryptocurrency returns.
1.2.1 What Is A Blockchain?

The validity of each cryptocurrency's coins is provided by a blockchain. A blockchain is a

continuously growing list of records, called blocks, which are linked and secured using
cryptography. Each block typically contains a hash pointer as a link to a previous block, a
timestamp and transaction data. By design, blockchains are inherently resistant to modification
of the data. It is "an open, distributed ledger that can record transactions between two parties
efficiently and in a verifiable and permanent way". For use as a distributed ledger, a blockchain
is typically managed by a peer-to-peer network collectively adhering to a protocol for
validating new blocks.

Figure 1.1

1.2.2 How Blockchain Works ?

• The blockchain is a digital database, composed of encrypted blocks of data which are
“chained” together and secured by complex math problems
• The math problems involving matching nonces and hashes is almost impossible to
change later — the record of previous actions on the blockchain is highly accurate and
secure from manipulation.
• The blockchain is distributed identically across different decentralized nodes, ensuring
no one organization can own or manipulate it.

Figure 1.2
1.3 HOW DOES CRYPTOCURRENCY WORK ?

Cryptocurrencies are digital currencies that use blockchain technology to record and secure
every transaction. A cryptocurrency (Bitcoin, for example) can be used as a digital form of
cash to pay for everyday items as well as larger purchases, like cars and homes. It can be bought
using one of several digital wallets or trading platforms, then digitally transferred upon
purchase of an item, with the blockchain recording the transaction and the new owner. The
appeal of cryptocurrencies is that everything is recorded in a public ledger and secured using
cryptography, making an irrefutable, timestamped and secure record of every payment.

1.4 CRYPTOCURRENCY DASHBOARD

A crypto dashboard is a digital platform that lives on a website or an app (either desktop or
mobile). Its primary function is to track your cryptocurrency accounts and coins and monitor
their historical prices and current values so that you can manage both your crypto assets and
related financial plans accordingly. The dashboard integrates with cryptocurrency exchanges
or trackers like CoinMarketCap through an API or other tool to update your crypto assets in
real-time.

1.4.1 Need Of Cryptocurrency Dashboard

Investors who actively engage with more than three different cryptocurrencies are encouraged
to use a crypto tracker to manage their assets.

The ultimate goal for crypto dashboards (and most other wealth dashboards) is to give an
overview of all your assets and how they play together, because when you have this information
in one place, you can see how your assets and accounts impact your overall financial health
and net worth. And this up-to-the-moment financial data is what gives you the insight you need
to generate the most accurate reports, forecasts, and plans for moving toward your financial
goals.
 2. LITERATURE REVIEW

2.1 HISTORICAL OVERVIEW

The original idea of Digital Dashboards emerged from the study of Decision Support Systems
(DSS) that appeared in the 1970s. But dashboards as we now know them didn’t start to appear
until during the late 90s – at the time of increasing growth of the web.

The first digital dashboard was designed in the ’80s in the form of Executive Information
Systems (EISs). But because refreshing and handling of the data were problematic, the
approach was deemed unreliable and when into hiatus until the 90s.

Data is valuable, and information gained from data is definitely worth something. But, without
an effective method for turning data into actionable information and extracting its value, even
the most comprehensive data set can be worthless. By prioritizing collected data and showing
the most critical information at a glance, digital dashboards make complex information more
understandable and immediately actionable.

Figure 2.1
In 2012, the US Census Bureau was looking to visualize a complex set of employment data for
the general public. Boost Labs digital product agency proposed a custom-built dashboard
application that would serve the Bureau’s needs best. The Census Dashboard
Application compared state employment data over time by age, industry, and location. It
presents the data in an easy to understand, interactive format.

2.2 RELATED RESEARCH WORK

In research paper, Digital dashboard for visualizing learning progress and well-being authored
by Eva Durall from Doctoral candidate at Learning Environments Research Group, Aalto
University. The main objective of their project is to analyze how information visualization can
support reflection and collaboration in learning. The design of this visual dashboard follows
Viégas and Wattenberg’s (2006) communication-minded visualizations: visualization systems
designed to support communication and collaborative analysis. The underlying idea of this
approach is that participants learn from their peers when they build consensus or make
decisions.

Since crypto-currency is based on blockchain, In research paper named Study on Blockchain

Visualization authored by Tri A. Sundara, Ideva Gaputra, Siska Aulia from Department of
Information Systems, STMIK Indonesia, Padang, Indonesia. The study was conducted through
systematic mapping process. As a methodology, systematic review generally selects relevant
primary studies and uses methods of synthesis. The data was gathered through internetbased
data collection.

In Digital dashboard as an information channel in office environments research paper authored

by Isak Gustafsson, the user-centered design(UCD) approach is used. UCD is an iterative
process that involves the users during all stages of design and development. The iterations may
vary a bit however they generally follow four phases. During the first phase an attempt to
acquire a basic understanding of the context in which a user may use the system takes place,
this is followed by specifying the users’ needs. In the third place, it is time to come up with a
design solution that meets the users’ requirements. This is followed by an evaluation phase
where an analysis between the current solution and the desired solution takes place. After the
evaluation, a new iteration begins and the four phases are repeated until the desired result is
reached.
 3. PROBLEM STATEMENT

Our goal is to design and create a Crypto Dashboard using React js and it is used to understand
and know the performance of crypto-currency over the past 1 month, 6 months and 1 year
using graphs. It’s necessary to compare different cryptocurrencies to know the best
cryptocurrency for investment , our project also provide the past 1 month, 6 months and 1 year
market price data of any crypto-currency in single digital sheet and details about investor
sentiment in crypto market and predict which crypto coin (bitcoin, ethereum, avalanche, etc.)
generate more profits, and which ones that bring losses.
 4. IMPLEMENTATION

4.1 METHODOLOGY

4.1.1 Project Specification

Software Specification :

• Visual Studio Version 1.68

• Node.js® Version 16.17.1

Hardware Specification:

• Microsoft Windows 7/8/10 (32 or 64 bit)

• 3GB RAM minimum, 8 GB RAM recommended
• 2GB of available disk space minimum
• Core processor of i3 minimum or above.

4.1.2 Languages/Platforms

• HTML: The Hyper-Text Markup Language or HTML is the standard markup language
for documents designed to be displayed in a web browser.
• JavaScript: JavaScript is a scripting language that enables you to create dynamically
updating content, control multimedia, animate images, and pretty much everything else.
• Bootstrap: Bootstrap is a free and open-source CSS framework directed at responsive,
mobile-first front-end web development. It contains HTML, CSS and JavaScript-based
design templates for typography, forms, buttons, navigation, and other interface
components.
• React: React is a free and open-source front-end JavaScript library for building user
interfaces based on UI components. It is maintained by Meta and a community of
individual developers and companies.
• ApexCharts: ApexCharts is a modern charting library that helps developers to create
beautiful and interactive visualizations for web pages.
• VS Code ES7 React-Native/JS snippets: JavaScript and React/Redux snippets in ES7+
with Babel plugin features for VS Code
• CoinGecko : Crypto API to receive crypto prices, historical market data, exchanges
trading volume and trading pairs, and other cryptocurrencies data in real time.
4.2 OUR APPROACH

4.2.1 NodeJS

We have to download NodeJS, Node.js is an open-source, cross-platform JavaScript runtime

environment.

Figure 4.1

4.2.2 Create A New React App

Create React App is a comfortable environment for learning React, and is the best way to start
building a new single-page application in React.

To create a project, run:

Create React App doesn’t handle backend logic or databases; it just creates a frontend build
pipeline, so you can use it with any backend you want. Under the hood, it uses Babel and
webpack, but you don’t need to know anything about them.
4.2.3 Apexcharts

ApexCharts is a modern charting library that helps developers to create beautiful and
interactive visualizations for web pages.

Using ApexCharts to create charts in React.js - React-ApexCharts is a wrapper component for

ApexCharts ready to be integrated into your react.js application to create stunning React Charts.
In this post, you will learn how to use React-ApexCharts component to create various charts in
your react.js application with ease.

Install the React-ApexCharts component in your React application from npm

4.2.4 API – Coingecko

CoinGecko’s independently sourced crypto data such as live prices, trading volume, exchange
volumes, trading pairs, historical data, contract address data, crypto categories, crypto
derivatives, images and more.

Figure 4.2
4.2.5 Creating Components

Header Section – It consist of various types of crypto-currency such as bitcoin, ethereum,

avalanche and more.

Figure 4.3

Card Section – This section consist cards like Market Cap Rank, Sentiment percentage, All
time High of crypto and many more.

Figure 4.4.1
 Figure 4.4.2

Chart Section- It consists of 3 charts Market Price, Market Cap and Market Volume.

Figure 4.5.1
Figure 4.5.2

Figure 4.5.3
4.2.6 Bootstrap

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-
end web development. It contains HTML, CSS and JavaScript-based design templates for
typography, forms, buttons, navigation, and other interface components.
Bootstrap-Night Quick Start:

4.2.7 React Chart

Charts are interactive, responsive and support animation, zooming, panning, events, exporting
chart as image, drilldown & real-time updates. React Chart library comes with 30+ chart types
including line, column, bar, pie, doughnut, range charts, stacked charts, stock charts, etc. With
these high performing charts, you can add hundreds of thousands of data points without causing
performance lag.

Figure 4.6
4.3 CODE

4.3.1 App.js

Figure 4.7

4.3.2 Render Function

Figure 4.8
4.3.3 Components

4.3.3.1 Header.js

Figure 4.9
4.3.3.2 CardSection.js

Figure 4.10
4.3.3.3 ChartSection.js

Figure 4.11.1
 Figure 4.11.2

4.3.4 Function for fetching data

Figure 4.12
 5. RESULT/ SNAPSHOTS

5.1 AVAILABLE COINS

Figure 5.1

5.2 HEADER AND CARDS

Figure 5.2
5.3 CHARTS

Figure 5.3

5.4 DOWNLOAD OPTIONS

Figure 5.4
5.5 SVG / PNG

Figure 5.5.1

Figure 5.5.2
5.6 CSV/ EXCEL SHEET

Figure 5.6
 6. CONCLUSION AND FUTURE WORK

6.1 CONCLUSION

Crypto is really hyped area right now with lots of public interest so there is tons of opportunity
to create websites and apps that could be monetized in a number of different ways. In the end
of project, we conclude that our project provide real-time information about crypto-currency
and pulling in and displaying data from the Coingecko API in webpage, with features like
Scalable Vector Graphics, Portable Network Graphics and Comma-separated values.

6.2 FUTURE WORK

• Build a Android application because android app are more portable.

• Include wealth tracking app, that allows users to track their assets from all major
investment classes (including cryptocurrency).
• Since the government is not involved, security and privacy plays is crucial role in
transactions.
 7. REFERENCES

1) Cryptocurrency - Wikipedia
https://en.wikipedia.org/wiki/Cryptocurrency

2) Digital Dashboard – Wikipedia

https://en.wikipedia.org/wiki/Dashboard_(business)

3) Node.js® is an open-source, cross-platform JavaScript runtime environment.

https://nodejs.org/en/

4) Visual Studio Code - Version 1.68

https://code.visualstudio.com/updates/v1_68

5) Bootstrap - CSS framework

https://getbootstrap.com/

6) Coingecko - API
https://www.coingecko.com/

7) React Documentation
https://reactjs.org/docs/create-a-new-react-app.html

8) Digital dashboard for visualizing learning progress and well-being (researchgate.net)

9) Digital dashboard as an information channel in office environments

http://www.diva-portal.org/smash/get/diva2:1503045/FULLTEXT01.pdf

10) Study on Blockchain Visualization

http://joiv.org/index.php/joiv/article/view/23/18