Building the Front End

Previously for Final Static, I built and tested the NFT marketplace’s smart contract.

To support user interactions that work with it, the next important step would be to build out the web-based front end.

This was where the Tailwind CSS setup came in handy as well.

Building the navigation bar

To set up a global navigation component that would persist across all pages, I updated /pages/_app.js as such:

import "../styles/globals.css"
import Link from "next/link"

function MyApp({ Component, pageProps })
    return (
            <nav className="border-b p-6">

                <p className="text-4xl text-white font-bold">Final Static</p>

                <div className="flex mt-4">
                    <Link href="/">
                        <a className="mr-6 text-pink-500">

                    <Link href="/create-nft">
                        <a className="mr-6 text-pink-500">
                        Sell NFT

                    <Link href="/my-nfts">
                        <a className="mr-6 text-pink-500">
                        My NFTs

                    <Link href="/dashboard">
                        <a className="mr-6 text-pink-500">


            <Component {...pageProps} />


export default MyApp

Building the homepage

Then I started setting up the main entry-point of the app, which would eventually display the NFTs for sale.

For the time being though, I was just going to put in some placeholders.

I updated /pages/index.js as such:

import { ethers } from "ethers"
import { useEffect, useState } from "react"
import axios from "axios"
import Web3Modal from "web3modal"

import { marketplaceAddress } from "../config"

import FinalStatic from "../artifacts/contracts/FinalStatic.sol/FinalStatic.json"

export default function Home()
    return (
        <h1 className="px-20 py-10 text-3xl text-white text-center underline">
        Add first item to marketplace

Running the project on localhost

At this point, I couldn’t wait to get a sneak peek of how everything looked, and so I spun up the website on my local network by running the following command on Terminal:

yarn dev

[Optional] npm command

I used the command above because I had opted for yarn in this project. The npm equivalent would be:

npm run dev

Seeing it on localhost

The CLI then pointed me to this URL to preview the site: http://localhost:3000

Here’s what I saw on Chrome:


Not too shabby so far, but obviously this was just the bare-bones version. In the next post, I will start building out a seller portal, where users can list and sell NFTs.

Categories: final-static