0x Tracker Client

Single page application built using React which provides an interface for exploring data from the 0x Tracker API.

Contents

• Requirements
• Getting Started
• Tech Stack
• Project Structure
• NPM Scripts
• Continuous Integration
• Maintainers
• License

👮‍♂️ Requirements

Whilst the application is served as a static web application at https://0xtracker.com, you'll need Node.js installed if you wish to build the application sources. A .nvmrc file is provided for the convenience of using NVM.

It's also recommended that you use Prettier and ESLint editor plugins if contributing to the project. Pre-commit hooks are in place which will prevent code which doesn't conform to Prettier/ESLint rules from being committed.

🐣 Getting Started

The project is configured to work with https://api.0xtracker.com out of the box so getting started is simple. Run the following terminal commands to install dependencies, configure your environment, and launch the development server:

$ npm install
$ cp .env.example .env
$ npm start

🦄 Tech Stack

The project has a fairly extensive set of dependencies, each with a particular purpose. If you plan to contribute to the project then its worthwhile familiarising yourself with most of them.

Core Libraries

• React - Manages UI and dom manipulation.
• React Router - Used for managing application routes.
• Axios - Lightweight HTTP client used for fetching API data.
• Lodash - Powerful general purpose utility belt for writing clean code.
• Date-fns - Modern javascript date utility library which encourages immutable code and plays nicely with Lodash FP.

Styling & UI

• Bootstrap/Reactstrap - UI component library which serves as the basis for most page elements in the project.
• Styled Components - CSS-in-JS solution used for styling custom components.
• Recharts - React charting library used for rendering all charts on the site.

Build Process

• Webpack - The heart of the build process, webpack coordinates the execution of various transpiling, bundling, optimisation, and development tools.
• Babel - Handles transpilation of modern javascript into browser friendly code as well as some code optimisations. By using the env preset and babel polyfill in conjunction with Browserslist, code is transpiled to ensure compatibility with most visitors browsers.
• Browserslist - Defines the list of browsers that need to be supported by Babel's transpilation process.

Testing & Linting

• Jest - All-in-one Javascript testing framework which executes unit & integration tests.
• react-testing-library - Simple and complete React DOM testing utilities that encourage good testing practices.
• timekeeper - Simplifies the testing of time dependant code by allowing you to mock Date.now.
• ESLint - Provides linting for Javascript code ensuring common code quality issues are surfaced and preferred coding conventions are automated.
• Prettier - An opinionated code formatter which ensures consistent formatting across the codebase.
• husky - Ensures git pre-commit hooks are in place to enforce ESLint & Prettier rules.
• lint-staged - Speeds up pre-commit hooks by ensuring only the modified files are linted.

Developer Experience

• Storybook - Provides an isolated React component development environment.
• React Hot Loader - Enables hot reloading of React components during development.
• Error Overlay Webpack Plugin - Displays runtime errors where you'll see them.
• unused-files-webpack-plugin - Keeps the codebase clean by alerting any unused files
• Webpack Bundle Analyzer - Used for analyzing bundle sizes.
• Renovate - Helps keep dependencies up to date by monitoring for updates and automatically opening pull requests.

🌳 Project Structure

The project structure is designed to minimize the number of directories, increase discoverability and ensure related code is grouped together. Feature code is grouped based on what "feels right" and is subject to refactoring over time.

If a convention exists for locating configuration files related to developer tooling then it should be followed (e.g. .babelrc or .eslintrc.js).

• config - Tooling configuration which doesn't have a conventional location.
• public - Static code files. This directory is combined with bundled assets when building for production and whilst using the development server.
• src - Application specific code and test files.
  • components - Shared or non-feature specific React components.
  • features - Feature code is grouped together to ensure import paths are kept short and reduce navigation.
    • feature
      • components - React components, each component should be in a separate file.
      • img - Any images related to React components.
      • util - Helper functions to support components, models and selectors.
      • constants.js - Constants should always be named exports.
      • get-routes.js - Provides routes to be used by Redux Router.
      • prop-types.js - Common prop-types which get used across multiple React components.
  • img - Any images related to shared React components.
  • styles - Helpers and constants related to styling (e.g. colors).
  • test-util - Helpers related to automated tests.
  • util - All other helper functions used to support the codebase.
  • constants.js - Shared constants. Each constant should be a named export.
  • index.js - Application entry point.
  • prop-types.js - Common non-feature specific prop-types.

🤖 NPM Scripts

A number of NPM scripts are provided for automating common tasks.

• browsers:list - List out the projects supported browsers.
• build - Build a production ready distribution into the dist folder.
• build:analyze - Build for production and launch Webpack Bundle Analyzer against the resulting bundle.
• build:serve - Build for production and serve locally.
• lint - Lint all code files in the project.
• serve - Serve the last production build locally.
• start - Start the development server.
• storybook - Start the Storybook application.
• test - Run unit/integration tests and produce coverage report.
• test:watch - Run unit/integration tests in watch mode.

🚨 Continuous Integration

Continuous integration for the project is handled by Travis CI which runs linting, tests, and builds the sources for every pull request. Merged pull requests are automatically deployed to production.

Hosting is provided by Netlify which means every pull request gets a deploy preview where the PRs changes can be previewed in a "close to live" environment. Look for the Netlify bot comment on PRs once the build has finished.

👨‍💻 Maintainers

• Craig Bovis (@cbovis)

Supporters

Infrastructure for 0x Tracker is generously supported by these companies.

Bugsnag

CryptoCompare

Netlify

👩‍⚖️ License

Apache 2.0