Skip to main content

Get started in minutes, not hours

Boilerplate your dApp frontend in a few simple steps.

CRA Template

npx create-react-app mydapp --template @huseyindeniz/dapp
cd mydapp
npm start

or

Vite Template

npx degit huseyindeniz/vite-react-dapp-template mydapp
cd mydapp

npm install
npm run dev

Are you tired of searching for and configuring numerous React packages? Do you get tired of writing the same boilerplate for each new dApp?

One of the challenges of building applications with pure React is the need to identify and configure a large number of packages to get the desired functionality. This can be time-consuming and error-prone, especially for developers who are new to React or who are building their first dApp application.

The React dApp Template helps developers avoid this challenge by including a wide range of preconfigured packages that are ready to use out of the box. This includes packages for core functionality such as routing and state management, as well as packages for specialized features like internationalization. All of these packages are carefully selected and integrated to work seamlessly together, making it easy for developers to build powerful and feature-rich applications without the need to spend time researching and configuring individual packages.

Benefits​

  • Decentralized Hosting
  • Greater Flexibility

Features​

  • Authentication with Metamask Wallet
  • Internationalization
  • Dark Theme
  • Page load optimizations
  • SEO support

What's Included and Preconfigured​

Web3 Packages​

  • ethers.js
  • typechain

Testing Infrastucture​

  • Unit Tests: jest
  • Component Unit Tests: React Testing Library + Storybook
  • Integration Tests: React Testing Library + Storybook
  • E2E Tests: Cypress + Synpress + Cucumber

Other Packages​

  • Chakra-UI
  • React Router
  • Redux Toolkit
  • Redux Saga
  • React Error Boundary
  • React Helmet
  • I18Next
  • React Icon All Files
  • React Cookie Consent

Installation​

CRA Version​

npx create-react-app mydapp --template @huseyindeniz/dapp

Vite Version​

npx degit huseyindeniz/vite-react-dapp-template mydapp
cd mydapp

npm install
npm run dev

App Features​

React dApp Template is using feature based directory structure

  • src
    • features
      • i18n
      • ui
      • wallet
      • your features...

i18n, ui and wallet features are ready to use.

Next Steps​

Please visit the Tutorial page to start your dApp frontend development journey with React dApp Template.