Live project: https://admiring-kare-60e432.netlify.com/
This Blockchain viewer shows a list of the most recent blocks from the EOSIO blockchain. When a user clicks the 'LOAD' button the 10 most recent blocks are updated. Block entries show the hash of the block, its timestamp, and the count of actions included in that block. Clicking a block entry smoothly expands to show the contents of the block output.
It is built using React, and utilizes hooks for local state, Redux for state management, and Thunks to handle asychronous actions.
Follows the 'Rails-style' pattern in structuring the project due to its simplicity; no explanation is required when a new Redux-familiar developer dives in; the actions are in the actions directory. The con of course to this approach on large projects is scalability and would naturally organize a larger project by feature.
For a lovely debugging experience I suggest grabbing a copy of Redux DevTools
Building on this project further, I'd next break down the block component, and go through and refactor the styles throughout the app. There are a few Redux related minor performance optimizations I could implement. I could strongly type the app using TypeScript.
To install the project, you'll need a copy of npm or yarn. Simply cd into the root of the project npm install or yarn install and use the available scripts to run or build the project and you're good to go.
In the project directory, you can run:
Runs the tests and gives a coverage report
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.