Build a Web3 Dapp in React & Login with MetaMask

This page summarizes the projects mentioned and recommended in the original post on dev.to

SurveyJS - 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.
surveyjs.io
featured
InfluxDB - 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.
www.influxdata.com
featured
  • connect-metamask-react-dapp

    Build a simple React / Web3 Dapp that replicates a small portion of the Uniswap v2 interface

  • The full repository can be found HERE.

  • metamask-extension

    :globe_with_meridians: :electric_plug: The MetaMask browser extension enables browsing Ethereum blockchain enabled websites

  • If you've used a lot of DeFi products you'll notice that this is the standard Web3 practice, even though it is unintuitive compared to traditional Web2-style auth. This is an ongoing issue related to MetaMask: https://github.com/MetaMask/metamask-extension/issues/8990, and while several solutions have been suggested, I personally haven't found one that works as expected. You might notice that in the Uniswap interface itself, they don't provide a "logout" button, just a way to swap wallets:

  • SurveyJS

    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.

    SurveyJS logo
  • useDApp

    Framework for rapid Dapp development. Simple. Robust. Extendable. Testable

  • Apart from their decision to add a capital A to the name of their library, useDApp is an incredibly useful framework for "rapid DApp development", and includes some helpful hooks and seamless integration into a modern React project. To dive into everything you can do with the framework, check out their website at https://usedapp.io/. We'll only be using some basic elements of useDApp to get our web3 dapp working, but there's much more you can do with it.

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

  • Is there any way to call metamask from my own chrome extension?

    1 project | /r/ethdev | 18 Sep 2022
  • Contributing to Ergo

    1 project | /r/ergonauts | 30 May 2022
  • Where to start as a developer in Defi?

    2 projects | /r/defi | 9 Mar 2022
  • How to handle wallet connection in a dapp

    2 projects | /r/Harmony_Devs | 7 Mar 2022
  • Web3: the unique technology and challenges behind the hype

    3 projects | dev.to | 17 Jan 2022