Skip to content
Charting CryptoCurrencies
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
components
flow-typed/npm
helper
pages
src
types
.babelrc
.eslintrc
.flowconfig
.gitignore
1.gif
Procfile
README.md
digital_currency_list.csv
env-sample
package.json
yarn.lock

README.md

CryptoChart

CryptoChart is a web application in which users can see recent price trend lines of different cryptocurrencies and compare them with a chart. Additionally, live updates occur when other users adds or removes a cryptocurrency.

User Stories

  • I can view a graph displaying the recent trend lines for each added cryptocurrency.
  • I can add new cryptocurrencies by their symbol name.
  • I can remove cryptocurrencies.
  • I can see changes in real-time when any other user adds or removes a cryptocurrency.

Video Walkthrough

Here's a walkthrough of implemented user stories:

GIF created with Giphy Capture.

Libraries

  • Express.js
  • React
  • Next.js
  • Flow
  • Redis
  • Socket.IO
  • Recharts
  • Alpha Vantage API
  • Material UI
  • Moment

Getting Started

Prerequisites

Steps

  • Run npm install or yarn.
  • In the root directory, create a .env file (or rename the env-sample file to .env) and place the following:
    • PORT=PORT NUMBER FOR EXPRESS
    • REDIS_HOST=LOCAL REDIS HOST IS: 127.0.0.1
    • REDIS_PORT=LOCAL REDIS PORT IS: 6379
    • REDIS_PASSWORD=LOCAL REDIS PASSWORD IS: PASSWORD
    • ALPHA_VANTAGE_API_KEY=SIGN UP TO GET API KEY AT https://www.alphavantage.co/
  • Run redis-server to start Redis.
  • In another terminal, run npm build or yarn build.
  • Then run npm dev or yarn dev.
  • Navigate to localhost:PORT NUMBER IN ENV in your browser.
You can’t perform that action at this time.