React dApp Template (Vite)

A Vite React template specifically designed for decentralized application (dApp) frontend development.

See how it looks/works here: https://snazzy-sorbet-15dcef.netlify.app

Quick start

npx degit huseyindeniz/vite-react-dapp-template my-project
cd my-project

npm install
npm run dev

There is also a CRA version of this template here

Tired of searching for and configuring multiple React packages?

React dApp Template (Vite) solves this challenge. It includes preconfigured packages for core functionality like routing and state management, as well as specialized features like internationalization. These packages are carefully selected and integrated, eliminating the need for developers to spend time researching and configuring individual packages. With the React dApp Template (Vite), developers can quickly build powerful and feature-rich applications without repetitive boilerplate code.

Benefits of React dApp Template (Vite)?

Compared to React-based frameworks, React dApp Template (Vite) allows decentralized hosting, eliminating reliance on a single server. It provides flexibility in tool and technology choices, supporting various React libraries and decentralized storage solutions.

React dApp Template (Vite) is an easy-to-use foundation for efficiently building high-quality dApps with React, suitable for developers seeking customization and quick development.

Features

• Authentication with Web3 Wallet (Metamask, Core, Coinbase, Rabby more wallets can be added)
• Wallet Domain Name Support (AVVY Domains and ENS)
• Internationalization
• UI
• Page load optimizations
• SEO support

What's Included and Preconfigured

Web3 Packages

• ethers.js (v6)

Testing Infrastucture

• Unit Tests: Vitest
• Component Unit Tests: React Testing Library + Storybook
• Integration Tests: React Testing Library + Storybook
• E2E Tests: Cypress + Synpress + Cucumber (todo)

Other Packages

React: A fast and efficient JavaScript library for building reusable user interfaces.

TypeScript: A typed superset of JavaScript that improves code quality and catch errors, particularly beneficial for complex projects.

Chakra-UI: A customizable component library for creating accessible user interfaces in React.

React Router: A declarative routing library for building single-page applications.

Redux Toolkit: A state management toolkit for predictable and scalable application development with Redux.

Redux Saga: A library for managing asynchronous logic in Redux applications.

React Error Boundary: A feature in React for handling and containing errors within specific components.

React Helmet Async: A library for managing metadata in React applications, optimizing SEO and discoverability.

I18Next: An internationalization library for easily translating JavaScript applications into different languages.

React Icons: A library providing a collection of high-quality SVG icons for React applications.

React Cookie Consent: A library simplifying the implementation of cookie consent banners in React applications.

Getting Started

Please visit the Official React dApp Template Documentation Page to start your dApp frontend development journey.

Contributions

React dApp Template (Vite) is an open-source project and we welcome contributions from the community. If you have any suggestions, please use the discussion tab. If you have any bug reports, please open an issue or submit a pull request.

License

React dApp Template (Vite) is licensed under the MIT License.