Crypto Viewer

Mobile App to track crypto-currencies & your assets

Summary

Description

Crypto-Viewer is a utility app to track your favourite crypto-currencies. It's fast, secure, customizable...
By adding your current assets, you can track your wallet value at everytime. You have also access to a pratcical set of tools to watch for current and past values of a crypto-currency.

Tags

Crypto_CurrenciesMobile_AppUI

Technologies

React NativeExpoTypeScript

Presentation

Crypto-Viewer is a light-weight crypto tracker.
FastCrypto-Viewer uses performant Coinbase APIs SecureFiles are only stored locally on your device ManageableAdd your wallet to track your assets CustomizableChange your currency from the settings BeautifulModern & brand-new components, custom fonts

Branding


Money, Token

Stocks, Investment, Profit

Crypto-Viewer

Key Functionalities

The user can visualize different cryptos, and see details about them:
  • 24-hour stats: min prize, max prize, volume
  • Current Price: buy price, sell price
  • Past graph (default scale: 1 week, possible scales: 1day, 3days, 1week, 1month, 3months, 6months)
  • 24h percentage

Personalize the app: Select the date format (day/month or month/day) and select the currency (euro, dollat, bitcoin).

Add some crypto to their wallet: track their assets by adding your currencies

Wireframing

Colors

Purple: Mystery, Vigilant #7200E3
Blue: Technology, Trust, Support #005BE3
Gray: Power, Protection, Security #B4B4B4

Fonts

App Font Default System Font (Roboto in most cases)
Custom Icon Font Icon Font built with WebPack from FontAwesome icons (Pro license)
Crypto-Currencis Font 428 crypto icons from 'crypto-currencies-font'

Loaders

Main Loader Loader used when loading an item list
Coloured loaders Graph loader, cloured in the official crypto color

Final Logo

Screenshots

Technologies

React NativeA good framework for cross-platform apps
TypeScriptStrongly typed apps
ExpoA set of pre-defined components and powerful tools
Victory Chart NativeA powerful library for interative graphs
Moment JSA versatile library to manage datetimes

Services

Network ServiceTo interact with CoinBase endpoints
The goal: if I have to migrate to another data provider, only this service should be redeveloped.
Storage ServiceTo interact with device's storage to store the wallet and user's preferences.
The goal: if I have to change the storage strategy, only this service should be redeveloped.
Utils ServiceA bunch of utility functions to manage dates, colors, labels...
The goal: centralize common operations.

APIs

Coinbase & Coinbase Pro APIsA market reference for crypto-currencies

Types

This App is developed with strong variable typing strategy in mind. This provides an easier maintenance and understandability.

Props

App Component is in charge of loading data from storage, including preferences and user's wallet. It will then pass the quote to every child component.

CryptoList receives the changeTab function property. It needs it to load the CryptoDetails view when the user clicks a crypto.

Wallet receives the changeTab function property : it needs it to load the CryptoDetails view when the user clicks a crypto. It receives also the wallet (loaded from the storage) and the changeWallet function proprety that is called when the user modifies its wallet.

CryptoDetails receives the crypto to view, and the dateFormat loaded from the storage.

Settings receives the changeQuote and changeDateFormat function properties to modify user's settings, and the selected dateFormat loaded from the storage.

Font Loading

Fonts are loaded asynchronously using the expo-font package. In the same time, preferences and wallet are loaded from the storage to optimize load time.