React Bitcoin Monitor

An app that monitors changes in the Bitcoin Price Index (BPI).

By default, the BPI will be shown for USD, GBP, and EUR. Optionally, one can select ones own currency to display in addition to the 3 aforementioned currencies.

Bitcoin Monitor makes use of the CoinDesk Bitcoin Price Index API. Go here for more price information by CoinDesk.

Go here for live demo.

The application is composed of the following components:

• Header - A heading that displays application title

• BitcoinMonitor - The primary (root) component that manages state for itself and all underlying components. It is also responsible for connecting to BitcoinService to retrieve Bitcoin Price Index data.

• Display - Displays the Bitcoin Price Index data for USD, GBP, and EUR as a default. Also allows one to select a currency as a fourth price to monitor.

• Indicator - Used by the Display component, it displays an indicator that shows if the current price is up or down from previous price.

Component Diagram

The following services are used to obtain Bitcoin Price Index data:

• BitcoinService

  A wrapper that is responsible for integrating with the CoinDesk Bitcoin Price Index API

Service Diagram

Features:

• Show BPI for USD, GBP, and EUR
• Show BPI for any custom selected currency

This project also demonstrates:

• a typcial React project layout structure
• babel setup and configuration
• webpack setup and configuration
• eslint setup and configuration
• SCSS setup and configuration
• CoinDesk Bitcoin Price Index API integration

Screenshots:

...	...

Developed With

• Visual Studio Code - A source code editor developed by Microsoft for Windows, Linux and macOS. It includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring
• Node.js - Javascript runtime
• React - A javascript library for building user interfaces
• Babel - A transpiler for javascript
• Webpack - A module bundler
• SCSS - A css metalanguage
• Bootstrap 4 - Bootstrap is an open source toolkit for developing with HTML, CSS, and JS
• Axios - Promise based HTTP client for the browser and node.js
• CoinDesk Bitcoin Price Index API - Provides Bitcoin Price Index data
• Surge - Static web publishing for Front-End Developers

Related Projects

• react-starter

  A basic template that consists of the essential elements that are required to start building a React application

• react-clicker

  A basic React app that allows one to increase, decrease, or reset a counter

• react-clock-basic

  A basic clock that displays the current date and time

• react-timer-basic

  A basic timer that will start a countdown based on an input of time in seconds

• react-timer-advanced

  A countdown timer that offers an advanced UI experience

• react-masterminds

  A basic game of guessing a number with varying degrees of difficulty

• react-movie-cards

  A basic application that displays a list of movies as a list of cards

• react-calculator-standard

  A calculator that provides the essential arithmetic operations, an expression builder, and a complete history of all expressions

• react-weather-standard

  A weather application that displays the current weather, daily forecasts, and hourly forecasts based on your current geolocation

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

The following software is required to be installed on your system:

• Node 8.x
• Npm 3.x

Type the following commands in the terminal to verify your node and npm versions

node -v
npm -v

Install

Follow the following steps to get development environment running.

• Clone 'react-bitcoin-monitor' repository from GitHub

  git clone https://github.com/drminnaar/react-bitcoin-monitor.git

  OR USING SSH

  git clone [email protected]:drminnaar/react-bitcoin-monitor.git

• Install node modules

  cd react-bitcoin-monitor
  npm install

Build

• Build application

  This command will also run ESLint as part of build process.

  npm run build

• Build application and start watching for changes

  This command will also run ESLint as part of build process.

  npm run build:watch

Run ESlint

• Lint project using ESLint

  npm run lint

• Lint project using ESLint, and autofix

  npm run lint:fix

Run

• Run start

  This will run the 'serve' npm task

  npm start

• Run webpack dev server

  npm run serve:dev

• Alternatively run live-server (simple development http server with live reload capability)

  npm run serve

Versioning

I use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Douglas Minnaar - Initial work - drminnaar