Crypto Tracker

2/26/2022

react
chart js
mui
pwa

Features

  • Neumorphism UI style.
  • Dark and light mode.
  • Latest Cryptocurrency pricing data thanks to Nomics.
  • Interactive Chart with historical data that can be filtered to different date ranges.

Home screen

The home screen lists 20 of the most popular cryptocurrencies, each crypto shows the latest pricing data and percentage trend for 24 hours.

Crypto tracker home in dark and light mode

Detail screen

The detail screen mainly features an interactive chart made with Chart JS, as you hover or touch the chart, you can see details about the price for the date you are selecting.

Below the chart you can find a button group which you can use to toggle between the available date ranges.

Crypto tracker detail about crypto currency in dark and light mode

Interactions

For this project I wanted to keep the interactions of the app as minimal as possible; I mainly spent time working on the Chart interaction which can still be improved, particularly in mobile.

Down below is a GIF of the interactions I came up with, but I encourage you to try the live website for the best experience.

Switching between dark and light mode Getting latest crypto data