Build Web3 apps with React

Rate this content
Bookmark

The workshop is designed to help Web2 developers start building for Web3 using the Hyperverse. The Hyperverse is an open marketplace of community-built, audited, easy to discover smart modules. Our goal - to make it easy for React developers to build Web3 apps without writing a single line of smart contract code. Think “npm for smart contracts.”


Learn more about the Hyperverse here.


We will go over all the blockchain/crypto basics you need to know to start building on the Hyperverse, so you do not need to have any previous knowledge about the Web3 space. You just need to have React experience.

Shain Dholakiya
Shain Dholakiya
51 min
01 Jul, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Today's Workshop focused on building Web3 apps with React using JavaScript, without the need for smart contract code. The Hyperverse was introduced as a community-built, open, and audited platform for modular smart contracts. The Workshop covered topics such as blockchain basics, digital signatures, wallets, fees, and token types. A demo of a Web3 application was showcased, along with the process of confirming transactions and starting a battle between tribes. The Workshop also discussed initializing Hyperverse and modules, connecting wallets, joining and leaving tribes, creating custom tribes, and implementing battle functionality and ERC-721 tokens.

1. Introduction to Web3 App Development

Short description:

Hi everyone. My name is Shane. Today we're gonna be talking about how you can build Web3 apps with React using JavaScript, so no smart contract code needed at all. Our mission is to onboard 10 million devs from Web2 to Web3. The Hyperverse accelerates and simplifies your blockchain development journey. The Hyperverse is a community-built, open, and audited, modular, smart contracts for all major blockchains.

Hi everyone. My name is Shane. I'm the developer advocate at Decentology. My Twitter handle, everything's down there. And today we're gonna be talking about how you can build Web3 apps with React using JavaScript, so no smart contract code needed at all. No need to pick up another programming language. So let's get into it.

So our company, obviously we love developers. That's why we are here, and we make products that make your lives easier. Our mission, as I was pointing to earlier, is that we want to onboard 10 million devs from Web2 to Web3. So you're in the perfect place if you are new to Web3. And then our product, the Hyperverse, which I'll be explaining even further and using, basically accelerates and simplifies your blockchain development journey. So you'll see exactly how throughout this workshop.

So the agenda for today, I'm going to be first sharing the Hyperverse overview. So just a how Hyperverse works. And then go into some blockchain and crypto basics. And then I'll show you a demo of two modules of Web3 applications using the Hyperverse. So let's get right into it. So what is the Hyperverse? The Hyperverse is a community-built, open, and audited, modular, smart contracts for all major blockchains. So that's a whole mouthful, but I'll break it down. Right now in the Web3 world, obviously if someone wants to build an application, there has to be a smart contract aspect, and then the front-end aspect. The smart contract aspect is a totally different ballgame than what we have in Web2 world. You have to think of so many other use cases and edge cases since that code is immutable once it's on chain. So that's a whole lot different than the Web2 world. And then as well as picking up a whole new programming language. So once those two aspects are combined, then you have a Web3 application. But what we are trying to do is make it super simple for Web2 devs to build apps without writing a single line of smart contract code and using just JavaScript. So you can tap into other smart contracts using just JavaScript and call these functions all with JavaScript and create your Web3 application that way. Instead of creating a smart contract from scratch. So here's an overview of the Hyperverse and how the architecture kind of works.

2. Building Smart Modules for Web 3.0

Short description:

Any smart contract developer can build smart modules, which are single-purpose smart contracts. Registrars validate these modules, and auditors verify the code. Web 2.0 developers can use JavaScript and libraries to tap into these modules, similar to using APIs. No smart contract code knowledge is needed.

So first, you know, any smart contract developer could go on and build these, what we call smart modules, which are essentially just single purpose, you know, on chain smart contracts, and then we have a community of registrars that will go in and validate these smart module packages. And these smart module packages consist of, you know, things like metadata, examples of, you know, how the functionality works and all that. And then we have a community of auditors that would actually go ahead and read the code of the smart contract that was built in the smart module and stake their tokens as an indication that, you know, this code is been verified and, you know, there's no scammy stuff or anything like that going on in here. So it acts like an insurance layer for the smart modules.

So now for Web 2.0 developers, all they have to do would be use JavaScript and use our libraries to tap into the smart modules and use them how they wish. And, you know, if this sounds familiar, this sort of concept sounds familiar to you, it's because it is, right. In Web 2.0 world, if you want to build a payment layer, you wouldn't build it from from scratch, right? You would just call Stripes API. If you want, you know, notifications, you would just call Twilio. And few lines of code, you have an app up and running with both those functionalities. So it's very similar of what we are building here. You're just connecting these, you know, Lego blocks of, I want this functionality from this smart module, this functionality from this smart module. And you can connect them literally just like NPM for smart contracts, and then use those functionalities wherever you want throughout your Web 3.0 application. So it really is that easy. So here is a diagram of just showcasing how, basically in the Web 3.0 world, you don't really need to have, you know, smart contract programming language knowledge. You could just write the client side applications using just, you know, HTML, CSS, and JavaScript and use, you know, React or whatever you want and tap into these smart contracts that were built by, you know, obviously the smart contract developers that were written in various different languages depending on, you know, which blockchain they're on. And you can just tap into these and then call those functionalities how you wish throughout your Web 3.0 application. So again, no smart contract code knowledge needed at all.

Watch more workshops on topic

Web3 Workshop - Building Your First Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Querying Blockchain Data with GraphQL
JSNation 2023JSNation 2023
64 min
Querying Blockchain Data with GraphQL
WorkshopFree
Simon Emanuel Schmid
Simon Emanuel Schmid
Curious about how data works in the world of blockchain? Join Simon in an engaging session about The Graph, the decentralized indexing protocol that makes it easy for blockchain developers to search and query blockchain data. 
Table of the contents:- Understanding blockchain data- Anatomy of a smart contract- Indexing blockchain data with The Graph- Accessing data on The Graph- Recommended subgraphs- Writing subgraphs overview
Web Accessibility in JavaScript Apps
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Sandrina Pereira
Sandrina Pereira
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)
How to Convert Crypto Currencies With GRPC Microservices in Node.js
JSNation 2023JSNation 2023
117 min
How to Convert Crypto Currencies With GRPC Microservices in Node.js
Workshop
Alex Korzhikov
Andrew Reddikh
2 authors
The workshop overviews key architecture principles, design patterns, and technologies used to build microservices in the Node.js stack. It covers the theory of the GRPC framework and protocol buffers mechanism, as well as techniques and specifics of building isolated services using the monorepo approach with lerna and yarn workspaces, TypeScript. The workshop includes a live practical assignment to create a currency converter application that follows microservices paradigms. It fits the best developers who want to learn and practice GRPC microservices pattern with the Node.js platform.
Prerequistes:- Good understanding of JavaScript or TypeScript- Experience with Node.js and writing Backend applications- Preinstall Node.js, npm- Preinstall Protocol Buffer Compiler- We prefer to use VSCode for a better experience with JavaScript and TypeScript (other IDEs are also ok)
Finding, Hacking and fixing your NodeJS Vulnerabilities with Snyk
JSNation 2022JSNation 2022
99 min
Finding, Hacking and fixing your NodeJS Vulnerabilities with Snyk
WorkshopFree
Matthew Salmon
Matthew Salmon
npm and security, how much do you know about your dependencies?Hack-along, live hacking of a vulnerable Node app https://github.com/snyk-labs/nodejs-goof, Vulnerabilities from both Open source and written code. Encouraged to download the application and hack along with us.Fixing the issues and an introduction to Snyk with a demo.Open questions.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Levelling up Monorepos with npm Workspaces
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Levelling up Monorepos with npm Workspaces
Top Content
Learn more about how to leverage the default features of npm workspaces to help you manage your monorepo project while also checking out some of the new npm cli features.
Domain Driven Design with Vue Applications
Vue.js London 2023Vue.js London 2023
14 min
Domain Driven Design with Vue Applications
Top Content
Introduction to Domain Driven Design- What is DDD?- Key principles of DDD- Benefits of using DDD in web application developmentDomain Modeling in Vue 3 Applications- How to design and implement domain models in Vue 3- Strategies for integrating domain logic with Vue's reactive data model and component-based architectureBest Practices for Implementing DDD in Vue 3- Strategies for organizing code in a way that follows DDD principles- Techniques for reducing coupling between domain and application logic- Tips for testing and debugging domain logic in Vue 3 applications
E2E Tests for Web3 Applications
TestJS Summit 2022TestJS Summit 2022
21 min
E2E Tests for Web3 Applications
Top Content
We will go through a brief explanation of what is Web3 and the architecture of a web3 application. Then we will talk about how to end-to-end test, its challenges, some test tools that are available, and a demo using cypress and metamask.Agenda: What is Web3; The Architecture of a Web3 Application; Web3 E2E Tests Introduction; Web3 E2E Tests Challenges; E2E Test Tools; Demo.
How to Share Code between React Web App and React Native Mobile App in Monorepo
React Summit 2022React Summit 2022
7 min
How to Share Code between React Web App and React Native Mobile App in Monorepo
Usually creating web and mobile apps require different tech stacks, and it is pretty hard to share code. This talk will show how I added a React web app and a React Native mobile app in the same monorepo using Nx, and how I optimized codeshare between react web app and react native mobile app.
A Frontend Developer’s Guide to Web3
React Summit 2022React Summit 2022
22 min
A Frontend Developer’s Guide to Web3
There is a lot of hype and interest around diving into the Web3 space, and it can be hard to manage the information overload and the emphasis on learning new languages to work on smart contracts. Many developers in the frontend space ask, “How much of this new information do I need to transition into web3?” The truth is as a React developer, the skills I know are essential in web3. Let’s add some context around how to leverage those existing skills to succeed in this new space.
In this talk, we’re going to explore how to build the correct context and the technologies to understand to help you dive into web3 as a front-end developer. We’ll go over popular packages like Ethers, which can be used in React applications to interact with wallets and existing smart contracts. We will also explore how you can leverage your Javascript skills to build full-stack dApps using managed services like Moralis and Thirdweb.
Let’s demystify some of the concepts in web3 and leverage our existing skills to start building.