hliejun's Portfolio

TECHNOLOGY

BUILD

React

Redux

SASS

Babel

Webpack

Express

TOOLS

NPM

ESLint

SASSLint

Postman

SwaggerHub

PLATFORMS

Google Cloud

GitHub Pages

ABOUT

DESCRIPTION

Ethereum Explorer is a responsive web application designed for consumers to view their cryptocurrency transactions by account(s). In the minimum viable product, it serves users to browse their transaction history in a ledger list, as well as view each transaction in details. It offers several features that improves the browsing experience relative to conventional block explorers.

MOTIVATION

I created Ethereum Explorer as part of an interview exercise with TenX, a FinTech startup. It soon became a mini-project for me to learn more about cryptocurrency and blockchain, as well as hone my web development skills. Another key objective that I had for this project was to explore some neat features in React such as Hooks, Portals, Contexts, Lazy, Suspense, HoC, etc.

CHALLENGES

I spent a great deal of time optimising the browsing experience for transaction history. Considering that the length of the ledger could be substantial due to frequent block data transactions, loading huge volumes of transaction cells could be resource demanding without pagination or buffering techniques, especially on on lower-end devices. I had to decide on the best approach for each desktop and mobile environments. I also had to implement the buffering mechanism as I found the external libraries limiting. I ended up improvising a lazy list that buffers on scroll and a paginated table memoised by React.

Often, I also find myself torn between using the same responsive components for mobile and desktop environment, and using dedicated components designed specifically for different size classes. Responsive components are typically accompanied by design constraints and require extra styling effort, whereas dedicated components could leave a larger bundle footprint. With React Lazy, the latter became a more affordable luxury.

DESIGN

PROJECT STRUCTURE

This application uses the React-Redux architecture to achieve a uni-directional data flow, with views as a function of states. Notice that the business logic contained by Redux is independent of the view logic. The views are dependent on Redux store and shared resources, while the Redux store is dependent on the API gateway to aggregate results from a bucket of third-party API services.

Each page is modularised as a scene component, composed of various smaller modules that can be commonly shared across different scenes. The scenes are organised by the router which determines the resource paths and are accessed using router links.

The API gateway is designed to adapt different API services to a fixed contract with the redux application. This allows services to be substituted or changed at the gateway level without affecting the consumption interface.

FEATURES

SINGLE PAGE APPLICATION

As a single page application, the browsing experience on Ethereum Explorer is relatively faster than traditional alternatives. Pages remain completely accessible by URL routes, without having to fetch web templates repetitively.

RESPONSIVE COMPONENTS

Components are designed to be responsive across various screen sizes and orientations, delivering a mobile-first experience consistent on all devices. For more complex features such as transaction history, dedicated components are designed and served exclusively to mobile and desktop users, providing the best interactive experience customised for each size classes.

BUNDLING & LAZY LOADING

Ethereum Explorer sheds the bulky bundle size of a responsive single page application with bundle splitting using Webpack React.lazy. On-demand resources are loaded asynchronously just-in-time, improving page load speeds. Components are also memoised and buffered to reduce renderings when mounted on screen.

FILTER & SORT

You can filter the transactions history by type and order them by date and amount. Redundancies to access filter and sort are built into the UI to ensure accessibility on various environments and to meet the preferences of different users.

URL QUERIES

Page states such as transaction id, filter and sort parameters can be edited directly from the URL query string, allowing users to be more efficient at browsing, bookmarking and sharing stateful queries.

LOCALISED RATES

Ethereum can be converted and localised into one of the 6 currencies below, allowing users to find the content more relatable and meaningful:

China Yuan (CNY)
Great Britain Pound (GBP)
Japan Yen (JPY)
Korea Won (KRW)
Singapore Dollar (SGD)
United States Dollar (USD)

CACHING

Settings and last-fetched data are cached into the session or local storage, allowing users to persist their preferences and browsing context between application sessions.

COPY TO CLIPBOARD

Instead of copying transaction data field by field, you can copy the entire transaction in a single-click. The output is formatted neatly and hierarchically by tabs.

DARK MODE

You can also optionally turn on dark mode if you prefer a dark theme or are viewing under low-light conditions.

REFERENCES

Making Sense of React Hooks Rationale behind React Hooks and walkthrough on its usage.

Advance React Guide: Code Splitting ReactJS documentation on code splitting using React.lazy and other advanced features.

Formik: Build Forms in React, Without Tears Inspiration for using render props and functional children to build declarative forms.

React Redux Basic Tutorial Documentation and walkthrough on using Redux with ReactJS.

Getting Started With Redux Video tutorials and course on using Redux with Dan Abramov.

ReactJS: Deployment on GitHub Pages Guide on deploying a create-react-app application on GitHub Pages.

Deploy Single Page Application on GitHub Pages Guide on deploying ReactJS SPAs on GitHub Pages.

Dynamic App Themes with CSS Variables and JavaScript Guide on using CSS variables with SASS to dynamically apply style changes to a React application.

Etherscan API Documentation API documentation for Etherscan ethereum blockchain data access. Ethereum Explorer is powered by Etherscan.io APIs.

Open Exchange Rates API Documentation API documentation for Open Exchange Rates providing live and historical foreign exchange (forex) rates.

Behance: Tran Mau Tri Tam Attribution to UX/UI Web Designer Tran Mau Tri Tam for isometric mockup design template used in project thumbnail.

Return

Widgets for WhatsApp™