Skip to content

dApps boilerplate build with React, Web3JS, Redux, and MaterialUI for a better UI Design

License

Notifications You must be signed in to change notification settings

rashgaroth/dapps-react-redux-mui-boilerplate

Repository files navigation

alt text

React Redux MUI Boilerplate for dApps

This project is a React boilerplate that can be used for a scalable web applications, integrated with Web3JS library with custom Web3JS Hooks (useWeb3), for UI styling we decide to use Material UI with custom theme that inspired by Berry Admin Template

Scalable project

This project can be used for a scalable project, we use Plop for generating new react classes and tests, then we use Redux for state management, and we use a scalable architecture for development. and this template is On Progress. you can wait or Contribute to this project 🥳

Features

  • React We use latest version of react to make your development going fast with hot reload features
  • A Quick Scaffolding Create Component, Reducer, Class by CLI
  • Redux We use Redux for state management 😎 with react-redux hooks
  • Hooks Using hooks for a better Development Experience 🤩
  • Jest You can test your components or classes with Jest
  • Eslint For a better javascript linter
  • Material UI Easy custom with MUI styled, and better documentation
  • Prettier For linting your own code!

Getting Started

  1. Make sure that you have Node JS version 16 or latest. you can check yours node -v or use nvm nvm use 16
  2. Clone this repository git clone https://github.com/rashgaroth/dapps-react-redux-mui-boilerplate.git <Your Project Name>
  3. Open terminal and install all depedencies yarn install or if you're using npm npm install
  4. Build yarn install or npm run build
  5. Last steps, you can run your project with yarn start or npm start. And the project was served on http://localhost:3000

Generating Your Own Classes & Components

  1. Run npm run generate or yarn generate if you want to create class or component
  2. If you want to modify the generator, just see plopfile.js file and you can custom with your own plopfile

On Progress

  1. Create UI Utilities
  2. Create Wallet Connect & Web3 modules
  3. Translations