Skip to content
This repository has been archived by the owner on Aug 12, 2023. It is now read-only.

React single page application which powers the frontend of 0x Tracker

License

Notifications You must be signed in to change notification settings

0xTracker/0x-tracker-client

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

0x Tracker Client

Build Status Dependencies Codecov

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

Contents

👮‍♂️ 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

🌳 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

Supporters

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

Bugsnag
Bugsnag
CryptoCompare
CryptoCompare
Netlify
Netlify

👩‍⚖️ License

Apache 2.0

About

React single page application which powers the frontend of 0x Tracker

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Languages