petermikitsh / myethereumapp

Web client for viewing data from the Etherscan API

✨ Demo Site: https://myethereum.app ✨

myethereumapp

Web client for viewing data from the Etherscan API.

Getting Started

This application requires a locally-running MySQL instance in development mode. By default, the application will attempt connecting to the following location: mysql://localhost:3306/etherscan-local. Once the MySQL server is available, run the following:

npm install
npm run db:migrate
npm start

Your browser will open when the bundle is ready.

Architecture, design decisions, etc

• Server: NodeJS server using FeathersJS for quickly building REST and real-time APIs. Data is persisted in Google Cloud Platform's Cloud SQL service. Sequelize is used as the ORM and to manage the database table structure with migration scripts.

• Client: Single-page React application, using Redux for state management. The Material Design React components used in this project were implemented by the author. These components were designed with a focus on performance, accessibility, and cross-browser support. Color palette and font choices inspired by the look-and-feel of the Apple Design Award winning Robinhood app. The following separation of concerns is applied:

  • The src/client/components directory contains React components primarily concerned with the DOM.

  • The src/client/routes directory contains React components that integrate with react-router and redux state management. No DOM-specific logic lives in this directory.

• Testing: When shipping enterprise applications, you need confidence in quality. The unit tests provide extensive coverage of the codebase, allowing developers to add or augment existing features, without fear of introducing a regression. Unit tests are written with Jest for parallelized, fast execution.

• Developer experience: If you want to move quickly, you need to be effectively utilizing developer tools. This project implements hot module reloading on both the client and server. When server code changes, the server is restarted. When client code changes, react-hot-loader patches them into the browser (no hard page refresh). Seeing is believing!

• Automated deployments: Once unit tests and the build succeed, Travis automatically deploys the application to Zeit, a PaaS for NodeJS applications. The application is accessible at https://myethereum.app.

Out of scope

• Locking down the API. In a true production environment, you'd want to rate limit requests, add pagination, and require authentication to reach the API endpoints.

• Server-side rendering. If you look at the response from the server root (e.g., GET /), you'll notice the body is sparse, as the DOM is populated by React on the client. This can be less-than-ideal for SEO.

• Simplified workflows. In this project, you'll see I've pushed commits directly to master. In enterprise environments with multiple collaborators, I usually follow a variation of the standard branching model, where features are built on a new branch.