{"id":17865494,"url":"https://github.com/smittenn/blockchain-charts-ux","last_synced_at":"2026-04-20T19:06:48.873Z","repository":{"id":75644034,"uuid":"121837741","full_name":"smittenn/blockchain-charts-ux","owner":"smittenn","description":null,"archived":false,"fork":false,"pushed_at":"2018-02-20T00:35:12.000Z","size":363,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-05T06:31:46.618Z","etag":null,"topics":["chartsjs","crypto","react","statistics","ui","ux"],"latest_commit_sha":null,"homepage":"https://erchsm.github.io/blockchain-ux/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/smittenn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-17T07:59:30.000Z","updated_at":"2018-02-17T08:39:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"a45f524b-b3d7-4935-98ac-873e48c5f026","html_url":"https://github.com/smittenn/blockchain-charts-ux","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/smittenn/blockchain-charts-ux","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smittenn%2Fblockchain-charts-ux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smittenn%2Fblockchain-charts-ux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smittenn%2Fblockchain-charts-ux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smittenn%2Fblockchain-charts-ux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smittenn","download_url":"https://codeload.github.com/smittenn/blockchain-charts-ux/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smittenn%2Fblockchain-charts-ux/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32061285,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T11:35:06.609Z","status":"ssl_error","status_checked_at":"2026-04-20T11:34:48.899Z","response_time":94,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chartsjs","crypto","react","statistics","ui","ux"],"created_at":"2024-10-28T09:21:52.253Z","updated_at":"2026-04-20T19:06:48.857Z","avatar_url":"https://github.com/smittenn.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Blockchain.com UX Challenge\n\nFor 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.\n\nTo 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.\n\n### Install \u0026 Run\n\nTo run the app you'll need node and npm. Install whichever way you please, I use homebrew:\n\n```\nbrew install node\n```\n\nThen you will also need to install gulp:\n\n```\nnpm install -g gulp\n```\n\nAfter you have cloned the repo, install the rest of the packages from the directory:\n\n```\nnpm install\n```\n\nRun the project with gulp:\n\n```\ngulp\n```\n\n### Built with\n\n* [React](https://reactjs.org/) - The web framework used\n* [Gulp](https://gulpjs.com/) - Building and Serving\n* [react-chartsjs-2](https://www.npmjs.com/package/react-chartjs-2) - Charts.js React Wrapper\n* [SASS/Autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) - CSS Preprocessor with automatic browser prefixing\n\n\n### How it could be better!\n\n* [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 -\u003e Icon Front gulp task.\n* 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmittenn%2Fblockchain-charts-ux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmittenn%2Fblockchain-charts-ux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmittenn%2Fblockchain-charts-ux/lists"}