Crypto Tracker - React JS

2022-02-26

A web app that display the latest data for the most popular cryptocurrencies; It has a home page and a detail page where you can find historical price data for the selected crypto.

Technologies used:

React JS
Chart JS
MUI

See it live:

LIVE TEST

Three iPhones showing the crytocurrency app

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.

The home screen of the crytocurrency tracker

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.

The detail screen of the cryptocurrency tracker, which shows an intractive chart with historical data

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.

A GIF of an iPhone showing the app switching between dark and light mode

A GIF of an iPhone showing the crytocurrency app being used