This repo makes use of a React, Redux + Saga, Reselect boilerplate
- JS Framework: React + Typescript
- SEO & Metadata: Helmet.js
- Blockchain components: Ethers.js + web3-react
- Styling: JSS + Material UI
- State management: Redux + Redux-Saga + Reselect
- Template generation: Plop + Handlebars.js
- Compiling: Webpack + Babel
- Forms & Validation: Formik + Yup
- Notifications: Toastify
The boiler is set up as a Yarn workspace/monorepo, this allows for adding additional workspaces like Blockchain or Server if required and executing parallel scripts across all spaces.
The web app is structured as a standard React app, the important areas to note is the /api, /domains, /containers & /components.
The api interactions have helpers to automatically format form field data, collect access token headers and allow for reducer-esque api calling functions.
The domains folder acts as the apps main Daemon & singleton business logic management components, general app actions are managed here, reducers for the domain state, selectors etc can be found here. Domains are meant to be globally accessable services facilitated through Redux-Saga for async actions
The containers folder allows for managing the business logic of constructing selectors, action dispatch functions, and any complex operations that should be managed seperately from the mark up.
The components folder is for markup files & styling.
First, run yarn to install the workspace dependancies:
yarn install
For running a local instance use the command:
yarn start:dev
To make use of the webapp template generator, first open a terminal and navigate to ./WebApp, run the command yarn generate & follow the prompts.
To build the project across workspaces, at the root of the directory, run the command yarn build.
Frontend boilerplate designed & crafted originally by @FSM1/@panterazar
General updates & modifications by @RyRy79261