CRYPTO DASHBOARD USING NODE JS AND REACT

Rahul Kumar Sachdeva Rahul Lodhi Prakhar Kumar Singh

Information Technology
Galgotias College Of Engineering And
Technology
Greater Noida, India
rahul.20gcebit011@galgotiacollege.edu
Information Technology
Galgotias College Of Engineering And
Technology
Greater Noida, India
rahul.20gcebit021@galgotiacollege.edu
Information Technology
Galgotias College Of Engineering And
Technology
Greater Noida, India
prakhar.20gcebit080@galgotiacollege.e
du

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.
I. INTRODUCTION
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. 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.
II. LITERATURE REVIEW
B. Related Work
Today if you stumble upon a Digital Dashboard, it will
most likely be one of these three types: special
applications, web apps and desktop widgets. Just like a
dashboard in a car, a digital version is meant for
monitoring all major indexes. That’s what all these
indicators, diagrams, numbers and designations are for.
These days Dashboards can be visually stunning. But the
major focus would still have to be on the contents. Thus,
the key to designing a perfect dashboard is the cold-
blooded calculation. If you’re able to put all the dots
together within one brief look, then you’re looking at a
great Dashboard. Don’t forget to make it pretty, though,
and try to achieve maximal effect with minimal effort.
III. PROBLEM STATEMENT
Our goal is to design and create a Crypto Dashboard using
ReactJS to provide answers to what are 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.

A. History IV. IMPLEMENTATION

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 pieces of software
were created in-house for internal use only. Microsoft
came up with their own concept in the spring of 1999. The
actual implementation of the concept was the Digital
Dashboard Starter Kit, which they presented at the
KMWorld'99 later in September. The dashboard has
always been an interface, it just wasn’t referenced as such.
Referencing the UI as a dashboard is identical to that of an
automobile’s dashboard. It’s a central location for
operators to monitor major functions at a glance via an
instrument panel.However, the original idea for a digital
dashboard was founded through research from decision
support systems in the ’70s. The first of which 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. Apple’s
introduction of the GUI changed the face of computing and
brought digital dashboards back from retirement. The need
to display real-time vital statistics for users, such as
banking or internet speeds (which were a blazing 40–50
kilobits per second), all required a dashboard.
A. Methodology
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.
Languages/Platforms Used:
• 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-

XXX-X-XXXX-XXXX-X/XX/$XX.00 ©20XX IEEE

 first front-end web development. It contains F. React Chart
HTML, CSS and JavaScript-based design
templates for typography, forms, buttons, Charts are interactive, responsive and support animation,
navigation, and other interface components. zooming, panning, events, exporting chart as image,
• React: React is a free and open-source front-end drilldown & real-time updates. React Chart library comes
JavaScript library for building user interfaces with 30+ chart types including line, column, bar, pie,
based on UI components. It is maintained by doughnut, range charts, stacked charts, stock charts, etc.
Meta and a community of individual developers With these high performing charts, you can add hundreds
and companies. of thousands of data points without causing performance
• ApexCharts: ApexCharts is a modern charting lag.
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.
B. NodeJS
We have to download NodeJS, Node.js is an open-source,
cross-platform JavaScript runtime environment. Node.JS is
an open-source, cross-platform JavaScript runtime
environment.
G. Bootstrap
C. ApexCharts Bootstrap is a free and open-source CSS framework
directed at responsive, mobile-first front-end web
ApexCharts is a modern charting library that helps
development. It contains HTML, CSS and JavaScript-
developers to create beautiful and interactive visualizations
based design templates for typography, forms, buttons,
for web pages.Using ApexCharts to create charts in
navigation, and other interface components.
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, H. FIGURES
you will learn how to use React-ApexCharts component to
create various charts in your react.js application with ease. I. Available Coins

D. 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.

E. Some Common Mistakes

Our goal is to design and create a Crypto Dashboard using
React js to provide answers to the following questions:
• How to get the past 1 month, 6 months and 1 year
market price data of any crypto-currency in single
digital sheet ?
• What are 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.
• How to know the investor sentiment in crypto
market ?
• Which crypto-currency (bitcoin, ethereum,
avalanche, etc.) generate more profits, and what
ones that bring losses?
II. Header And Cards 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/
III. Charts [7] React Documentation
https://reactjs.org/docs/create-a-new-react-app.html

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.
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.
FUTURE SCOPE
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.