Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/huseyindeniz/vite-react-dapp-template

Vite React Template for dApp Frontend Development
https://github.com/huseyindeniz/vite-react-dapp-template

chakra-ui dapp ethers ethersjs react redux-saga redux-toolkit template typechain typescript vite vite-react-template web3

Last synced: 17 days ago
JSON representation

Vite React Template for dApp Frontend Development

Awesome Lists containing this project

README 

        
# React dApp Template (Vite)



![version](https://img.shields.io/github/package-json/version/huseyindeniz/vite-react-dapp-template)

![build](https://img.shields.io/github/actions/workflow/status/huseyindeniz/vite-react-dapp-template/CI.yml)

[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fhuseyindeniz%2Fvite-react-dapp-template&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=page+views&edge_flat=false)](https://hits.seeyoufarm.com)



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



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



Quick start



```sh

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](https://github.com/huseyindeniz/cra-template-dapp)



### 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](https://metamask.io), [Core](https://core.app), [Coinbase](https://www.coinbase.com), [Rabby](https://www.rabby.io) more wallets can be added)

- Wallet Domain Name Support ([AVVY Domains](https://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](https://huseyindeniz.github.io/react-dapp-template-documentation/) 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](https://github.com/huseyindeniz/vite-react-dapp-template/discussions) tab. If you have any bug reports, please [open an issue](https://github.com/huseyindeniz/vite-react-dapp-template/issues) or [submit a pull request](https://github.com/huseyindeniz/vite-react-dapp-template/pulls).



## License



React dApp Template (Vite) is licensed under the [MIT License](./LICENSE).