---
# System prepended metadata

title: Binance
tags: [Binance ...]

---

# 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


[![Watch the video](https://i.imgur.com/w8mZQ0S.png)](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: 
![](https://i.imgur.com/Q5wLXRe.png)
Info of  Crypto High/Low Volume ...etc :(new )


![](https://i.imgur.com/TfWyKLz.png)

Start Watching by Price/Volume ...etc

![](https://i.imgur.com/c3DfofE.png)


History Alarms (new GUI Desing (MD components))

![](https://i.imgur.com/w8mZQ0S.png)
![](https://i.imgur.com/yvfa2Vv.png)

Browser Notifications

![](https://i.imgur.com/wtWe4Oj.png)


Prices Market Widget (new feature) :rocket by @coingecko
![](https://i.imgur.com/o3flcxO.png)
Prices Market of BNB by @coingecko
![](https://i.imgur.com/ZmqFq9n.png)

Test Binance Networks Services
![](https://i.imgur.com/LiJnuX7.png)
Binance PodCast from Spotity 

![](https://i.imgur.com/cTfzCnH.png)

Order by Options

![](https://i.imgur.com/nQcVBea.png)

Video BlockChain Week 
![](https://i.imgur.com/UQmkWlh.jpg)

Saved Alarms 

![](https://i.imgur.com/JUGqxkM.png)

Buy BNB (official widget)

![](https://i.imgur.com/WoW8ItW.png)

Existing Features

Notifications 
![](https://i.imgur.com/eRZXQyb.png)

General Settings (with remove not working API functionalities)

![](https://i.imgur.com/e9apLXQ.png)

Video Link 
https://youtu.be/AAKi4NN20sM


### Run using


```
npm run dev
```

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

```json=
  "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