https://github.com/smittenn/blockchain-charts-ux
https://github.com/smittenn/blockchain-charts-ux
chartsjs crypto react statistics ui ux
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/smittenn/blockchain-charts-ux
- Owner: smittenn
- Created: 2018-02-17T07:59:30.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-20T00:35:12.000Z (over 8 years ago)
- Last Synced: 2025-08-05T06:31:46.618Z (11 months ago)
- Topics: chartsjs, crypto, react, statistics, ui, ux
- Language: JavaScript
- Homepage: https://erchsm.github.io/blockchain-ux/
- Size: 354 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Blockchain.com UX Challenge
For Blockchain.com's UX Challenge I was tasked with creating a better user expereince on part of their charts page, [blockchain.info/charts](https://blockchain.info/charts), using React.
To create a better experience I used a chart library called [Chart.js](http://www.chartjs.org/) and created loading states for every chart. Additionally I created a reusable and flexible card slider component that would allow for the content to easily change. This component allowed for a better mobile experience and better use of page real estate.
### Install & Run
To run the app you'll need node and npm. Install whichever way you please, I use homebrew:
```
brew install node
```
Then you will also need to install gulp:
```
npm install -g gulp
```
After you have cloned the repo, install the rest of the packages from the directory:
```
npm install
```
Run the project with gulp:
```
gulp
```
### Built with
* [React](https://reactjs.org/) - The web framework used
* [Gulp](https://gulpjs.com/) - Building and Serving
* [react-chartsjs-2](https://www.npmjs.com/package/react-chartjs-2) - Charts.js React Wrapper
* [SASS/Autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) - CSS Preprocessor with automatic browser prefixing
### How it could be better!
* [gulp-iconfont](https://www.npmjs.com/package/gulp-iconfont) I started on some Iconography that would help make the Stat Cards more compelling using the SVG -> Icon Front gulp task.
* More Chart.js finessing. I had an idea to make a slider UI for the chart Timespans so that the user could control how far back they are seeing in the chart.