While Smart Contracts act as your "backend" you'll also often want to wire them up with your frontend. "TypeChain" helps you auto-generate TypeScript type definitions for your Smart Contracts.
Using TypeChain your frontend code is automatically checked for compatibility with your Smart Contract code, plus you get features such as autocomplete in modern IDEs.

Auto-generate TypeScript bindings for Smart Contracts.

TypeChain

Connecting from a frontend to your dApp backend usually involves integrating MetaMask, the Browser- and Smartphone friendly crypto wallet. Depending on the frontend framework you're using this can result in complex code to ensure proper functionality.
React users can use the <code>useMetamask</code> hook which greatly simplifies this setup while covering all the major edge cases one usually has to handle manually.

React hook to connect to a MetaMask Wallet.

useMetamask

<code>useWallet</code> is a React hook which makes it possible to connect any dApp with any Ethereum provider.
Using <code>useWallet</code> one gets access to a library agnostic implementation (works with e.g. Ethers, Web3, ...) which provides features such as a simple wallet integration, access to the user's current account balance, tracking of transactions and more.

All-in-one solution to connect a dApp to an Ethereum provider.

useWallet

The create-eth-app project helps you get up to speed faster by adding a scaffolding command to your CLI.
By running one command you'll create an opinionated project structure with example code for your dApp's frontend and backend. Make sure to read through the projects README to learn all the different options and configurations you use to customize the app creation process further.

Template to aid the development of Ethereum Virtual Machine (EVM) dApps.

Create Eth App

create-react-native-dapp is an npx utility which helps you bootstrap React Native mobile applications that interface with the Ethereum Blockchain.
The tight integration with projects such as Expo, Hardhat, WalletConnect and Prettier ensures a great developer experience so you can focus on your Smartphone dApp's features rather than tooling.

Quickly bootstrap React Native dApps that integrate with Ethereum Virtual Machine (EVM) Blockchains.

Create React Native dApp

The "Next Web3 Boilerplate" is an opinionated project template based on Next.js and SWR.
It comes prepackaged with support for fetching and caching Smart Contract data, auto-generated types for Smart Contract ABIs via TypeChain as well as simple user onboarding through browser extensions such as MetaMask.

Template to start dApp development for Ethereum Virtual Machine (EVM) Blockchains.

Next Web3 Boilerplate

Starting a new project is oftentimes preceded by a time-consuming setup phase in which all the necessary tools are installed and configured. Luckily there are boilerplates and templates which will help you take shortcuts and get up to speed faster.
Using the scaffold-eth project you'll get access to an opinionated Ethereum development stack focused on fast iterations.

Boilerplate to kickstart dApp development for Ethereum Virtual Machine (EVM) Blockchains.

Scaffold Eth

The "TypeScript Eth Starter" project is an effort to help you get started with dApp development via an opinionated boilerplate.
Once downloaded and installed you can leverage pre-configured tools like TypeScript, Next.js, Hardhat, useDapp and Tailwind CSS to build your full stack dApp in record time.

Template to kickstart dApp development for Ethereum Virtual Machine (EVM) Blockchains.

TypeScript Eth Starter

useDapp is an opinionated, yet extensible framework for rapid dApp development. Its main focus is to provide a "batteries included" developer experience by combining frequently used features like React hooks and the Multicall library with software engineering best practices such as integration testing and modularity.
An example which demonstrates the frameworks simplicity can be found in the projects <a href="https://github.com/TrueFiEng/useDApp">README</a>. The official documentation can be found <a href="https://usedapp.readthedocs.io">here</a>.

Frontend Framework to build fully-fledged Ethereum Virtual Machine (EVM) dApps.

useDapp

In order to use your application, users need to connect their wallets to your dApp. This is usually done via Browser extensions such as MetaMask.
WalletLink is an open protocol that is built on top of standards such as EIP-1102 to make the integration effortless, platform independent and extensible. With less than 15 lines of JavaScript code you can offer your users the ability to connect their wallets without installing any additional desktop software or Browser extension.

Open Protocol to integrate wallets into dApps.

WalletLink

Web3Modal is a single Ethereum / Web3 provider solution for all wallets. Using Web3Modal you can easily add support for providers like MetaMask, Dapper, Gnosis Safe, Frame, Portis, Fortmatic and more.

Drop-in solution to support various wallets providers.

Web3Modal

The web3-react project is a simple but easily extensible framework to build modern Ethereum dApps. At its core is the package system which lets you configure various connectors and low-level primitives to optimize the developer experience while minimizing the reliance on external dependencies.
Famous projects built on top of web3-react include the <a href="https://github.com/Uniswap/uniswap-interface">Uniswap Exchange Interface</a>, <a href="https://app.aave.com">Aave</a> and the <a href="https://launchpad.ethereum.org">Eth2 Launchpad</a>.

Frontend library to build Ethereum Virtual Machine (EVM) dApps.