# Binance

###### tags: `Binance ...`

### About

**Binance Notifier** can list all market crypto presenting prices converted to BNB. Allows user to create notify browser alarms and alarms history. Binance Notifier use the best practices of Material Design Components and Binance API Requests (extending 2 year old proyect by [1])

Video : https://youtu.be/AAKi4NN20sM

[](https://youtu.be/AAKi4NN20sM)

This App is an extention of 2 years ago project develop by [1] who propose a public API to get live 24h price change data for all crypto trading pairs.

This implementation extends options using Vue.js, Node.js adding new funcionalities.

## New Features

- [x] **View prices converted to BNB**
- [x] **Material Design Components** for Vue (most used UI Libraries) https://github.com/vuematerial/vue-material

- [x] **Price of BNB and Markee** from @coingecko
- [x] **Wigdet Library for Binance** for Vue

- [x] **Alarms and History APP redesign** of GUI in Vue
- [x] **Binance API Request** with URL testConnections
- [x] **Binance-Fiat-Widget**
https://www.npmjs.com/package/binance-fiat-widget
- [x] **Spotify Podcast Binance** in Vue components

- [x] **Material Design icon Components** https://github.com/robcresswell/vue-material-design-icons

### Snapshot

Main View (new feature : GUI Material design:rocket:
Info of Crypto High/Low Volume ...etc :(new )


Start Watching by Price/Volume ...etc


History Alarms (new GUI Desing (MD components))


Browser Notifications


Prices Market Widget (new feature) :rocket by @coingecko
Prices Market of BNB by @coingecko

Test Binance Networks Services
Binance PodCast from Spotity


Order by Options


Video BlockChain Week

Saved Alarms


Buy BNB (official widget)


Existing Features

Notifications

General Settings (with remove not working API functionalities)


Video Link
https://youtu.be/AAKi4NN20sM

### Run using

npm run dev

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },

## Dependencies

  "binance-fiat-widget": "^1.1.14",
    "dotenv": "^8.2.0",
    "npm": "^7.5.2",
    "v-video-embed": "^1.0.8",
    "vue": "^2.5.22",
    "vue-material": "^1.0.0-beta-15",
    "vue-material-design-icons": "^4.11.0"

---

[GitHub-Sync]: https://hackmd.io/c/tutorials/%2Fs%2Flink-with-github
[HackMD-it]: https://hackmd.io/c/tutorials/%2Fs%2Fhackmd-it
[Book-mode]: https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-create-book
[Slide-mode]: https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-create-slide-deck
[Share-Publish]: https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-publish-note

#References
[1 ] https://github.com/rainner/binance-watch