What is an NFT?

jakobpotosme — Sun, 28 Aug 2022 22:11:45 +0000

Upon reading this article you have probably heard of notorious names such as Bored Ape Yacht Club and Crypto Punks where people have had their lives changed by owning a simple JPEG. Leaving you with the question as to what the heck is an NFT? Upon finishing this post, I hope to have answered your question.

Non Fungible Token

The word NFT stands for a Non Fungible Token and has revolutionized the way people get paid for their work and show off their creavity. It is a digital token that lives on the blockchain with valuable information attached to it. A fungible item is an an item that can be replaced or is mutually interchangible. For example, 1 dollar can always be exchanged for 1 dollar. However, every non fungible token has a uniqueness that eliminates this interchangibility. To keep it simple it is this uniqueness that creates the NFT.

Pokemon are NFT's

This concept may be easier for my fellow gamers to understand. Let us compare this to the world of Pokemon. The world that these pokemon live in is equivalent to the smart contract that lives on the Ethereum network. At the time of writing, there are currently 905 pokemon that exist. Each with their own unique stats, ability, and characteristics. This means that no two pokemon are interchangeble with one another.
Each pokemon can be compared to an asset that has been created using the ERC721 Token Standard. This standard has a unique token ID with a corresponding tokenURI. The unique characteristics are defined within the tokenURI which contains the token's information also known as metadata. Here is an example as to how that metadata is constructed.

{
"name":"Pikachu",
"description":"Gen 1 Pokemon",
"image": "Pikachu_Image_URI",
"attributes": [
  "type":"electric"
]
}

Why care about NFT's?

A valid question I had to ask myself numerous times. The current state of NFT's is flawed. They are driven off hype and feel like a game of hot potato with whoever is willing to pay more. However, if we take a step back and look at the core technology involved there is much more to it. Everything in life is based on agreements and that is the beauty of smart contracts. Smart Contracts are unbreakable agreements that live on a decentralized network where anyone can see the terms of agreement. I believe NFT's have untapped potential that will release in due time. (Stay tuned to future posts for my opinions on this matter)

Mint your own NFT

Now after reading this basic overview about NFT's, it is time to mint your own! You will be interacting with a simple Dapp I created that will give you a color corresponding to the current month here. If you are completely new to the Web3 ecosystem read this article first to set up your wallet Metamask Guide. After setting up your wallet you will need to switch to Rinkeby Network in order to interact with the Dapp. In order to mint, you will need some test Eth to pay for your NFT which you can get here. Once your wallet is funded, simply click mint and follow the prompt. After about 20 seconds, you should see a notification popup stating that the mint was successful!
You can then view your newly minted NFT here.

Conclusion

I hope you leave this post with new gained knowledge along with an open mind to the concept of NFT's. I believe they are just getting started and will have a huge impact in our future.

Supabase & SWR

jakobpotosme — Fri, 01 Jul 2022 20:55:34 +0000

Hello everyone!
Today we will incorporate the SWR library to fetch data updates in realtime using React Hooks. While working on a project, I realized that changes made within my database were not reflected on my site unless I preformed a refresh. This bothered me as user's are expecting for changes to be made in real time.

After some researching, I stumbled upon SWR which is a react hook used for data fetching. A short TLDR is that

SWR is a strategy to first return the data from cache , then send a fetch request to revalidate the data, and finally come up with the most recent data

A more comprehensive overview can be found here

SWR seemed to have exactly what I needed so I began implementation.

I will be recreating my particular situation here using dummy data but with the same technologies. (Next Js, Supabase, SWR)

We first need to set up our NextJS application.



npx create-next-app name-of-project

Follow the prompts and once installed simply cd over to the newly created project

Installing Tailwind CSS

We will be adding tailwind css to the application as well in order to aid us with our styling.

Run the following two commands



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

The second command will create the 'tailwind.config.js' file for you, it is a config JS file for Tailwind CSS.

Copy and past the content below which will tell Tailwind CSS which files to watch out for.



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

We then will have to add this to our globals.css file.



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

BOOM! Our Nextjs application is now configured to use TailwindCSS!

Finally, run the following command



npm run dev

this will spin up the Nextjs application on your https://localhost:3000

Our local environment is now ready to go! Time to set up Supabase.

Setting up Supabase

Go to the official Supabase website and sign in.

Click + New Project and then click + New Organization to create your new project team. Then enter a name to create your organization.

Once your organization is created, we can proceed to create the project.

Name: Pick whichever you'd like
Database Password: Enter a strong password but save it as you may need it in the future!
Region: Choose region closest to you
Pricing Plan: Free will suffice, you can always upgrade later.

Finally hit Create new Project, and there we have our new Supabase project! Lets now create our tables.

Creating Tables

Click the Table Editior from the left panel of the dashboard. Then click Create a new table in the center of the screen.

A side panel will appear and we will fill it out as follows.

Name: Pick whichever you'd like
Description: Optional
Enable Row Level Security (RLS) : We will skip at this time, useful for more complex applications but beyond the scope of this post
Enable Realtime: We will skip at this time, this may replace SWR but at this time I have not messed with it enough. (A new blog will come soon once I have a better understanding )
id: Unique identifier with a type uuid with the default value of uuid_generate_v4()
title: The title of post
content: The content of post

Connecting to Supabase

Next step is to connect our application to the supabase client with the use of the supabase-js dependency.



npm install @supabase/supabase-js

We must create a .env file in the root of our project and add the following lines to it.



NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

The SUPABASE_URL and SUPABASE_ANON_KEY can be found by following these steps:

Go to the "Settings" section of your project.
Click "API" in the sidebar.
Find your API URL in this page.
Find your "anon" and "service_role" keys on this page.

Now restart the server in order for the changes made in the .env file to reflect properly.

Now that the API credentials are in place, lets create a helper file to initialize the Supabase client. Create a utils folder in the root of your project and within that folder, create a supabaseClient.js file. Paste the following inside.



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)

Now whenever we need to interact with Supabase, we can simply call upon by importing utils/supabase.js.

Creating first post

Our index page is currently just the default so lets change it up. Copy and paste the code below to have



<div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className='flex items-center justify-center h-screen flex-col'>
        <h1 className="text-3xl font-bold ">
          Create a post!
        </h1>

        <form className=' p-20 flex gap-8'>

          <input type='text' className='shadow p-2 border-b w-full outline-none' placeholder='Type here...'></input>
          <button type='submit' className='bg-blue-300 p-2 rounded' >Submit</button>
        </form>
      </main>
    </div>

Inserting post into Supabase

In order for our post to reach Supabase, there are a few things we need.

Import the supabase client
Adding a title,content state to hold our values.
Adding an onSubmit function to handle that data.

Add the following to your code.



import { supabase } from '../utils/supabaseClient'

...

const [title, setTitle] = useState('')
  const [content,setContent] = useState('')

  const onSubmit = async (e) => {
    e.preventDefault()

    try {
      const {data, error} = await supabase
          .from('Posts')
          .insert([
            {title: title, content: content}
          ])

          if(data){
            console.log('success')
          }

    } catch (error) {
      console.log(error)
    }


    setTitle('')
    setContent('')
  }

...

<form onSubmit={onSubmit} className=' p-20 flex flex-col gap-8'>


          <input type='text' className='shadow p-2 border-b w-full outline-none' 
          placeholder='Title...' onChange={e => setTitle(e.target.value)} value={title} ></input>
          <input type='text' className='shadow p-2 border-b w-full outline-none' 
          placeholder='Content...' onChange={e => setContent(e.target.value)} value={content} ></input>
          <button type='submit' className='bg-blue-300 p-2 rounded' >Submit</button>
        </form>

Fill out and submit the form. Now if everything is working correctly you should see a 'success' message in your console and the data on your Supabase table!

Great! Now lets retrieve and display the data within our application.

Retrieving Data from Supabase

Next steps will be creating a components folder at the root of your project. Within that folder, create a Posts.js file.

Copy and paste the code below



import React from 'react'

const Posts = ({title,content}) => {
  return (
    <div className='p-10 bg-zinc-200 rounded w-1/3 mb-10 '>
      <div className='flex flex-col gap-y-5'>
      <h1 className='text-xl font-bold'>{title}</h1>
      <p className='font-semibold'>{content}</p>
      </div>


    </div>
  )
}

export default Posts

This will be our Posts component and we are passing it the title ** and **content props that we will see shortly.

Back in our index.js file, we will be adding a getTableData function that will retrieve all the posts from supabase and storing it within our posts state.



  const [posts, setPosts] = useState() 

  ...

  const getTableData = async () =>{

    try {
      const {data, error} = await supabase
          .from('Posts')
          .select('*')

          if(data){

            setPosts(data)
          }

    } catch (error) {
      console.log(error)
    }
  }

 useEffect(()=>{

    getTableData()
  }, [])

We must invoke this function by calling it within a useEffect hook. This will call the function only once, when the page is first rendered.

After importing the Posts component at the top of the application, add the following code below to your index.js file.



import Posts from '../components/Posts'

...

<div className='pb-20 flex flex-col items-center justify-center '>
        {posts && posts.map(elem =>{
          return(<Posts key={elem.id} title={elem.title} content={elem.content} />)
        })}
 </div>

This will display the data only when the posts state is not null. We are then mapping through the data and passing these props:

key : Elements identity or (unique identifier)
title : title of post
content : content of post

We can now successfully view our data but only if we manually refresh. This is where SWR steps in.

Implementing SWR

Lets begin by installing SWR and refactoring our code a bit.



npm install swr

Now we could leave our code as is and leave everything on client side, however lets take advantage of what makes Nextjs so powerful.
We will move all our api related tasks into the api directory.

Create a new file posts.js and paste the code found below within.



import { supabase } from "../../utils/supabaseClient";

const PostsApi = async (req,res) =>{

    if(req.method === 'GET'){

        const {data,error} = await supabase.from('Posts')
                                    .select('*')

        if(error){
            return res.status(500).json({message: error})
        }

        return res.status(200).json({data})
    }

}
export default PostsApi

Lets go over what is going on so far.

We have imported our supabase client in order to retrieve neccessary data. There is a PostsApi asychronous function taking in a req which is a request being made to the API and res which is a response based off the request made. If a 'GET' request has been made, we will then retrieve the data from Supabase and return it.

Now we can interact with our API by fetching 'api/posts'!

Refactoring index.js

Now that our API is complete, we can now remove our getTableData and useEffect to make use of SWR.
Remove the following code



const [posts, setPosts] = useState()

...

const getTableData = async () =>{

    try {
      const {data, error} = await supabase
          .from('Posts')
          .select('*')

          if(data){

            setPosts(data)
          }

    } catch (error) {
      console.log(error)
    }
  }

  useEffect(()=>{

    getTableData()
  }, [])

Replace it with



import useSWR from 'swr'

const fetcher = (url) => fetch(url, {method: 'GET'}).then(res => res.json());

...

const {data: posts ,error} = useSWR('api/posts', fetcher)

Finally we just need to wrap our application in the context SWRConfig providing our global configuration options. Head over to your _app.js file and add the following



import '../styles/globals.css'
import { SWRConfig } from 'swr'

function MyApp({ Component, pageProps }) {
  return (<SWRConfig
        value={{ 
            refreshInterval: 10000,
          }}
        >
    <Component {...pageProps} />
  </SWRConfig>)
}

export default MyApp

In our configuration, we are simply telling SWR to refresh our data every 10 seconds. There are several other options that are available to use and they can be found here.

All done!

Woohoo! Our application now can successfully insert data and see it in real time how exciting! In summary, we have created a Nextjs / Tailwind CSS / Supabase application accompanied with the SWR library to help with our data fetching. A gif is provided below to see it in action.

We have only scratched the surface of a full on CRUD application and there is certainly room for improvements but I will leave that up to you to experiment and learn on your own.

I hope you have found this helpful and I hope to see you on my next post. Take care!

Forem: jakobpotosme