For Blockchain.com's UX Challenge I was tasked with creating a better user expereince on part of their charts page, blockchain.info/charts, using React.
To create a better experience I used a chart library called Chart.js 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.
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
- React - The web framework used
- Gulp - Building and Serving
- react-chartsjs-2 - Charts.js React Wrapper
- SASS/Autoprefixer - CSS Preprocessor with automatic browser prefixing
- 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.