crypto-dashboard-ui
Crypto currency app, we can build screen like -
Name of the currency
Its price - we will do streaming for price not static one.
Movement from yesterday - Dynamic as price is moving.
Graph showing that currency's performance over time - We need Api that provide this data
Buy Button
Last list of confirmed trades. Blotter that showing real time status of trade lifecycle. We can mock this.
First, install all the dependencies and then run the development server:
npm i
npm run dev
Open http://localhost:3000/ in the web browser to see the result
Install openfin-cli
npm install -g openfin-cli
Docs:
- Openfin cli: https://developers.openfin.co/of-docs/docs/openfin-cli-tool
- Openfin JS API Doc: https://cdn.openfin.co/docs/javascript/stable/index.html
- Openfin Docs: https://developers.openfin.co/of-docs/docs/what-is-openfin
- Openfin Notification: https://developers.openfin.co/of-docs/docs/overview-notifications
To launch an application via command line use below command:
openfin --launch --url http://localhost:3000
npm script to run the application
npm run openfin
- APIMocker is used to mock APIs. API response is served as a static file stored.
- Static files are present at location apiMocker/mocks.json.
- First install api mocker using below npm command
sudo npm install -g apimocker
- Change location of mock files at apiMocker/config.json line number 3 like this -
"mockDirectory": "~/project/ReactConf/crypto-dashboard-ui/apiMocker/mocks",
- Run api mocker - make sure path to apiMocker is correct.
cd <crypto-dashboard-ui>
node /usr/local/lib/node_modules/apimocker/bin/apimocker -c ./apiMocker/config.json
Expected console logs like
crypto-dashboard-ui % node /usr/local/lib/node_modules/apimocker/bin/apimocker -c ./apiMocker/config.json
[apimocker] Loading config file: /Users/amandeeprehal/project/ReactConf/crypto-dashboard-ui/apiMocker/config.json
[apimocker] Set route: GET assets : allCurrencies.json 5 ms
[apimocker] Set route: GET assets/:currencyName/ : <no mockFile> 20 ms
[apimocker] with switch on param: currencyName
[apimocker] Set route: GET assets/:currencyName/history : <no mockFile> 20 ms
[apimocker] with switch on param: currencyName
[apimocker] Mock server listening on port 7878
- Comment coincap api and uncomment local api in file config.js -
COINCAP_URL: 'https://api.coincap.io/v2'
//COINCAP_URL: 'http://localhost:7878'
- Finally run
npm run dev