Which Technologies Will Be Used | Learn everything about Chiliz

After you clone project template (in previous lesson) you must to apply this codes:

In our virtual meetup platform project, we will be using NextJS, Moralis and wagmi.

Step 1: Setup NextJS Application

NextJS allows us to build fast and highly interactive web applications. Since our virtual meetup platform will be a website, using SSR (Server Side Rendering), we need to start by creating a NextJS application.

Open up a terminal/command prompt and type the following command to create project:

npx create-next-app@latest virtual-meet

This command asks some questions regarding our choices for implementation. We will say yes to TypeScript, ESLint, Tailwind CSS and src directory. Followed by No to AppRouter and customizing alias.

Step 2: Installing Moralis

Moralis is a blockchain development platform that provides backend-as-a-service (BaaS) functionality to developers, therefore making our lives easier by abstracting complexity of blockchain development. In our application we will use Moralis to interact with the CHZ testnet.

Therefore let’s change directory to our virtual meet project using:

cd virtual-meet

and execute this command to install Moralis dependencies:

npm install moralis @moralisweb3/common-evm-utils

Now our project contains Moralis, therefore we will be able to easily interact with token contracts.

Step 3: Get Moralis API Key

Before we can fully utilize Moralis, we need to sign up and get an API key.

To do that let’s go to here and create a free account
Once we login to our new account, it will ask us to create a project (which can be named whatever you want).
Navigate to your project’s Settings > Secrets, and copy the value from Web3 API Key - Default.

Step 4: Install Wagmi

Wagmi is a collection of React Hooks which we are going to use to handle authentication related functionalities. In order to install, execute the following command in your terminal/command prompt:

npm i wagmi viem

Now, our NextJS project (written in Typescript), will handle metamask authentications using Wagmi and all the other token related functionalities will be easily done using Moralis.