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:
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.
/pages/index.js as such:
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:
[Optional] npm command
I used the command above because I had opted for
yarn in this project. The
npm equivalent would be:
Seeing it on localhost
The CLI then pointed me to this URL to preview the site:
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.