Web 3.0 frontend stacks in 2023

This page summarizes the projects mentioned and recommended in the original post on dev.to
#TypeScript #React #Tailwindcss #Components #JavaScript

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • InfluxDB - Access the most powerful time series database as a service
  • Sonar - Write Clean JavaScript Code. Always.
Our great sponsors

  • abitype

    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

    🐻 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.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • ui

    Beautifully designed components built with Radix UI and Tailwind CSS.

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

  • zod

    TypeScript-first schema validation with static type inference

    Form library : jotai-form & zod

  • jotai-form

    Form library : jotai-form & zod

  • TypeScript

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

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

  • token-lists

    📚 The Token Lists specification

    Uniswap tokenlist format

  • InfluxDB

    Access the most powerful time series database as a service. Ingest, store, & analyze all types of time series data in a fully-managed, purpose-built database. Keep data forever with low-cost storage and superior data compression.

  • permit2

    🔑🔑🔑 next generation token approvals mechanism

    Permit2

  • synpress

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

    Synpress

  • vite

    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

    Develop. Preview. Ship.

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

  • Tailwind CSS

    A utility-first CSS framework for rapid UI development.

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

  • Recoil

    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

    📋 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

    Transforming styles with JS plugins

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

  • Next.js

    The React Framework

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

  • bignumber.js

    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

    👻 Primitive and flexible state management for React

    State management : jotai

  • headlessui

    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

    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.

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts