Web 3.0 frontend stacks in 2023

• abitype

  2 436 8.5 TypeScript

  Strict TypeScript types for Ethereum ABIs

  

wagmi is React Hooks built on top of ethers.js. There are many such libs, but I think this is best. -> wagmi's Comparison To Other Libraries wagmi provide TypeScript types for Ethereum ABIs and this works with zod schema. This brings more strict typecheck for dApp. -> ABIType Also wagmi’s hooks are very useful, such as useContractReads. It's wrapping Multicall3 for multiple read-calls.

• zustand

  248 42,526 8.8 TypeScript

  🐻 Bear necessities for state management in React

  

jotai is a state management library that is easy to use and lightweight. It can use simply like useState + ContextAPI, prevent extra-rerender and has many utilities. Similar libraries are recoil, zustand, valtio. You can choose the one you like.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• shadcn/ui

  135 56,834 9.3 TypeScript

  Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

  

UI, CSS : tailwindcss + PostCSS + Radix UI + UI components by shadcn

• zod

  288 30,347 9.1 TypeScript

  TypeScript-first schema validation with static type inference

Form library : jotai-form & zod

• jotai-form

  2 123 6.1 TypeScript

  Form atoms for Jotai

  

Form library : jotai-form & zod

• TypeScript

  1,305 97,944 9.9 TypeScript

  TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  

Frontend Framework & hosting : Next.js + TypeScript + Vercel

• token-lists

  5 1,316 4.4 TypeScript

  📚 The Token Lists specification

  

Uniswap tokenlist format

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

• permit2

  5 669 5.1 Solidity

  🔑🔑🔑 next generation token approvals mechanism

  

Permit2

• synpress

  4 528 8.7 JavaScript

  Synpress is e2e testing framework based on Cypress.io and playwright with support for metamask.

  

Synpress

• vite

  787 64,769 9.9 TypeScript

  Next generation frontend tooling. It's fast!

  

React is first choice, because of it's many web3 libs. Vercel is the easiest place deploying Next.js with Turborepo. However, by using vercel's useful features (Edge functions, ISR, etc.), it is more difficult to deploy to IPFS and make dApp fully decentralized. Vite or esbuild are also suitable for smaller applications and tools.

• vercel

  479 12,144 9.8 TypeScript

  Develop. Preview. Ship.

  

Frontend Framework & hosting : Next.js + TypeScript + Vercel

• Tailwind CSS

  1,280 78,370 9.4 TypeScript

  A utility-first CSS framework for rapid UI development.

  

UI, CSS : tailwindcss + PostCSS + Radix UI + UI components by shadcn

• Recoil

  81 19,447 4.7 JavaScript

  Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

  

jotai is a state management library that is easy to use and lightweight. It can use simply like useState + ContextAPI, prevent extra-rerender and has many utilities. Similar libraries are recoil, zustand, valtio. You can choose the one you like.

• react-hook-form

  210 39,505 8.9 TypeScript

  📋 React Hooks for form state management and validation (Web + React Native)

  

This setup can be validate form inputs more react-like way. -> jotai-form with zod example If you aren't using jotai or need more complex validation, you can use react-hook-form with zod.

• PostCSS

  86 28,192 8.8 TypeScript

  Transforming styles with JS plugins

  

UI, CSS : tailwindcss + PostCSS + Radix UI + UI components by shadcn

• Next.js

  2,041 120,572 10.0 JavaScript

  The React Framework

  

Frontend Framework & hosting : Next.js + TypeScript + Vercel

• bignumber.js

  16 6,517 3.7 JavaScript

  A JavaScript library for arbitrary-precision decimal and non-decimal arithmetic

ERC20 has decimals fields and must be handled with digit awareness. I wanted to use only one library, but I used both ether.js's BigNumber and bignumber.js (for display purpose).

• jotai

  107 17,217 9.3 TypeScript

  👻 Primitive and flexible state management for React

  

State management : jotai

• headlessui

  180 24,217 9.1 TypeScript

  Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

  

I prefer plain & customizable style-less frameworks. Radix UI has more features than Headless UI, but adding style is more difficult. So components by shadcn is good starting point.

• esbuild

  322 37,276 9.5 Go

  An extremely fast bundler for the web

React is first choice, because of it's many web3 libs. Vercel is the easiest place deploying Next.js with Turborepo. However, by using vercel's useful features (Edge functions, ISR, etc.), it is more difficult to deploy to IPFS and make dApp fully decentralized. Vite or esbuild are also suitable for smaller applications and tools.

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

Suggest a related project