DEV Community: ByteSlash

🚀 Solidity Quickstart [0]

Mukesh — Wed, 23 Feb 2022 08:46:00 +0000

Hey folks 👀. Hope y'all are doing great. You might have heard about web3 and its hype on Twitter and maybe you wanna explore it as well. Well, so today I am here to give all a quick tour of solidity 🚀. So let's get started.

NOTE: This blog post isn't a complete tutorial of solidity. You can take this blog post as a quickstart for the journey with solidity and web3. If you are in search of resources, checkout the resources notion page of X Days of Solidity: https://links.kiradev.co/misc/solidity-resources

🤔 What's Solidity?

Solidity is a programming language for implementing smart contracts.

Smart contracts are simply programs stored on a blockchain that run when predetermined conditions are met. An advantage of these programs is that you can verify they are what they are and do what they claim they are doing. This allows for a permission-less autonomous ecosystem between untrusted and anonymous stakeholders.

Solidity is a curly-bracket language with the influence of C++, Python, and JavaScript being visible.

Enough of theory, now let's dive into solidity 🚀

🛠 Setting up developer environment

Before working with Solidity, we would have to set up our development environment in such a way that we could local test them 🚀.

👀 Magical powers of Hardhat

We would be using a tool called Hardhat. This would create a local Ethereum network and give us fake test ETH and fake test accounts to work with. Sounds interesting right? So what are you waiting for so let’s set up Hardhat 🚀.

Create a new folder for the project

  mkdir x-days-of-solidity

Navigate into that folder

  cd x-days-of-solidity

Initializing the project

  npm init -y

If you get an error saying npm command not found then go ahead and install NodeJS from https://nodejs.org. Install the LTS version
- Installing Hardhat

   npx hardhat

You would be presented with a prompt something like this

Let's choose the first option and press enter for the rest of the options

We would have to install a few other dependencies as well

  npm install --save-dev chai ethereum-waffle @nomiclabs/hardhat-waffle ethers @nomiclabs/hardhat-ethers

chai is a testing library.

ethereum-waffle is the waffle package by which you can test your smart contracts.

@nomiclabs/hardhat-waffle allows to test smart contracts using waffle and hardhat.

ethers is a library for complete Ethereum wallet implementation.

@nomiclabs/hardhat-ethers is a hardhat plugin for ethers.

📁 Folder structure

After you have completed setting up the developer environment you would see a folder structure similar to this

contracts is the folder where all our smart contracts would be stored.
scripts is the folder where all scripts such as run.js and deploy.js would be stored.
test is the folder where all our chai tests would be stored.

👋 Hello, World!

Let's get started by creating a smart contract using solidity that prints "Hello, World!" in the terminal

First of all let's clean up the default hardhat contract, script, and test files. Let's create a new file called HelloWorld.sol inside the contracts folder.

Let's get started by adding a ✨SPDX License Identifier✨. It's just a fancy comment, which tells the license of your smart contract. In my case, I am going to be using the MIT license.

// SPDX-License-Identifier: MIT

Let's now specify the the version of solidity compiler. As we are using Hardhat, we have to check that the solidity compiler version in the hardhat.config.js file is the same as we are specifying in our smart contract

pragma solidity ^0.8.4;

As solidity doesn't natively support "console logs" we would have to use the magical powers of Hardhat again. Hardhat allows use to use "console logs" in solidity.

import "hardhat/console.sol"

Now we have the superpowers to use console log in solidity. This makes debugging much simpler.

Let's now start writing the actual smart contract 👀. In solidity, the syntax of a smart contract is similar to classes in other programming languages.

contract HelloWorld {
    constructor() {
        console.log("Hello, World");
    }
}

We use the contract keyword along with the contract name to define a contract. Defining a contract is similar to defining a class in other programming languages like JavaScript.

Any code inside the constructor is run once when the contract is been deployed.

// SPDX-License-Identifier: MIT

pragma solidity ^0.8.0;

import "hardhat/console.sol";

contract HelloWorld {
    constructor() {
        console.log("Hello, World");
    }
}

TADA 🎉! We have written our first smart contract. But 🤔 How to run it locally?

⚙ Running smart contract locally

We would use creating a script (run.js) and run the smart contract using that script and Hardhat.

Create a new file called run.js under the scripts folder.

Let's first get our smart contract, compile it, and generate all the necessary files under the artifact folder.

artifact folder is similar to a build folder

const helloWorldFactory = await hre.ethers.getContractFactory('HelloWorld');

Let's now deploy our compiled smart contract to the local blockchain

const helloWorld = await waveContractFactory.deploy();

We will wait until our smart contract has been officially deployed on the local blockchain.

await waveContract.deployed();

We would only see the "Hello, World!" console log only after the smart contract has been officially deployed on the local blockchain because the code inside constructor only runs once when the smart contract has been deployed.

Let's add a console log to the run script which tells the address of the account where our smart contract has been deployed.

console.log('Contract deployed to:', helloWorld.address);

Finally, our run.js script would look something like this

const main = async () => {
  const helloWorldFactory = await hre.ethers.getContractFactory('HelloWorld');
  const helloWorld = await helloWorldFactory.deploy();
  await helloWorld.deployed();
  console.log('Contract deployed to:', helloWorld.address);
};

const runMain = async () => {
  try {
    await main();
    process.exit(0);
  } catch (error) {
    console.log(error);
    process.exit(1);
  }
};

runMain();

I have added a new runMain function that would catch errors while deploying

Now let's run it using npx hardhat run scripts/run.js command

You would see the output something like this

TADA 🎉! You have created a smart contract and deployed it as well

Let's talk more about solidity now 🤔.

📦 Data types in Solidity

🔢 Integers

In solidity, there are two types of integers unsigned integers (uint) and signed integers (int). Unsigned integers are non-negative integers whereas signed integers are negative integers (PS: ** means to the "to the power of" or "exponent operator" aka ^ )

uint8 ranges from 0 to 2 ** 8 - 1
uint16 ranges from 0 to 2 ** 16 - 1
uint256 or uint ranges from 0 to 2 ** 256 - 1
int8 ranges from -2 ** 8 to 2 ** 8 - 1
int16 ranges from -2 ** 16 to 2 ** 16 - 1
int256 or int256 ranges from -2 ** 256 to 2 ** 256 - 1

📍 Address

There is a special data type, "Address". Address is a 20 byte long (size of an ethereum wallet address) data type in solidity.

🏹 Array

Syntax:

<data type> <array name>[size] = <initialization>

In solidity, you can create a fixed (with only a specific length) and dynamic (the length of the array can be anything)

// An array of fixed length of 10 unassigned integers
uint[10] myFixedArray;

// An array of the dynamic length of strings
string[] myDynamicArray;

✨ Array operations

Let's now talk a look at the array operation in solidity 👀

Accessing an element from an array: Accessing an element from an array in solidity is just like in any other programming language

    // SPDX-License-Identifier: MIT

    pragma solidity ^0.8.0;

    import "hardhat/console.sol";

    contract AccessingElement {
        string[3] data = ["hi", "hello", "yo"];

        constructor() {
            console.log(data[1]);
        }
    }

Here are creating a fixed array of name data and data type string and length of 3. We are trying to console log the second element of the array, which is hello.

Let's try to run it now using npx hardhat scripts/run.js

NOTE: You need to change the name of the smart contract which you are compiling in the scripts/run.js file.

TADA 🎉! It worked

Assigning values: Let's now assign values to an array

   // SPDX-License-Identifier: MIT

   pragma solidity ^0.8.0;

   import "hardhat/console.sol";

   contract AssigningValues {
       string[5] data = ["hi", "hello", "yo"];

       constructor() {
           data[3] = "yo yo";
           console.log(data[3]);
       }
   }

Here we are trying to assign the value of the 4th element of the array as yo yo.

Let's test it out.

TADA 🎉! It worked

Length of an array: Let's now find the length of an array.

You can use the length method to get the length of an array. Similar to how to find the length of an array in JavaScript.

    // SPDX-License-Identifier: MIT

    pragma solidity ^0.8.0;

    import "hardhat/console.sol";

    contract ArrayLength {
        string[3] data = ["hi", "hello", "yo"];

        constructor() {
            console.log(data.length);
        }
    }

Let's test it out

TADA 🎉 It worked

Push: Push is used to add elements to the end of a dynamic array.

    // SPDX-License-Identifier: MIT

    pragma solidity ^0.8.0;

    import "hardhat/console.sol";

    contract AddingElement {
        string[] data = ["hi", "hello", "yo"];

        constructor() {
            data.push("yo yo");
        }
    }

Pop: Pop is used to remove the last element from a dynamic array

    // SPDX-License-Identifier: MIT

    pragma solidity ^0.8.0;

    import "hardhat/console.sol";

    contract AddingElement {
        string[] data = ["hi", "hello", "yo"];

        constructor() {
            data.pop();
        }
    }

Phew, that was long 😓

🗜 Structs

Structs are more complex data types, where you can combine multiple data types to create your own complex data type.

struct myStruct = {
  address myAddress;
  uint myNumber;
  string myName
}

We can use structs with arrays too!

struct Person = {
  string name;
  uint age
}

Person[] personArray; // Creates a dynamic array

Person james = Person("James", 25) // Creates a new Person

personArray.push(james); // Adds that new person to the `personArray` array

🔤 Variables in Solidity

Syntax:

<data-type> <access-modifier> <variable-name>;

🌀 Types of variables

In solidity, there are 3 different types of variables:

state: State variables are declared in contract scope. Stored on the blockchain.
local: Local variables are declared inside functions. Destroyed after execution and not stored on the blockchain.
global: Global variables are some special variables that can be used globally and give information about the transactions and blockchain properties.

✨ Variable modifiers

There are 2 variable modifiers for state variables

constant, disallow assignment (except initialization), does not occupy storage slot.
immutable, allows exactly one assignment at construction time and is constant afterward. Is stored in code.

👋 The End

That's the end folks 👋. I would be releasing another part on "Solidity Quickstart" on "Functions in Solidity" and "How to deploy the smart contract to a test net", such as Rinkeby

The code for this entire "Solidity Quickstart" series would be available on my GitHub:

https://github.com/kira272921/solidity-quickstart

Checkout the notion board for "X Days of Solidity"

https://links.kiradev.co/project/x-days-of-solidity

How to build a blog using Remix and MDX

Mukesh — Mon, 07 Feb 2022 11:21:28 +0000

Hey, folks 👋. Today we are going to build a new blog
site from scratch using Remix, MDX and TailwindCSS

🤔 What's Remix? Yet another JavaScript framework

Remix is a full-stack web framework based on web fundamentals and modern UX. It is created by the team of React Router. Remix isn't any brand new framework it had been over for a year but it was a paid framework over then but now the time had been changed and Remix is now free and open-source software 🚀.

Remix is a React-based framework that allows to you render code on the server-side. Wait for a second 🤔 Doesn't NextJS do the same thing?

Remix took the old problems but approached them in a new style 🐱‍💻.

Remix only does Server Side Rendering (SSG), no Static Site Generation (SSG), and Incremental Static Regeneration (ISR) like NextJS.

Applications which use Static Site Generation (SSG) are fast, easy to deploy but it is really hard to use dynamic data, as the pages would be re-built every time the dynamic data has been changed. In Remix, we are only doing Server Side Rendering (SSG), which is great for dynamic data but it would be hard to deploy as you would need to have an actual server to run it.

Remix is suitable for applications that have multiple pages and which depend on some sort of dynamic data

🛠 Setting up the project

Let's set up our project before getting started to code.

Create a new folder for our remix blog

   mkdir remix-blog

Navigate into that folder

   cd remix-blog

Open that folder in VSCode

   code .

Initialize remix project in that folder

   npx create-remix@latest

The path of the remix application would be ./, as we have already created a folder of our project
We would be going to deploy our remix application on Vercel
We are going to be using JavaScript for this project

Starting a local development server

   npm run dev

This would start a local development server at localhost:3000

📁 Understanding the folder structure

The folder structure of a remix application is pretty simple.

api folder contains all the backend/api code.
app folder contains most of the frontend code.
- app/routes folder contains the code for each route. Remix has the file-system based router similar to nextjs
public folder contains the static files and assets that are served to the browser when our app is built or deployed.

👨‍💻 Building the project

Let's start building the blog now. Let's first clean up the app/routes/index.jsx file.

app/routes/index.jsx

export default function Index() {
  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
      <h1>Welcome to my blog</h1>
    </div>
  );
}

Remix supports the use of MDX to create a route module, which means we could create a new route using just a plain MDX file.

Let's create a new directory inside the routes directory called posts and inside that directory let's create a new file called first-blog-post.mdx

app/routes/posts/first-blog-post.mdx

Hey, welcome to my first blog post 👋

To check out your first blog post, visit localhost:3000/posts/first-blog-post

TADA 🎉, we have built a basic blog within 2 minutes

🙌 Adding frontmatter

The lines in the document above between the --- are called "frontmatter"

Let's add some front matter to your first blog post page. You can think frontmatter as the metadata of that page.

You can reference your frontmatter fields through the global attributes variable in your MDX.

---
title: First Blog Post
---

Hey, welcome to {attributes.title} 👋

Let's now add metadata to our blog post's page using frontmatter.

---
title: First Blog Post
meta:
  title: First Blog Post
  description: ✨ WoW
---

Hey, welcome to {attributes.title} 👋

As you can see the title of the page has been changed

... and the description as well

Let's me quickly add a few blog posts

Umm... 🤔 Our blog isn't completed yet with any kind of syntax highlighting ✨

✨ Adding syntax highlighting

We are going to be using highlight.js for syntax highlighting, you could even use prism.

🔌 About MDX plugins

We are going to achieve syntax highlighting using something called "MDX plugins". By plugins, we could manipulate the process of MDX converting into HTML.

Generally, there are two types of plugins

Remark plugins are responsible for manipulating the process of converting MDX to markdown.
Rehype plugins are responsible for manipulating the process of converting the markdown to HTML.

For our remix blog, we are going to be using a rehype plugin called rehype-highlight. To install the package using the following command:

npm install rehype-highlight

We need to add a bit of configuration to the remix.config.js file

mdx: async (filename) => {
  const [rehypeHighlight] = await Promise.all([
    import('rehype-highlight').then((mod) => mod.default),
  ]);
  return {
    rehypePlugins: [rehypeHighlight],
  };
};

Now our remix.config.js file would look something like this:

/**
 * @type {import('@remix-run/dev/config').AppConfig}
 */
module.exports = {
  appDirectory: 'app',
  assetsBuildDirectory: 'public/build',
  publicPath: '/build/',
  serverBuildDirectory: 'api/_build',
  ignoredRouteFiles: ['.*'],
  mdx: async (filename) => {
    const [rehypeHighlight] = await Promise.all([
      import('rehype-highlight').then((mod) => mod.default),
    ]);
    return {
      rehypePlugins: [rehypeHighlight],
    };
  },
};

🧾 Creating a layout file

Now we have created a layout file, where we would import one of the highlight.js's styling. I would be using night owl style, you could choose your style from highlight.js's style demo page

To create a layout file for our blog posts, we have created a new file with the same name as the folder name (posts) and the same level of the posts folder.

Now we have to import the night owl theme into our layout file and use that as well.

import styles from 'highlight.js/styles/night-owl.css';
import { Outlet } from 'remix';

export const links = () => {
  return [
    {
      rel: 'stylesheet',
      href: styles,
    },
  ];
};

export default function Posts() {
  return <Outlet />;
}

In remix, we have the links function is similar to the links tag in HTML.

PS: If you are a VSCode user then install this remix run snippets extension 🚀.

Now let's restart our local development server.

TADA 🎉, we have this wonderful syntax highlighting for our code blocks in our blog now

🎨 Adding TailwindCSS Typography

Right now our blog has syntax highlight but the font isn't looking great 🤔 and there is nothing great than @tailwindcss/typography plugin to automatically styles our entire page's font using a single prose class.

📦 Installing dependencies

We need a few dependencies for us to use tailwindcss and tailwindcss's typography plugin.

Those dependencies are:

Concurrently: Concurrently allows you to run multiple commands in a single terminal, so we can watch and build our tailwindcss styles as well as our entire remix application in a single terminal session

Let's install all of them:

npm install -D tailwindcss concurrently @tailwindcss/typography

⚙ Configuring TailwindCSS

Create a new file named tailwind.config.js, this file would contain all the configurations for tailwindcss.

Add the following configuration to the tailwind.config.js file

tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: ['./app/**/*.{ts,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [require('@tailwindcss/typography')],
};

We would have to change the scripts in package.json

  "scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -o ./app/tailwind.css",
    "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
    "dev:css": "tailwindcss -o ./app/tailwind.css --watch"
  },

Importing tailwindcss into the app/root.jsx file

app/root.jsx

import styles from './tailwind.css';

export const links = () => {
  return [{ rel: 'stylesheet', href: styles }];
};

Let's restart our server and run the npm run dev command

You would see an error saying that

app/root.jsx:9:19: error: Could not resolve "./tailwind.css

This occurred because there is no tailwind.css file but you would see that the file is been created. If in your case the file didn't create then create a new file named tailwind.css in the app directory and copy and paste the CSS from this gist, https://gist.github.com/Kira272921/4541f16d37e6ab4d278ccdcaf3c7e36b

💻 Using @tailwindcss/typography plugin

Let's open the app/routes/posts.jsx file and add few styling.

As app/routes/posts.jsx file is the layout file for all the blog posts, if few add any kind of styling then it would reflect in the blog posts pages

return (
  <div className='flex justify-center'>
    <div className='prose lg:prose-xl py-10'>
      <Outlet />
    </div>
  </div>
);

Here are using the @tailwindcss/typography plugin

TADA 🎉. Look how beautiful the blog posts are looking now

📰 Creating a list of articles

Let's create a list of articles on the main page (aka root route).

In remix, you could import the entire mdx module as well as the attributes within them.

app/index.js

import * as firstPost from './posts/build-a-cli-using-nodejs.mdx';
import * as secondPost from './posts/build-a-rest-api-using-nodejs.mdx';

The below function would return the slug (the file name, without the .mdx) with the markdown attributes

app/index.jsx

function postFromModule(mod) {
  return {
    slug: mod.filename.replace(/\.mdx?$/, ''),
    ...mod.attributes.meta,
  };
}

In remix, we use a loader function to load data on the server-side

app/index.jsx

export const loader = () => {
  return [postFromModule(firstPost), postFromModule(secondPost)];
};

Here we are loading each of our MDX modules on the server-side using the loader function

Finally, our app/index.jsx would look something like this

import { Link, useLoaderData } from 'remix';
import * as firstPost from './posts/build-a-cli-using-nodejs.mdx';
import * as secondPost from './posts/build-a-rest-api-using-nodejs.mdx';

function postFromModule(mod) {
  return {
    slug: mod.filename.replace(/\.mdx?$/, ''),
    ...mod.attributes.meta,
  };
}

export const loader = () => {
  return [postFromModule(firstPost), postFromModule(secondPost)];
};

export default function BlogIndex() {
  const posts = useLoaderData();
  return (
    <div className='prose lg:prose-xl py-10 pl-10'>
      <h2>Articles</h2>
      <div className='flex justify-center'>
        <ul>
          {posts.map((post) => (
            <li key={'posts/' + post.slug}>
              <Link to={'posts/' + post.slug}>{post.title}</Link>
              {post.description ? (
                <p className='m-0 lg:m-0'>{post.description}</p>
              ) : null}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

This is how our main page looks 🚀

🚀 Deploying to Vercel

As our application let's deploy it on vercel 🚀.

Initialize an empty git repository

   git init

Create a new GitHub repository
Push your changes to that repository

git remote add origin git@github.com:Kira272921/remix-blog.git # change URL to your repo's link
git add .
git commit -m "feat: initial commit"
git branch -M main
git push -u origin main

If you don't have an account on vercel, create one
Create a new project

Import the remix application from our GitHub account

Deploy the application

If you are getting an error something like this, add a new script to package.json
```
 "postinstall": "remix setup node"
```

The entire code for this tutorial is present on my GitHub: https://github.com/kira272921/remix-blog

Here is what we have built today 🚀: https://remix-blog-orcin.vercel.app/

🧑 About the author

So that's it for this blog post folks 🤞. Meet y'all in the next blog

How I built Inscribe: Bloggers DAO

Avneesh Agarwal — Fri, 28 Jan 2022 02:51:33 +0000

Wassup everyone, in this article I wanna showcase a DAO that I built in the first week of January while learning web3! So, I built a bloggers Dao called Inscribe with Next.js, TailwindCSS, and Thirdweb!

✒️ What is Inscribe?

Inscribe is a DAO for bloggers. Inscribe lets you connect with like-minded people (bloggers). Since it is a DAO it is decentralized and based upon democracy.

Try it now!

🪙What is a DAO?

Dao stands for "Distributed autonomous organization" it is like a decentralized community where you can get an NFT inclusive to the community, vote for certain things in the community, get crypto of the community through AirDrops.

🤓 Walkthrough and the code

🤖 Scripts

Firstly, I created some scripts for different things like creating a bundle drop for NFT, creating a claim condition for the NFT, creating a crypto $INK, creating a voting module, proposals for the voting module, and a few more with the thirdweb sdk. You can check out all the scripts here.

💻 Frontend

Landing page

The front end is powered by Next.js, TailwindCSS, and Thirdweb! Firstly, the user will see the landing page which is just a static page.

Sign in page

After clicking on the app or Join button, it will show the sign-in page. You can sign in through metamask which is the most commonly used way to authenticate in web3 apps! Thirdweb makes authentication with metamask super easy! It is as simple as this-

import { useWeb3 } from "@3rdweb/hooks";

const SignIn = () => {
  const { connectWallet } = useWeb3();

  return (
    <button
      onClick={() => connectWallet("injected")}
      className="group relative mt-5"
    >
      Sign in
    </button>
  );
};

export default SignIn;t

Switch Network

If you are on any other chain/Network, like polygon or ETH Mainnet it will ask you to switch to Rinkeby as the app is built on the Rinkeby Network.

Mint NFT

After you sign in and are on the Rinkeby network, you will see a screen to mint NFT. It will show you some prompts and a popup to pay gas fees. If you don't have the eth for gas fees, you can get it from here for free.

Member's list

The member's list shows the wallet addresses with the amount of INK (crypto of our DAO), they have. It is sorted by the amount everyone has. The tokens are given to people through airdrops (where people randomly get some amounts) or someone else can transfer them to you! If you want some to test, leave your wallet address in the comments 😉. If you want to create your own crypto with Thirdweb, check out this article.

Voting on our proposals

Besides the member list, you will see a proposal(s). You can vote on your polls, most of the features will be implemented after they pass through this poll. So, this helps in making the DAO democratic and community-focused. At the time of publishing this article, we have one proposal of adding "Add blogging feature to Inscribe". You can vote for, against or Abstain. This was made possible by the Vote module of Thirdweb.

Source code

The project is open-source on GitHub, so feel free to contribute, use and star the repo!

Getting an exclusive role in the discord server

We also have a discord server for Inscribe where you can connect with other people. In this server, we have an exclusive Member role for people who have minted the NFT.

This role gives you access to special channels! All this is powered by Collabland. To get the role after minting the NFT, simply go to the discord server and inside the #collabland-join channel, click on the Let's go button and verify your NFT, you will soon get the role 🥳

Conclusion

This was a fun build to kick off my web3 journey, I couldn't add more features as I had my exams :( but soon, I am going to add more features and functionalities to it!

Due to thirdweb, I could build this so fast and easily! Join us now on our DAO and the discord server. See ya there ✌️

Useful Links

Live Demo

GitHub repo

Let's Connect

Introducing Vault3 - Your Safest Decentralized Vault!

Anurag — Thu, 27 Jan 2022 09:26:57 +0000

❓ What is Vault3?

Simply speaking, Vault3 is a decentralized vault for all your digital belongings, like Passwords, Images, and Files.

Vault3 is our submission for the Hashnode x ThirdWeb Hackathon

Try Vault3

✏️ Hashnode

In case you don’t know, Hashnode is the easiest way to start a developer blog on your personal domain for free and connect with the readers through its global dev community!

🌐 ThirdWeb

These days, Web3.0 is catching everyone’s eyes, and as a developer myself, the learning curve is pretty steep. That’s where ThirdWeb comes in! ThirdWeb is a sweet collection of tools that can be used to build sophisticated Web3 apps, with ease.

Tracing Back to Vault3, let’s first see where the Idea came from.

😕 The Problem

It is normal tendency for humans to forget things that are long or things that cant be remembered easily. Hence, we write them down in a place to use them when needed. But in the digital world, writing important things that are hard to remember like passwords in physical objects like paper has become highly unlikely. It has become quite common to store important things in applications like password/note managers.

But have we ever thought about the safety of our digital belongings in those applications that are centralized? Have we ever thought that our data can be easily censored by the applications where we store them in?

Enter Vault3, a safe and secure digital vault.

🔭 Deep Dive into Vault3

Speaking of Vault3, it’s a web application built with technologies like NextJS, Chakra UI and some external libraries.

Vault3 provides users with a safe vault, which they can use to store important belongings such as Photos, Passwords and Files.

The way it works is:

User first connects their wallet, like Metamask
Then they create a private key to access their vault. To create a private key, user needs to upload an Image of their choice. This Image is hashed and will be used as a private key to access the vault.
Now the user can access their vault through a Dashboard
Here the user can upload Passwords, Images and Files
Users can also delete, download and view their stats.

✨ The Tech Stack

NextJS
Chakra UI
Thirdweb
Hardhat

👀 Understanding the flow of the app

🔒 Authentication

The auth flow is handled by crypto wallets as in web3.0 protocols. We are using Thirdweb as our provider. At the time of writing this article, Vault3 only supports Metamask wallet.

🔑 Generating the private key

The private key to access the vault is basically generated from the Image that the user provides when creating a new private key.

The Image is first converted into byte data, and then its hashed using the HmacSHA256 algorithm, which is then used as a private key to access the vault.

To access their vault again, users must provide the same Image.

💽 Uploading Flow

All of your data is stored safely on the Polygon blockchain using the AES encryption algorithm.

🔑 Uploading Password

Storing a password is extremely simple. You are just required to enter the Website for which you want to store the password, your Username or Email you used for that site and lastly the Password itself. You can also copy the password and also reveal it once it has been stored. You can also filter your passwords by searching for the site address that you have given while storing a new password.

🌆 Uploading Image

The process for storing an image relatively remains the same as storing a password except the field where you would enter the name of the site is now replaced by a field for Name of the image. And, you now have a field to insert your image. Vault3 supports various image formats such as PNG, JPG, SVG, GIF and WEBP. Ta-da! Your image is now stored in your vault!

📁 Uploading Files

Moving onto importing a file. Vault3 supports insertion of files of all kinds, so you do not have to worry about the format of your file. You just need to insert your file and the Name field is populated by the name of the file you have chosen and you cannot change the Name for a file unlike the situation of storing an Image.

Apart from uploading Passwords, Images, and Files, users can also delete and download the data stored in their vault.

Note: Since Vault3 is based on web 3.0, most of these operations require Gas Fees in the form of MATIC tokens.

ℹ️ On a sidenote:

Vault3 currently operates on the Mumbai Polygon Testnet Network, and you can get some fake MATIC here

👥 Moving from this, Let’s meet the Team:

Saptarshi Basu - Builder, saptarshii.me@gmail.com
Anurag - Co-Builder, kr.anurag24@gmail.com

Twitter Launch Post

🔗 External Links

Metamask authentication in Next.js with Clerk 🔒

Avneesh Agarwal — Sun, 23 Jan 2022 13:53:54 +0000

Hello everyone! As you have seen web3 is very popular right now. Clerk has recently released metamask authentication. So let's take a look at how to implement it in our app!

What is Clerk?

Clerk is one of the best ways to add authentication to a Next.js or a react application. It gives us things that are a pain to handle on our own like user management and multiple sessions.

Why use Clerk?

Easy to work with
Customizable
2-step verification
New device notifications
Single sign-on
Passwordless sign-in
Multi-sessions

Setup

Setting up our Next.js app

Creating a new Next.js app

npx create-next-app next-clerk-demo

Installing Clerk

npm i @clerk/clerk-react # npm
yarn add @clerk/clerk-react # yarn

Setting up Clerk

Go to Clerk, sign up/in, then create a new app. Select "Sign in with Metamask" as the Authentication strategy-

If you now go to "API Keys" in the sidebar, you will be able to see your frontend API key. Copy it as we are going to need it soon.

Integrating Clerk into Next.js

Configuring Clerk

Inside _app.js wrap the in a ClerkProvider-

<ClerkProvider
  frontendApi={clerkFrontendApi}
  navigate={(to) => router.push(to)}
>
  <Component {...pageProps} />
</ClerkProvider>

Get router from useRouter-

const router = useRouter();

Import useRouter and ClerkProvider-

import { ClerkProvider } from "@clerk/clerk-react";
import { useRouter } from "next/router";

As you can see we also need the clerkFrontendApi, so create a new variable-

const clerkFrontendApi = process.env.NEXT_PUBLIC_CLERK_FRONTEND_API;

We are going to use env variables for the API key, so create a new file .env.local, and add NEXT_PUBLIC_CLERK_FRONTEND_API-

NEXT_PUBLIC_CLERK_FRONTEND_API=YOUR_API_KEY

Paste in the API key that you got from the clerk dashboard. You also going to restart the dev server-

npm run dev # npm

yarn dev # yarn

Creating the sign-in button

Inside index.js add the following-

<SignedOut>
  <SignInWithMetamaskButton>Sign in with Metamask</SignInWithMetamaskButton>
</SignedOut>

You also need to import the following-

import {
  SignedIn,
  SignedOut,
  SignInWithMetamaskButton,
} from "@clerk/clerk-react";

Now, if you go to http://localhost:3000/, you will be able to see a sign-in button!

If you try clicking on it, it works 🥳.

Showing UserProfile and address if the user is logged in

Show a User component if the user is SignedIn-

<SignedIn>
  <User />
</SignedIn>

Create a new component in the components folder as User.js and add the following-

import { UserButton, useUser } from "@clerk/clerk-react";

const User = () => {
  const user = useUser();

  console.log(user);
  return (
    <div>
      <UserButton />
      <p>{user.web3Wallets[0].web3Wallet}</p>
    </div>
  );
};

export default User;

Clerk provides a useUser hook which allows us to access the user's details like the wallet address.

If you now login into the app then, it would show you a profile picture and your address-

If you click on the user profile, it will show you a popup. You can click on manage account to add details like name, email, profile picture, etc.

Keeping the user's on our site

When you clicked on manage account, you might have noticed that the URL was completely different and was not looking good. So let's see how to keep users on our site itself!

Create the sign in, sign up, and the user page
Inside the pages folder we will create 3 folders named

sign-in
sign-up
user

Inside all the folders we will create a file named [[…index]].js
Here is the code for all the files-

sign-in/ [[…index]].js

import { SignIn } from "@clerk/clerk-react";

export default function SignInPage() {
  return <SignIn path="/sign-in" routing="path" />;
}

sign-up/ [[…index]].js

import { SignUp } from "@clerk/clerk-react";

export default function SignUpPage() {
  return <SignUp path="/sign-up" routing="path" />;
}

user/ [[…index]].js

import { UserProfile } from "@clerk/clerk-react";

export default function UserProfilePage() {
  return <UserProfile path="/user" routing="path" />;
}

Now, go to the clerk dashboard, and click on paths in the sidebar. Now edit the URLs with the following-

If you now try signing in, signing up, or viewing your profile then the user will be on the website itself (localhost in development).

Video demo

Useful links

Clerk

GitHub Repo

How to build a REST API using NodeJS

Mukesh — Sat, 22 Jan 2022 14:08:57 +0000

👋 Hey everyone, I know it's been a long since I posted a new blog 😅. 👀 So in this blog post we are doing to build a REST API that would serve as a source of motivation for developers using NodeJS and MongoDB. So let's get started 🏄‍♂️

What's an API? 🤔

API stands for "Application Programming Interface" which is a tool that allows two applications to talk to each other 📞. Let's understand the meaning of API by some real-life examples ✨

So you have built an amazing e-store application and you wanted other developers to build applications on it. Now you have to build some sort of software that communicates between your web service and the developer's application and that's where API comes in.

What's a REST API? 🤔

Now as you have let's talk something about "REST APIs". REST stands for Representational State Transfer, it's one of the most popularly known type of API architecture. These types of APIs follow the client-server model, where one program sends a request and the other response with some data.
The requests are HTTP methods such as POST, GET, PUT, DELETE...

You would have a more clear understanding of APIs and REST APIs when we build a project 👀. So what are we waiting for, let's dive started into coding 👨‍💻.

Setting up the project 🛠

Let's set up our project so that we can start coding 👨‍💻.

Creating a separate folder for our project

   $ mkdir dev-credits-api

Navigate into the folder

   $ cd dev-credits-api

Initializing the project

   $ npm init

Installing the required packages

   $ npm install mongoose express dotenv cors

   # or

   $ yarn add mongoose express dotenv cors

Express is the framework by which we are going to our REST API
Mongoose is the tool that we are going to use to communicate with our MongoDB database

4.1. Installing nodemon as a dev dependency
```
 $ npm install nodemon -D

 # or

 $ yarn add nodemon -D
```
- Nodemon is used for automatically restarting the server on file changes detected in the directory. This would be helpful as we would not be restarting the server each time we do changes

Building the REST API 👨‍💻

As we have completed the setup for our project, let's get started building the REST API.

Create a new file named index.js

Here is the boilerplate code for a basic express app

index.js

const express = require('express');

const app = express();

const port = process.env.PORT || 3000;

app.listen(port, async () => {
  console.log(`Server is running at port ${port}`);
});

Let's breakdown it into and understand each part:

We are requiring the express package into our file so that we can use it
We are assigning some value to the variable port, the port where our server would be running. You might be thinking why is there a process.env.PORT? 🤔. It's because during deployment on services such as Heroku the port number might vary, it may not be 3000 so we are telling that if there is a PORT environment variable then use that else use 3000
The last piece of code is telling to which port the server should listen, in our case it's the PORT variable

Let's add a new script named start to the package.json file which uses nodemon to automatically restart the server on file changes detected. So after the changes our scripts in package.json would look something like this:

"scripts": {
   "start": "nodemon index.js"
}

Let's start our server by running the npm start command. The server would be running at http://localhost:3000. You prompted with an error something like this:

This is happening because we haven't defined the / (aka the root route)

HTTP methods explained

Let's take a break from coding and understand what do they do and what's the success and error status so that it would be easy for debugging 😎

GET

What it does: Request data from a specified resource

Successful response: 200 OK

Error response: 404 not found

POST

What it does: Send data to the server to create a new resource

Successful response: 201 Created

Error response: 404 not found or 409 conflict - if the resource already exists

PUT

What it does: Send data to the server to update a pre-existing resource

Successful response: 200 OK

Error response: 204 no content, 404 not found or 405 method not allowed

DELETE

What it does: Deletes a resource from the server

Successful response: 200 OK

Error response: 404 not found or 405 method not allowed

Check out http.cat for understanding what each HTTP status code means via funny cat images 😹

Adding routes 🛣

Routes are different URL paths of an express app that are associated with different HTTP methods, such as GET, POST, DELETE, PUT.

Let's get started by creating / which sends "Hello, World!"

Add the below piece of code above the line where we declared the port variable

index.js

app.get('/', function (req, res) {
  res.send('Hello, World!');
});

Let's breakdown this piece of code:

The get method specifies the HTTP method for that route. You could use other HTTP methods like post, delete...
- There is a special routing method all which is used for the routes which handle all kinds of HTTP methods
There is a callback method that is called when the server receives a request from that endpoint with that specified HTTP method

🥳 Horray! "Hello, World" is now visible in the / route

Setting up MongoDB

Let's get in the MongoDB database now 😎.

Head over MongoDB and sign up/sign in and create a new project

You could your co-worker into the project if you wanted too.

After the creation of the project, click on Build a Database

You would be shown with a screen something like this:

Let's go ahead and choose the free plan 👀

You would be shown some more options about the cloud provider and the location

Let's choose the nearest region and move forward.

You would be asked to create a user. This is required as you would need the username and password to generate a connection URL which is then used to connect MongoDB with your NodeJS app.

The creation of the cluster would take 1 - 3 minutes. So let's grab a cup of coffee until then ☕. Ahh... it's been successfully created so let's get back to coding 👨‍💻

Click on Connect

Click on Connect your application

Copy the connection URL

Create a .env file and replace <password> with the password of the user which you have replaced previously

MONGODB_URL="mongodb+srv://kira272921:<password>@dev-credits-api.t5tkf.mongodb.net/myFirstDatabase?retryWrites=true&w=majority"

Let's head back to the good old index.js file

Connecting Express app to MongoDB

Let's start by requiring mongoose and dotenv

const mongoose = require('mongoose');
const dotenv = require('dotenv');

Let's configure dotenv as well

dotenv.config();

Let's finally add the piece of code which connects our express application to MongoDB

mongoose
  .connect(process.env.MONGODB_URL, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => {
    console.log('Connected to MongoDB');
  })
  .catch((err) => {
    console.log(err);
  });

The index.js file show looks something like this now

index.js

const express = require('express');
const mongoose = require('mongoose');
const dotenv = require('dotenv');

dotenv.config();

const app = express();

mongoose
  .connect(process.env.MONGODB_URL, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => {
    console.log('Connected to MongoDB');
  })
  .catch((err) => {
    console.log(err);
  });

app.get('/', function (req, res) {
  res.send('Hello, World!');
});

const port = process.env.PORT || 3000;

app.listen(port, async () => {
  console.log(`Server is running at port ${port}`);
});

🥳 We successfully connected our express app to the MongoDB database.

Creating Schema and Model 📝

A Schema is the structure of the documents in our database. It tells what fields are required, what's the data type of each field.

A model provides a programming interface for interacting with the database (read, insert, update, etc).

Let's create a new folder named model and inside it let's create a model.js where we will define our schema

model/model.js

const mongoose = require('mongoose');

const devCredits = new mongoose.Schema({
  credits: {
    type: Number,
    required: true,
  },
  id: {
    type: Number,
    required: true,
  },
});

module.exports = mongoose.model('devCredits', devCredits);

Let's breakdown it down and understand

We imported the mongoose package into the model/model.js file
We created a new schema named devCredits. The structure has the credits and id. Credits are the number of dev credits the person has and the id is the discord id of the user (This API was initially created for a discord bot Dev credits bot so the schema of the database is kinda based on discord 🤷‍♂️)
We have finally created a model named "devCredits"

Adding more features 😎

Let's add more routes to our REST API. Let's add routes where we can get the total dev credits of a user via their discord ID and give dev credits to other users using another route.

Giving dev credits to other devs

Let's import our model which we have just created into the index.js file.

const devCredits = require('./model/model.js');

Let's add a new POST route in the index.js file

app.post('/post', function (req, res) {
  const credit = new devCredits({
    id: req.body.id,
    credits: req.body.credits,
  });

  devCredits.countDocuments({ id: req.body.id }, function (err, count) {
    if (count > 0) {
      devCredits.findOneAndUpdate(
        { id: req.body.id },
        {
          $inc: {
            credits: req.body.credits,
          },
        },
        { new: true },
        (err, devCredit) => {
          if (err) {
            res.send(err);
          } else res.json(devCredit);
        }
      );
    } else {
      credit.save((err, credits) => {
        if (err) {
          res.send(err);
        }
        res.json(credits);
      });
    }
  });
});

Let's understand what exactly is going on:

We have created a new POST route (/post)
We validate the data which we receive from the client using our model
In the next piece of code we are checking if the user (user id) already exists in the database or not
- If exists then we are going to increment the credits value
- Else we are going to create a new document with the user id and add the credits

How to test the API?

We have successfully created added a new feature in our API 🥳. But wait how are we going to test it out 🤔

👀 We are going to use a VSCode extension called Thunder Client, which is used for API testing. So let's quickly download it and test our new feature in our API 🥳.

After the completion of the download, you are going to see a thunder icon in your sidebar 👀

Click the thunder icon and you are going to see a section something like this

Click on New Request. You would be prompted to screen something like this

Let's test out our /post route now 🥳. Change the URL in the input box from https://www.thunderclient.com/welcome to HTTP:localhost:3000/post

Change the HTTP method from GET to POST

Navigate to the Body tab, this is the section where we are going to write the body of the request.

I have added my discord ID and gave 100 dev credits to it, cuz why not

Let's click and hope that it works 🤞

🥁🥁🥁🥁🥁 and we got an error

This happened because we didn't have any middleware so let's them quickly

index.js

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

NOTE: We had installed cors as a separated package, so don't forget to import it as well

Let's try again now so that it works now 🤞

🎉 TADA! We have successfully created our first feature in the API which interacts with the MongoDB database

Getting the total dev credits of a user

Let's import our model which we have just created into the index.js file.

const devCredits = require('./model/model.js');

Let's add a new route in the index.js file

app.get('/get/:id', function (req, res) {
  devCredits.find({ id: req.params.id }, { _id: 0, __v: 0 }, (err, data) => {
    if (err) {
      res.json(err);
    }
    res.json(data);
  });
});

Let's breakdown this down

We have created a new route with the GET method
We are finding in the database for the ID given in the parameters

Let's test it out again using Thunder Client 👀.

🎉TADA! It's works

Cleaning up the codebase

Let's clean up the codebase a bit 😅.

Let's create a new folder called routes and inside it let's create a new file router.js which contains the routes

routes/router.js

const router = require('express').Router();
const devCredits = require('../model/model.js');

router.get('/get/:id', function (req, res) {
  devCredits.find({ id: req.params.id }, { _id: 0, __v: 0 }, (err, data) => {
    if (err) {
      res.json(err);
    }
    res.json(data);
  });
});

router.post('/post', function (req, res) {
  const credit = new devCredits({
    id: req.body.id,
    credits: req.body.credits,
  });

  devCredits.countDocuments({ id: req.body.id }, function (err, count) {
    if (count > 0) {
      devCredits.findOneAndUpdate(
        { id: req.body.id },
        {
          $inc: {
            credits: req.body.credits,
          },
        },
        { new: true },
        (err, devCredit) => {
          if (err) {
            res.send(err);
          } else res.json(devCredit);
        }
      );
    } else {
      credit.save((err, credits) => {
        if (err) {
          res.send(err);
        }
        res.json(credits);
      });
    }
  });
});

module.exports = router;

We have imported the routes/router.js file into the index.js file and used it

index.js

const express = require('express');
const mongoose = require('mongoose');
const dotenv = require('dotenv');
const cors = require('cors');

dotenv.config();

const router = require('./routes/router.js');

const app = express();

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

mongoose
  .connect(process.env.MONGODB_URL, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => {
    console.log('Connected to MongoDB');
  })
  .catch((err) => {
    console.log(err);
  });

app.get('/', function (req, res) {
  res.send('Hello, World!');
});

app.use(router);

const port = process.env.PORT || 3000;

app.listen(port, async () => {
  console.log(`Server is running at port ${port}`);
});

Let's test it out so that we are sure that our code and we didn't mess up by cleaning up the mess 😆

🥳 Horray! There isn't any error and the code still works as it was before

😅 Doesn't routes/router.js seem kinda filled up with the logic and make it kinda messy?

Let's create a new folder named controllers. In this folder, we will store the logic related to each route.

Let's get started by creating a new file in the controllers folder named getCredits.js and postCredits.js which contains the logic related to the /get route and /post route respectively

controllers/getCredits.js

const devCredits = require('../model/model.js');

const getCredits = (req, res) => {
  devCredits.find({ id: req.params.id }, { _id: 0, __v: 0 }, (err, data) => {
    if (err) {
      res.json(err);
    }
    res.json(data);
  });
};

module.exports = getCredits;

controllers/postCredits.js

const devCredits = require('../model/model.js');

const postCredits = (req, res) => {
  const credit = new devCredits({
    id: req.body.id,
    credits: req.body.credits,
  });

  devCredits.countDocuments({ id: req.body.id }, function (err, count) {
    if (count > 0) {
      devCredits.findOneAndUpdate(
        { id: req.body.id },
        {
          $inc: {
            credits: req.body.credits,
          },
        },
        { new: true },
        (err, devCredit) => {
          if (err) {
            res.send(err);
          } else res.json(devCredit);
        }
      );
    } else {
      credit.save((err, image) => {
        if (err) {
          res.send(err);
        }
        res.json(image);
      });
    }
  });
};

module.exports = postCredits;

routes/router.js

const router = require('express').Router();

const devCredits = require('../model/model.js');
const getCredits = require('../controllers/getCredits.js');
const postCredits = require('../controllers/postCredits.js');

router.get('/get/:id', getCredits);

router.post('/post', postCredits);

module.exports = router;

Phew, that was a lot of work 😹

Adding rate limit

You don't want some random guy to just spam your entire database 😆. So let's add a rate limit to our API when restricts the client to perform only a few requests every x minutes

Let's install express-rate-limit package

$ npm install express-rate-limit

# or

$ yarn add express-rate-limit

Let's create a middleware folder that contains all the middlewares of our API. Create a file named rateLimiter.js under the middleware folder

middleware/rateLimiter.js

const rateLimit = require('express-rate-limit');

const rateLimiter = rateLimit({
  windowMs: 1 * 60 * 1000, // 1 minute
  max: 10,
  message: 'Bonk 🔨',
});

module.exports = rateLimiter;

Let's understand what this piece of code is doing?

We are importing the express-rate-limit package
The windowMs specifies the duration
The max specifies the max amount of requests the client can make in the duration specified
The message is the message which is shown to the client when he exceeds the max limit

So let's import into the index.js file and test it out

index.js

const rateLimiter = require('./middleware/rateLimiter.js');

app.use(rateLimiter);

😹 I got bonked by myself

Deploying our API on Heroku

👀 We have successfully built an API but how would other developers use it if it isn't deployed?

Let's deploy it on Heroku 🚀.

Get started by initializing a git repository in the directory. Create a new GitHub repository and push your changes into that repository 👀

Let's create a new file named Procfile which is just a file that tells Heroku which command is need to be run. Add the below content to the Procfile file

web: node index.js

NOTE: nodemon doesn't work in the production stage. It only works in the development stage, so we have to use the good old node index.js

Create an account on Heroku and click on Create new app, give some cool name to your API

Head over to the settings tab and click Reveal Config Vars

These are the environment variables

Add a new config var with the key as MONGODB_URL and the value as your MongoDB connection URL

Head back to the deploy tab and connect the GitHub repository which you have created just before to your Heroku application

Click the Deploy branch button. TADA 🚀 You have successfully created a REST API and deployed it as well :D

The entire source code for this tutorial will be available on my GitHub https://github.com/Kira272921/dev-credits-api

Check out the API which we built today:

https://devcredits-api.herokuapp.com/

That's it for this blog folks 🤞. Meet y'all in the next blog post

Metamask authentication in NextJS with Third Web

Anurag — Tue, 11 Jan 2022 13:33:55 +0000

Hey There! What's up!

So Web3 has been in total hype these days, and a lot of developers have been trying out web3 lately, including me.

And, Authentication is one of the most skeptical parts of a Full Stack application! And in Web 3.0, this flow is managed by wallets, and Metamask is the most popular among them.

So, in this article, I'm going to show how you can integrate Metamask auth with ThirdWeb in NextJS!

Demo of what we are building today:

Demo

Installing a new NextJS app

First, create a NextJS app. I'm also using Tailwind CSS as my UI preference. You can use anything that you like.

npx create-next-app -e with-tailwindcss metamask-auth

Clear up the boilerplate

Now, clear up the boilerplate in the index.js file.

export default function Home() {
  return <div></div>;
}

Installing the dependencies

Now, we will install the only required dependency for this app, @3rdweb/hooks. Go ahead and install @3rdweb/hooks in your project directory.

# for npm
npm i @3rdweb/hooks

# for yarn
yarn add @3rdweb/hooks

Setting up the Third Web Provider

Now, we are going to set up the ThirdwebWeb3Provider in our _app.js file:

import "../styles/globals.css";
import { ThirdwebWeb3Provider } from "@3rdweb/hooks";

import "regenerator-runtime/runtime";

function MyApp({ Component, pageProps }) {
  const supportedChainIds = [80001, 4];

  const connectors = {
    injected: {},
  };

  return (
    <ThirdwebWeb3Provider
      supportedChainIds={supportedChainIds}
      connectors={connectors}
    >
      <Component {...pageProps} />
    </ThirdwebWeb3Provider>
  );
}

export default MyApp;

Here, first, we are going to import the provider and regenerator-runtime/runtime at the top of the script.

import { ThirdwebWeb3Provider } from "@3rdweb/hooks";

import "regenerator-runtime/runtime";

Next, in the main function, we are specifying the supportedChainIds and connectors. You might be wondering what are these.

supportedChainIds contains a list of networks that are supported by our app. Here, 80001 is for Mumbai Testnet Network and 4 is for Rinkeby Testnet Network. You can check the list of all networks and their Chain Ids here .

connectors is basically all the wallet providers we want to support. Here, injected is for Metamask wallet. This will be used when we are actually making the function to connect wallet.

Next, we are wrapping our whole app in ThirdwebWeb3Provider with supportedChainIds and connectors props to specify the configuration.

That's it for the _app.js file.

Making a UI in the `index.js` file

Now, let's first make a UI for the login flow.

Head over to index.js file and make a simple button to connect wallet.

export default function Home() {

  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2 bg-slate-100">
        <button
          className="px-4 py-2 rounded-md bg-purple-600 cursor-pointer hover:bg-purple-500 text-xl font-semibold duration-100 text-white"
        >
          Connect Wallet
        </button>
    </div>
  );
}

At this point, you will have a basic UI like this:

Building the connect wallet functionality

Now, let's build the connect wallet functionality.

First, we will import the useWeb3 hook from @3rdweb/hooks in our index.js file:

import { useWeb3 } from "@3rdweb/hooks"

Now, inside the Home component:

const { connectWallet, address, error } = useWeb3();

Now, we are going to assign the connectWallet to the connect wallet button:

<button className="px-4 py-2 rounded-md bg-purple-600 cursor-pointer hover:bg-purple-500 text-xl font-semibold duration-100 text-white"
onClick={()=>connectWallet("injected")}
>
      Connect Wallet
</button>

Here, we are passing injected as a param to the connectWallet function. If your remember from the above steps, this is used to specify that we are going to use Metamask to authenticate user.

Now, at this point, you will have a working connect wallet button.

Displaying user address:

Now, in the Home component, we are going to check if the user is authenticated and then render component based on that:


return (
  <div className="flex flex-col items-center justify-center min-h-screen py-2 bg-slate-100">
    {address ? (
      <p className="px-2 py-1 rounded-full bg-gray-200 hover:bg-gray-300 font-mono font-medium cursor-pointer duration-100">
        {address}
      </p>
    ) : (
      <button
        className="px-4 py-2 rounded-md bg-purple-600 cursor-pointer hover:bg-purple-500 text-xl font-semibold duration-100 text-white"
        onClick={()=>connectWallet("injected")}
      >
        Connect Wallet
      </button>
    )}
  </div>
);

Error handling:

Sometimes, the app may not work cause of errors, so in that case, we can use the error object and log its value.

Below our useWeb3 hook:

const { connectWallet, address, error } = useWeb3();

error ? console.log(error) : null;

That's it! We have done it!

How to build a CLI using NodeJS 💻

Mukesh — Tue, 04 Jan 2022 11:50:40 +0000

How to build a CLI using NodeJS 💻

CLI (Command Line Interface) is one of the most basic and powerful applications ever created by mankind. We all use CLI every day, whether it be npm, git, or any other CLI. Does your daily basis workflow have something that you have to do over and over again? 🤔. The chances are that it could be automated using CLI ✨

So let's get started 🏄

Today we are going to be building a CLI which would generate starter templates with TailwindCSS, ESLint, and Prettier pre-installed.

Prerequisites

Here are a few tools which you would need to follow along with the tutorial:

A LTS (Long Term Support) version of NodeJS installed.
A text editor.

Setting up the project

Let's initialize a NodeJS project

Open up your terminal
Create a folder for your project

mkdir tailwindcli

Navigate into it

cd tailwindcli

Initializing a NodeJS project

npm init

Building the CLI

Now that we have our NodeJS setup ready. Let's start building our CLI

Create a folder named bin in the root directory of your project folder.
Create a file called index.js in the bin folder. This is going to be the main file of the CLI.
Now open up the package.json file and change the value of the key main to ./bin/index.js.
Now add an entry into the package.json file called bin and add set its key to tcli and its value to ./bin/index.js

The word tcli is the keyword which we would be using to call our CLI.

After making the changes the package.json file should look something like this:

{
  "name": "tailwindcli",
  "version": "1.0.0",
  "description": "A CLI for generating starter files with TailwindCSS pre-installed",
  "main": "./bin/index.js",
  "bin": {
    "tcli": "./bin/index.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": ["cli", "tailwindcss", "nodejs"],
  "author": "Your name",
  "license": "MIT"
}

Open bin/index.js file and add this line at the top of the file

#! /usr/bin/env node

The line starting with a #! is called a shebang line. A shebang line is used to tell the absolute path to the interpreter that will run the below code.

Let's add some JS code so that we can test the CLI out 🚀.

Adding some JS code

console.log('The CLI is working 🚀');

Installing and testing the CLI out

A CLI is meant to be called from anywhere in the system so let's install it globally by using the following command

npm install -g .

Let's test our CLI by running tcli command.

🎉 Tada, our CLI is working

Installing and working with Inquirer

Inquirer is a package that is used to make interactive CLI interfaces. Such as :

To install run the following command

npm install inquirer

Adding the boilerplate of inquirer

Here is the boilerplate for inquirer

#! /usr/bin/env node

const inquirer = require('inquirer');

inquirer
  .prompt([
    /* Pass your questions in here */
  ])
  .then((answers) => {
    // Use user feedback for... whatever!!
  });

Adding questions

We have to pass questions as objects. Let's add the first question asking about the JS framework.

#! /usr/bin/env node

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      type: 'list',
      name: 'framework',
      message: 'Choose the JS framework which you are using:',
      choices: ['React', 'NextJS', 'Angular', 'Svelte', 'VueJS'],
    },
  ])
  .then((answers) => {});

Let's break it down and understand what each part means

type : Inquirer currently has 9 different CLI user interfaces.
name : Inquirer returns the answers in the form of an object. For example:
- If we add console.log(answers);, then we would get a result something like this

So here the name is the key of the object

message : It is the question which is been displayed to the user
choices : These are the options given to user

Cleaning up the codebase [Optional]

We could create a folder inside the bin folder named utils and create a file inside the utils folder named questions.js. In the questions.js we can store the questions and import them into the index.js file

utils/questions.js

// This question would be shown at the starting
const questions = [
  {
    type: 'list',
    name: 'framework',
    message: 'Choose the JS framework which you are using:',
    choices: ['React', 'NextJS', 'Angular', 'Svelte', 'VueJS'],
  },
];

// This question would be shown only when the user choose either React or NextJS
const questionsTs = [
  {
    type: 'list',
    name: 'typescript',
    message: 'Does your project use TypeScript?',
    choices: ['Yes', 'No'],
  },
];

module.exports.questions = questions;
module.exports.questionsTs = questionsTs;

index.js

#! /usr/bin/env node

const inquirer = require('inquirer');

const { questions, questionsTs } = require('./utils/questions.js');

inquirer.prompt(questions).then((answers) => {
  // Use user feedback for... whatever!!
});

Adding logic

It's time to add some logic as we are doing creating questions.

Accessing answers to questions are similar to accessing the value of a key from an object. The value of the answer of a specific question is answers.<name-of-the-question>

As we are creating starter files, let's use ShellJS to run commands like git clone, mkdir...

Installing ShellJS

To install ShellJS run the following command

npm install shelljs

Working with ShellJS

Let's add a few if and else blocks for logic

#! /usr/bin/env node

const inquirer = require('inquirer');
const shell = require('shelljs');

const { questions, questionsTs } = require('./utils/questions.js');

inquirer.prompt(questions).then((answers) => {
  if (answers.framework === 'React') {
    inquirer.prompt(questionsTs).then((answersTs) => {
      if (answersTs.typescript === 'Yes') {
        // If the user has choosen React and want to use TypeScript
      } else {
        // If the user has choosen React but doesn't want to use TypeScript
      }
    });
  } else if (answers.framework === 'NextJS') {
    inquirer.prompt(questionsTs).then((answersTs) => {
      if (answersTs.typescript === 'Yes') {
        // If the user has choosen NextJS and want to use TypeScript
      } else {
        // If the user has choosen NextJS but doesn't want to use TypeScript
      }
    });
  else if (answers.framework === 'Svelte') {
    // If the user has choosen Svelte
  } else {
    // If the user has choosen VueJS
  }
});

Let's find some templates for the JS frameworks integrated with TailwindCSS

Thanks a lot to the wonderful people who have made these great templates for the community ✨

To run a git clone command, use ShellJS we have just used the exec method

shell.exec('git clone <repo-link>');

Let's fill up the if and else blocks now

#! /usr/bin/env node

const inquirer = require('inquirer');
const shell = require('shelljs');

const path = process.cwd();

const { questions, questionsTs } = require('./utils/questions.js');

inquirer.prompt(questions).then((answers) => {
  if (answers.framework === 'React') {
    inquirer.prompt(questionsTs).then((answersTs) => {
      if (answersTs.typescript === 'Yes') {
        shell.exec(`mkdir ${answers.projectName}`);
        shell.exec(
          `git clone https://github.com/GKaszewski/react-tailwind-typescript-template ${answers.projectName}`
        );
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
        );
      } else {
        shell.exec(`mkdir ${answers.projectName}`);
        shell.exec(
          `git clone https://github.com/YashKumarVerma/react-tailwind-template ${answers.projectName}`
        );
        console.log('🛠️  Successfully build the required files');
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
        );
      }
    });
  } else if (answers.framework === 'NextJS') {
    inquirer.prompt(questionsTs).then((answersTs) => {
      if (answersTs.typescript === 'Yes') {
        shell.exec(`mkdir ${answers.projectName}`);
        shell.exec(
          `git clone https://github.com/avneesh0612/next-starter ${answers.projectName}`
        );
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
        );
      } else {
        shell.exec(`mkdir ${answers.projectName}`);
        shell.exec(
          `git clone https://github.com/Neeraj1005/Nextjs-tailwind-template ${answers.projectName}`
        );
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
        );
      }
    });
  } else if (answers.framework === 'Svelte') {
    shell.exec(`mkdir ${answers.projectName}`);
    shell.exec(
      `git clone https://github.com/jhanca-vm/Svelte-Tailwind ${answers.projectName}`
    );
    shell.cd(`${path}/${answers.projectName}`);
    shell.exec(`npm i`);
    console.log(
      '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
    );
  } else {
    shell.exec(`mkdir ${answers.projectName}`);
    shell.exec(
      `git clone https://github.com/web2033/vite-vue3-tailwind-starter ${answers.projectName}`
    );
    shell.cd(`${path}/${answers.projectName}`);
    shell.exec(`npm i`);
    console.log(
      '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
    );
  }
});

Cleaning up the codebase [Optional]

Let's create a new file in utils folder named links.js. Let's create a hashmap where we will store the GitHub repository links for the template repos.

let links = new Map([
  ['React', 'https://github.com/YashKumarVerma/react-tailwind-template'],
  [
    'React-TS',
    'https://github.com/GKaszewski/react-tailwind-typescript-template',
  ],
  ['NextJS', 'https://github.com/Neeraj1005/Nextjs-tailwind-template'],
  ['NextJS-TS', 'https://github.com/avneesh0612/next-starter'],
  ['Svelte', 'https://github.com/jhanca-vm/Svelte-Tailwind'],
  ['Vue', 'https://github.com/web2033/vite-vue3-tailwind-starter'],
]);

module.exports = links;

Let's import utils/index.js and replace the GitHub template repositories links.

#! /usr/bin/env node

const inquirer = require('inquirer');
const shell = require('shelljs');

const path = process.cwd();

const { questions, questionsTs } = require('./utils/questions.js');
const links = require('./utils/links.js');

inquirer.prompt(questions).then((answers) => {
  if (answers.framework === 'React') {
    inquirer.prompt(questionsTs).then((answersTs) => {
      if (answersTs.typescript === 'Yes') {
        shell.exec(`mkdir ${answers.projectName}`);
        console.log('📁 Created a folder for the project');
        shell.exec(`git clone ${links.get('React-TS')} ${answers.projectName}`);
        console.log(`🖨️  Cloned started files into ${answers.projectName}`);
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
        );
      } else {
        shell.exec(`mkdir ${answers.projectName}`);
        console.log('📁 Created a folder for the project');
        shell.exec(`git clone ${links.get('React')} ${answers.projectName}`);
        console.log(`🖨️  Cloned started files into ${answers.projectName}`);
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
        );
      }
    });
  } else if (answers.framework === 'NextJS') {
    inquirer.prompt(questionsTs).then((answersTs) => {
      if (answersTs.typescript === 'Yes') {
        shell.exec(`mkdir ${answers.projectName}`);
        console.log('📁 Created a folder for the project');
        shell.exec(
          `git clone ${links.get('NextJS-TS')} ${answers.projectName}`
        );
        console.log(`🖨️  Cloned started files into ${answers.projectName}`);
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
        );
      } else {
        shell.exec(`mkdir ${answers.projectName}`);
        console.log('📁 Created a folder for the project');
        shell.exec(`git clone ${links.get('NextJS')} ${answers.projectName}`);
        console.log(`🖨️  Cloned started files into ${answers.projectName}`);
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
        );
      }
    });
  } else if (answers.framework === 'Svelte') {
    shell.exec(`mkdir ${answers.projectName}`);
    console.log('📁 Created a folder for the project');
    shell.exec(`git clone ${links.get('Svelte')} ${answers.projectName}`);
    console.log(`🖨️  Cloned started files into ${answers.projectName}`);
    shell.cd(`${path}/${answers.projectName}`);
    shell.exec(`npm i`);
    console.log(
      '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
    );
  } else {
    shell.exec(`mkdir ${answers.projectName}`);
    console.log('📁 Created a folder for the project');
    shell.exec(`git clone ${links.get('Vue')} ${answers.projectName}`);
    console.log(`🖨️  Cloned started files into ${answers.projectName}`);
    shell.cd(`${path}/${answers.projectName}`);
    shell.exec(`npm i`);
    console.log(
      '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
    );
  }
});

Beautification using Chalk

We add colors to the text by using Chalk

To install chalk, use the following command:

npm install chalk

Let's now import chalk into our index.js file

const chalk = require('chalk');

Chalk have few pre built color methods

Chalk also offers a hex method by which you can use any color

Let's add green color to our success output

console.log(chalk.green('Hey 👀, I am a green colored text')); // This is how we can add colors by using chalk

#! /usr/bin/env node

const inquirer = require('inquirer');
const shell = require('shelljs');
const chalk = require('chalk');

const path = process.cwd();

const { questions, questionsTs } = require('./utils/questions.js');
const links = require('./utils/links.js');

inquirer.prompt(questions).then((answers) => {
  if (answers.framework === 'React') {
    inquirer.prompt(questionsTs).then((answersTs) => {
      if (answersTs.typescript === 'Yes') {
        shell.exec(`mkdir ${answers.projectName}`);
        console.log(chalk.green('📁 Created a folder for the project'));
        shell.exec(`git clone ${links.get('React-TS')} ${answers.projectName}`);
        console.log(
          chalk.green(`🖨️  Cloned started files into ${answers.projectName}`)
        );
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          chalk.green(
            '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
          )
        );
      } else {
        shell.exec(`mkdir ${answers.projectName}`);
        console.log(chalk.green('📁 Created a folder for the project'));
        shell.exec(`git clone ${links.get('React')} ${answers.projectName}`);
        console.log(
          chalk.green(`🖨️  Cloned started files into ${answers.projectName}`)
        );
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          chalk.green(
            '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
          )
        );
      }
    });
  } else if (answers.framework === 'NextJS') {
    inquirer.prompt(questionsTs).then((answersTs) => {
      if (answersTs.typescript === 'Yes') {
        shell.exec(`mkdir ${answers.projectName}`);
        console.log(chalk.green('📁 Created a folder for the project'));
        shell.exec(
          `git clone ${links.get('NextJS-TS')} ${answers.projectName}`
        );
        console.log(
          chalk.green(`🖨️  Cloned started files into ${answers.projectName}`)
        );
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          chalk.green(
            '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
          )
        );
      } else {
        shell.exec(`mkdir ${answers.projectName}`);
        console.log(chalk.green('📁 Created a folder for the project'));
        shell.exec(`git clone ${links.get('NextJS')} ${answers.projectName}`);
        console.log(
          chalk.green(`🖨️  Cloned started files into ${answers.projectName}`)
        );
        shell.cd(`${path}/${answers.projectName}`);
        shell.exec(`npm i`);
        console.log(
          chalk.green(
            '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
          )
        );
      }
    });
  } else if (answers.framework === 'Svelte') {
    shell.exec(`mkdir ${answers.projectName}`);
    console.log(chalk.green('📁 Created a folder for the project'));
    shell.exec(`git clone ${links.get('Svelte')} ${answers.projectName}`);
    console.log(
      chalk.green(`🖨️  Cloned started files into ${answers.projectName}`)
    );
    shell.cd(`${path}/${answers.projectName}`);
    shell.exec(`npm i`);
    console.log(
      chalk.green(
        '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
      )
    );
  } else {
    shell.exec(`mkdir ${answers.projectName}`);
    console.log(chalk.green('📁 Created a folder for the project'));
    shell.exec(`git clone ${links.get('Vue')} ${answers.projectName}`);
    console.log(
      chalk.green(`🖨️  Cloned started files into ${answers.projectName}`)
    );
    shell.cd(`${path}/${answers.projectName}`);
    shell.exec(`npm i`);
    console.log(
      chalk.green(
        '👨‍💻  Successfully installed all the required dependencies\nHappy hacking 🚀'
      )
    );
  }
});

Publishing it to npm 🚀

We have successfully completed building our CLI 🥳. Let's now deploy it to npm, so that other developers can use our CLI.

Creating a npm account

Go over to npmjs.org and create an account and make sure that you are verifying it as well

Unique package name

npm packages have unique names. npm doesn't allow publishing a package with a name that is already taken. Go over to npmjs.org and check whether your package name is taken or not.

tailwindcli is already taken by this package. So I have to change the name to tailwindcsscli

Changing name of the package

If your package is unique and is not taken, skip this step, if it isn't then follow along with this step.

Open package.json file
Change the value of the key name to a unique name, in my case I am changing it to tailwindcsscli

Adding keywords

Let's add a few keywords related to our package. As we have built a CLI during this tutorial, let's have the following as keywords :

cli
tailwindcss
nodejs

Adding license

Check out license-templates GitHub repository for license templates which you could use in your project. In my case, I am using MIT license

Adding repository link

If you have a repository on any git provider, such as GitHub, GitLab, you could link to that in a new entry named repository with the keys as type and url and the values as git and git+<your-git-repo-link>.git respectively. It would look something like this

"repository": {
  "type": "git",
  "url": "git+<your-git-repo-link>.git"
}

In my case, the repo link is https://github.com/Kira272921/tailwindcsscli. So it would look something like this

"repository": {
  "type": "git",
  "url": "git+https://github.com/Kira272921/tailwindcsscli.git"
}

Adding link to bugs reports

Let's add the link to the site/place where the users do report bugs about our package. Generally, it would be the link to the issues page in the GitHub repository

"bugs": {
  "url": "https://github.com/Kira272921/tailwindcsscli/issues"
}

Adding link to the homepage

Let's add the link to the homepage of our npm package. Generally, it would be the link to the README link of the GitHub repository

"homepage": "https://github.com/Kira272921/tailwindcsscli/issues#readme"

Login into your npm account via npm CLI

Let's now login in to our npm account via npm CLI so that we can publish our package to npm. To login into your npm account, run the following command and enter the correct credentials.

npm login

Publishing your npm package

Let's now publish our npm package by using the following command

npm publish

😱 Oh no! I got an error

Let's change the name of our package accordingly and publish using the command recommended. My package.json looks something like this now

{
  "name": "@kira272921/tailwindcsscli",
  "version": "1.0.0",
  "description": "A CLI for generating starter files for different JS frameworks with tailwindCSS pre-installed",
  "main": "./bin/index.js",
  "bin": {
    "tcli": "./bin/index.js"
  },
  "scripts": {
    "start": "node ./bin/index.js"
  },
  "keywords": ["cli", "tailwindcss", "nodejs"],
  "author": "Kira272921",
  "license": "MIT",
  "dependencies": {
    "inquirer": "^8.2.0",
    "shelljs": "^0.8.4"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Kira272921/tailwindcsscli.git"
  },
  "bugs": {
    "url": "https://github.com/Kira272921/tailwindcsscli/issues"
  },
  "homepage": "https://github.com/Kira272921/tailwindcsscli/issues#readme"
}

Let's try publishing it now again by using the following command

npm publish --access=public

Fingers crossed 🤞. Yay! We have successfully published our CLI to npm 🥳

The end

The code for this tutorial is available on Github
https://github.com/Kira272921/tailwindcsscli

That's for this blog folks. Hope that you have learned something new from this blog post. Meet y'all in the next blog post 👋.

Component Polymorphism in React

Anurag — Mon, 03 Jan 2022 14:18:26 +0000

What's Up, people! Hope you're doing fine!

In this article, I'm going to explain Polymorphic Components in React, along with their implementation and using them with Typescript!

So, there is a high chance that you might not be familiar with this concept. But you may have encountered this pattern.

In a nutshell, this pattern lets us specify which HTML tag to use to render our component.

But, the flexibility of polymorphic components also makes them easy to misuse, and that’s where TypeScript can help us.

So, let's dive deep into this!

Overview - Polymorphic Components

First, let’s see how we would use polymorphic components in react. Say we have a Button component that we want to render as an HTML link. If Button is a polymorphic component, we can write it like this:

import Button from './Button'

function App() {
  return (
    <Button as="a" href="https://open.spotify.com">
  )
}

export default App

Here, our button will render as a tag and it also accepts href attribute.

Basic Implementation:

Note: To implement this in your react app, you need to have Typescript set up.

Now, let's implement a Basic example for this, without type checking for now:

const Button = ({ as, children, ...props }: any) => {
    const Component = as || "button";

    return <Component {...props}>{children}</Component>;
};

export default Button;

Here, we avoid type checking by setting the type to any.

Here, we render our component using the as prop or if it's not provided, use the button tag as fallback.

Here's the line which makes this work:

const Component = as || "button";

That's all we need to build a basic implementation.

However, the problem with this approach is that there is no mechanism to prevent the client from passing incorrect props.

Here's an example:

import Button from './Button'

function App(){
  return (
    <Button href="https://open.spotify.com">
  )
}

export default App

Here, we are passing the href prop, which belongs to a tag, without setting the as prop to a.
Ideally, TypeScript would catch this bug immediately, and we would see an error.

Type checking using Typescript!

Next up, we are gonna tighten up the prop type using Typescript.

Here's a basic implementation for this:

import { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";

type ButtonProps<T extends ElementType> = {
  as?: T;
  children: ReactNode;
};

const Button = <T extends ElementType = "button">({
  as,
  children,
  ...props
}: ButtonProps<T> & ComponentPropsWithoutRef<T>) => {
  const Component = as || "button";

  return <Component {...props}>{children}</Component>;
};

export default Button;

Here, this code involves generics. The following line made this component generic:

const Button = <T extends ElementType = "button">

ElementType is a type from React. We set our parameter T to ElementType to ensure our button only accepts HTML tags and other React component types.

At this point, our Button component can dynamically calculate the props it accepts based on the value of as. If we try our client example earlier, we will see an error like this:

Here, we get an error stating that Property 'href' does not exist on type 'IntrinsicAttributes & MyButtonProps<"button">

That's it! Our Button component no longer accepts the href property because it doesn’t render itself as a link. If we add as="a", the error goes away.

Create an animated sidebar with TailwindCSS in React💫

Avneesh Agarwal — Tue, 21 Dec 2021 08:37:38 +0000

Hey everyone, in many apps you need a sidebar/drawer which slides in if you click on a hamburger icon. In this tutorial, we are going to see how to build that 🌟.

Demo

Video

Setup

Creating a new react app-

npx create-react-app animated-sidebar

Setting up tailwindCSS

Installing Tailwind-

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configuring paths-

Inside tailwind.config.jd replace the content with this-

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Add tailwindCSS to CSS

In index.css add this code block-

@tailwind base;
@tailwind components;
@tailwind utilities;

Creating the sidebar

Making a new component

I am going to create a separate component for Sidebar, so create a file Sidebar.js in the src folder. Now create a functional component-

const Sidebar = () => {
  return (
    <div>

    </div>
  )
}

export default Sidebar

Rendering the Sidebar component

We also need to render the component so add this in App.js-

import Sidebar from "./Sidebar";

function App() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2">
      <Sidebar />
    </div>
  );
}

export default App;

This should show us an empty canvas now.

Making a basic sidebar

I am going to make a simple div with a text in it-

<div className="top-0 right-0 w-[35vw] bg-blue-600  p-10 pl-20 text-white fixed h-full ">
  <h2 className="mt-20 text-4xl font-semibold text-white">I am a sidebar</h2>
</div>

This will give us a simple, blue sidebar on the right side-

Handling open and closed states

Create a useState to store a boolean value that decides if we should or shouldn't show the sidebar-

const [showSidebar, setShowSidebar] = useState(false);

We also need to show buttons/icons to open and close the sidebar so I will wrap the whole thing in a fragment, add a button to close, and a hamburger icon to open -

<>
  {showSidebar ? (
    <button
      className="flex text-4xl text-white items-center cursor-pointer fixed right-10 top-6 z-50"
      onClick={() => setShowSidebar(!showSidebar)}
    >
      x
    </button>
  ) : (
    <svg
      onClick={() => setShowSidebar(!showSidebar)}
      className="fixed  z-30 flex items-center cursor-pointer right-10 top-6"
      fill="#2563EB"
      viewBox="0 0 100 80"
      width="40"
      height="40"
    >
      <rect width="100" height="10"></rect>
      <rect y="30" width="100" height="10"></rect>
      <rect y="60" width="100" height="10"></rect>
    </svg>
  )}

  <div className="top-0 right-0 w-[35vw] bg-blue-600  p-10 pl-20 text-white fixed h-full z-40">
    <h3 className="mt-20 text-4xl font-semibold text-white">I am a sidebar</h3>
  </div>
</>

This will not make any difference right now but let's add some conditional classes to the main sidebar div.

<div
  className={`top-0 right-0 w-[35vw] bg-blue-600  p-10 pl-20 text-white fixed h-full z-40 ${
    showSidebar ? "translate-x-0 " : "translate-x-full"
  }`}

If the showSidebar variable is true then it will add the translate-x-0 otherwise translate-x-full. Our sidebar now works 🎉

Video

But it isn't smooth so let us see how to make the animation smooth. Just add these two classes to the blue div-

ease-in-out duration-300

The div should look like this now-

<div
  className={`top-0 right-0 w-[35vw] bg-blue-600  p-10 pl-20 text-white fixed h-full z-40  ease-in-out duration-300 ${
    showSidebar ? "translate-x-0 " : "translate-x-full"
  }`}
>
  <h3 className="mt-20 text-4xl font-semibold text-white">I am a sidebar</h3>
</div>

Our sidebar animation looks very smooth and great! 🥳

Video

Hope you liked this tutorial and add nice animation to the sidebar in your project. Peace ✌️

Useful links

GitHub repo

Animate and Change Header Background on Scroll

Connect with me

Get Started with Supabase Database in NextJS! ⚡

Anurag — Thu, 09 Dec 2021 15:04:32 +0000

🙋‍♂️Hello Everyone

In this blog post, we're gonna Get Started with Supabase Database in NextJS!

One of the coolest things about Supabase is its database and for building full-stack apps, we all like to use NextJS, so in this tutorial, I'm gonna show you how can we integrate the two!

Why choose Supabase

In case you don't know about Supabase Database, here are a few points to catch up on!

It's free to use and follows the pay as you go, model,
The free version provides unlimited read and write requests!
The free version contains 500 MB of space
It's a SQL Based database
It is one of the easiest databases to get started with!

So, let's jump right in!

What we're building today:

First, you need to set up a project in Supabase, you can go to their official website and create a free project! In case you don't have an account there, you need to make an account there.

Go to Supabase, and click on create a new Project, choose a name and a password, and you're good to go!

Next up, create a new table in the database named responses

Now, let's jump to the coding part!
So, we're using NextJS for this demo, and I'm using Tailwind as my UI preference. But you can use your preferred UI Framework as your preference!

npx create-next-app -e with-tailwindcss supabase-demo

Now, we're gonna make a simple form.
For this demo, you can just use the index.js file. Clear up the boilerplate code.

Now, we're gonna make a simple form!

First, make the main div and align its children to the center using flexbox

<div className="min-h-screen min-w-screen bg-purple-500 flex justify-center items-center">
</div>

Now, we can add input fields and a submit button:

<div className="min-h-screen min-w-screen bg-purple-500 flex justify-center items-center">
  <form className="p-8 bg-white shadow rounded flex flex-col justify-center items-center">
    <input
      type="text"
      className="m-2 outline-none py-2 px-4 border-2 border-black-200 rounded focus:border-blue-400 text-black-300 text-xl"
      placeholder="Your Name"
    />

    <input
      type="text"
      className="m-2 outline-none py-2 px-4 border-2 border-black-200 rounded focus:border-blue-400 text-black-300 text-xl"
      placeholder="Your Email"
    />

    <button className="m-1 p-2 bg-green-500 text-white font-medium text-xl grid place-items-center rounded">
      Submit
    </button>
  </form>
</div>;

Now, we are gonna use hooks to get the input values:

First, let's make two variables using the useState hook

  const [name, setName] = useState('')
  const [email, setEmail] = useState('')

Now, we will assign these values to the input fields and update them if the value changes. We can do this using the onChange event.

  <input
    type="text"
    className="m-2 outline-none py-2 px-4 border-2 border-black-200 rounded focus:border-blue-400 text-black-300 text-xl"
    placeholder="Your Name"
    value={name}
    onChange={(e) => setName(e.target.value)}
  />

  <input
    type="text"
    className="m-2 outline-none py-2 px-4 border-2 border-black-200 rounded focus:border-blue-400 text-black-300 text-xl"
    placeholder="Your Email"
    value={email}
    onChange={(e) => setEmail(e.target.value)}
  />

So now, you should have a simple form that looks like this:

Now, we will work on the database part, first, we will install supabase-js

npm install @supabase/supabase-js     # for npm
yarn add @supabase/supabase-js     # for yarn

Now, we need to initialize supabase, go to the project dashboard on supabase, and get your keys from there. Then, follow along:

import { createClient } from "@supabase/supabase-js";

const supabase = createClient(
  "<your_project_url_here>",
  "<your_public_anon_key_here>"
);

Now, let's make a function to handle form submit.
We are gonna structure the form data in a new variable:

const handleSubmit = async () => {
  const form = {
    name: name,
    email: email,
  };
};

Now, we're going to upload the form data to Supabase Database!
Here's how we're gonna do it:

const handleSubmit = async () => {
  const form = {
    name: name,
    email: email,
  };

  const { data, error } = await supabase
    .from("responses")
    .insert([{ response: form }]);

  error ? console.log(error) : console.log(data);
};

And, That's it!!
Now, you can fill the form and submit it to see the data update in the database!

How to add Twitter auth quickly with Supabase to your Next.js site ⚡

Avneesh Agarwal — Wed, 08 Dec 2021 13:23:25 +0000

🙋‍♂️Hey there, today we are going to see how to add Twitter auth with Supabase in a Next.js app. Let's get started

What we are going to build

Video demo

Live demo

Setup

Creating a new Next.js app

I am going to use tailwind CSS for the basic styling, you can use any framework you want-

npx create-next-app -e with-tailwindcss next-supabase-twitter

Making a Supabase project

Go to Supabase. Click on New Project, it will show you a form with some inputs so fill in the details

Now we need to wait for a few minutes for everything to set up. In the meanwhile, we can set up our Twitter app.

Creating a Twitter app

Go to Twitter developers, if you don't have a developer account then sign up for one otherwise login.

After signing in click on Create App. Then, give your app a name

Click the edit button in Authentication settings. Now we need to enable 3-legged OAuth. So, enable it as well as the Request email address from users option

In callback URL add-

<supabase_url>/auth/v1/callback

You need to replace with the URL from your supabase project. Follow these steps to get it-

Click on the settings icon
Select the API tab

Now copy the URL

You can paste this URL in the callback URLs

Fill in the rest of the details in the form and hit save.

Enabling Twitter auth in supabase project

Click on the users icon in the sidebar, then go to settings. If you scroll down you will see an option called Twitter enabled, toggle it on. We now need to get the keys from our Twitter app.

So head back to the app and click on the keys and tokens tab. Regenerate the consumer keys and paste them into the supabase dashboard.

The coding part

Installing supabase package

npm i @supabase/supabase-js # npm

yarn add @supabase/supabase-js # yarn

Setting up env variables

Create a new file .env.local in the root of your project and add the following variables-

NEXT_PUBLIC_SUPABASE_URL=<supabase_url>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<anon_key>

You can get the values from the API tab in the project settings.

Initializing supabase

Create a folder utils and supabaseClient.js file inside of it.

Add the following in it-

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

This will take the environment variables and initialize Supabase for us.

Creating the signup button

Create a button with an onClick function-

<button
  onClick={signInWithTwitter}
  className="relative px-4 py-2 bg-[#1eb872] rounded-lg text-white mt-4"
>
  Twitter sign in
</button>

Creating the signup function

The signup function is pretty simple-

  async function signInWithTwitter() {
    await supabase.auth.signIn({
      provider: "twitter",
    });
  }

If you want to add auth with any other social provider you just need to change the provider's value there.

Let's try to sign in now.

https://www.loom.com/share/944ac780811d44c1b98365fc3f0287d7

It works 🥳. P.S I also styled the page a bit :P

Getting the user's data

Create a useState to store the data-

const [session, setSession] = useState(null);

Now create this useEffect which will update the session every time the auth session updates-

  useEffect(() => {
    setSession(supabase.auth.session());

    supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
    });
  }, []);

Let's console log the session to see what we get-

console.log(session);

Displaying user data and logout button if signed in

We need to create a ternary operator like this-


 <div className="flex flex-col items-center justify-center w-screen h-screen bg-[#D33943]">
      {session ? (
        <>
          <Image
            width={100}
            height={100}
            src={session.user.user_metadata.picture}
            className="rounded-full"
          />
          <h3 className="mt-3 text-lg text-white">
            Welcome {session?.user.user_metadata.full_name}
          </h3>
          <h3 className="mt-3 text-lg text-white">
            You are signed in as {session?.user.email}
          </h3>
          <button
            className="px-4 py-2 mt-3 text-black bg-white rounded-lg"
            onClick={() => supabase.auth.signOut()}
          >
            Sign out
          </button>
        </>
      ) : (
        <>
          <h1 className="text-3xl font-semibold text-white">
            How to add Twitter auth quickly with Supabase to your Next.js site
            ⚡
          </h1>

          <button
            onClick={signInWithTwitter}
            className="relative px-4 py-2 bg-[#1eb872] rounded-lg text-white mt-4"
          >
            Twitter sign in
          </button>
        </>
      )}
    </div>

Since I am using I also need to whitelist the domain. So, create a new file next.config.js and add in the following-

module.exports = {
  images: {
    domains: ["pbs.twimg.com"],
  },
};

You also need to restart the server to see the changes. Now our authentication system works perfectly 🥳🥳

https://www.loom.com/share/d35e0765cd7d4a77a33e82bb1634cfa7

Useful links