In this project
I created an NFT Minting Website
with Next.js and Web 3
This project was a new and pioneering development for myself which took my skills I had learnt in JavaScript and put them into the new and exciting world of dapps and web3. The client we worked with was Stoney Tigers Club which is a new and upcoming brand on Open Sea, which is sought after by digital art enthusiasts, the super-rich, celebrities such as "Jason Derulo" as well as those passionate within the crypto community. I was asked to help develop a "D'app" for the client to sell and realise new Stoney tiger NFT's before they go out on Open Sea. An NFT stands for "non-fungible token" which is a non-interchangeable unit of data, which is stored on a blockchain, as a form of digital ledger. Types of NFTs range from digital files, photos, videos, and audio. I organised the creation of the minting application as well as working alongside a fellow developer. The launch date is set for February 2022.
Click Here For The Brief/NLT Doc
What I have done
Week 1: Planning and Admin Work
In week one of the development of this website, I had a meeting with a fellow peer developer and the owner of "Stoney Tigers Club" to discuss a time plan and to work out what the client needed from the website. It was established that a working e shop which can link to Metamask, and Coinbase via an API would be required, as well as a full front end and back end for the application to work through as well. Furthermore, a random generator would be required for generating what NFT a customer would be allocated after a completed transaction.
I established that I was a fan of JavaScript, and that I would like to make use of the Next.js framework as well as web 3 for this project. As well as this, I have decided to go with a sanity.io back end, which is a new and exciting web 3.0 back-end service which provides more services and requires more work than other back-end methods such as Laravel and Firebase. This decision seemed very appropriate as web 3.0 developing is a very new addition to the development industry.
Week 2: Front/Backend decisions
n my second week of development me and Luke Allisstone sat down to discuss what languages and plug ins we would use for the application and how the work would be divided up. As I had more experience with React/Next.js it was decided that I would kick off the front-end development as well as handle the entire backend of the project. We both decided that we would use Tailwind.CSS to design the application.
I Furthermore I decided to make use of Visual Source Code, as my coding platform, due to it being an industry standard software to use whilst coding in JavaScript. Due to the website providing a service for transactions to occur via the Ethereum blockchain, I decided that the application would require a Metamask Authentication via Next.js.
Week 3: The webapp
In week 3 my development work with the project started to get going. The main objective for the project, as well as the development team was to get the Stoneytiger NFTs out into the world, and I suggested that they should consider making a mobile webapp, in which users can use to learn about the brand and the objectives of why they sell. I also suggested that existing customers can log into the application and interact with other NFTs and discover what characteristics the brand had to offer, like that of Cryptoon Goonz and Bored Ape Yacht Club, who both utilise native applications to enable customers and enthusiasts to learn about their brand and to keep up to date with new artwork.
To begin with I downloaded relevant plugins in which I thought would be appropriate to use via the development work. I downloaded Yarn as a plug as this the development of this project required the download of large files, in which yarn was faster in installing than standard NPM. Furthermore, Yarn is more reliable and secure package management system. As I had not created the sanity.io backend yet, I created a local host to act as the backend until the time came to create the backend with sanity and third web.
Week 4: Setting up Next.js and Thirdweb
he team and I decided to follow the web app approach as I felt that web apps are not only becoming the future of web development but are also a lot more cost effective as they work on most, if not all devices. I established a Third web account which provides Web3 SDKs for developers and can hold the NFT collection in a secure database, which relates to the next.js front end via an API in which we created.
In order to undertsand Next.js as a javascript framework I took a look at a few programming courses in order to teach myself the relvant information about Next.js, Metamask and Third web I made use of the Clever Programmer youtube channel, as well as looking in to Quazis Making Crytopunk via Next.js video I also made use of W3Schools Javascript page. This research really helped me to understand what certain commands mean, as well as how the front end and back end would communicate and function.
Week 5: ThirdWeb minting function
To attach NFTs to the Ethereum blockchain, you need to pay a gas fee, this was going to be an issue until I discovered that you could make a test network via the Ethereum Rinkeby Network, which connects to a Metamask wallet. This enables developers to test their own oracles and chain linked smart contracts, without having to spend money on real gas fees, (for those who don’t understand, its similar to making a local host before creating a backend).
However, an issue of using this method and a problem with the Ethereum network is that the processing speeds are dependent on traffic within the network meaning that high traffic results in really long waiting times. However, my solution to this was to process transactions at times when the traffic was low.
Once I had linked the Rinkeby Test network to my Metamask wallet, I then created a Thirdweb project. A project is a smart contract which gets deployed to my Metamask wallet. The project has a multi-sig wallet with permission control and provides the ability to contain other contracts, essentially providing essential services for the project. However, I only needed to use three services provided by Third Web:
- A Collection page, which enables admins to upload NFTS onto the app and stores the NFTs in a secure environment. It also enables admins to set the rarity of each NFT via traits and background colour, as well as generating an individual identification code which will be used to track the NFT via sales on the blockchain.
- A Marketplace, an area which shows what NFTs are listed, aswell as user information for purchases made.
- A Project Royalty Treasury, an area which presents what royalties the company have made from sales of minted NFTs, as well as NFTs sold via second hand services such Opensea.
Week 6: Sanity Database/Front end development
In my reading week, I took advantage of the time I had off to start one of the more challenging sides of the project. I made use of Sanity.io to platform structured content as it provides an environment that enables an open-source editing environment via JavaScript as well as providing a real time hosted data store. Luckily, I had no issues linking Sanity and the front end together, as the sanity package in which I downloaded into the project worked fine.
After concluding the web3 aspect of the project, I decided to kick of front-end development in which I utilised tailwind.css to craft the design of the app. To start with I created the Navbar for the project, the development for this was relatively straight forward, I really enjoyed using tailwind as CSS is not my strongest language, however Tailwind made the CSS simple and flexible which was good for a CSS beginner such as myself. The Navbar included the logo for StoneyTigersClub and provided links to different pages within the app, as well as a search which would later enable users to search the website for individual search requests.
After finishing on the navbar I started to work on the hero for the main page of the website. This area would be the main page presented to customers visiting the website so ensuring that the websites aesthetics were to the clients standard. I made use of HTML to structure the website followed by Tailwind to design the aesthetics.
Futhurmore I included a carosel feature which would shuffle through different NFTs in which users on metamask and Opensea had purchased recently as seen to the left with 'Aidan Waldron' being presented to have bought a tiger NFT.
Week 7: Set up Metamask Authentication with Next.js
In my opinion this was the most challenging part of the project for me, as I had a small amount of experience with Next.js but I had had no experience with Metamask before this project. To enable Metamask and the application to communicate I had to import packages such as "thirdwebprovider" which was a 3rdweb hook. I had minor issue of the app not recognising the import tag, however this was simple fix, as I resatrted the app a few times and it worked after doing this. This details for this can be found in app.js on the Github repository at the bottom of this webpage.
After wrapping the app in the third web provider, I designed the banner which would tell users they were required to log in to Metamask before visiting the page, again I used tailwind to do this and this was very straight forward.
I then included the wallet address within the home function, which I connected to the web3 hook, imported at the top in the image to the left, giving access to connect wallet, access to the wallet address as well. I then conducted some conditional rendering based on whether the user was logged on or not, which then provides a button which enables the user to log in via metamask, as well as text stating the user needs chrome to run the app, as metamask is a chrome extension.
Weeks 8: Sanity User Data
After completing the metamask log in for the front end of the app I was then tasked with linking this function to the Sanity.io backend.
To do this I created a sanity client folder and imported the sanity client module into sanityclient.js. After this I built out the client and implemented the project ID from sanity projects, enabling the front end and back end to communicate. During this the API was also created, I created the token within Sanity.io I did this via the create api token function in localhost:3333. After generating the token. I then implemented this into sanityClient.js.
I thought it would be a good idea to implement a welcome banner to users who have logged into the application. To do this I imported react/hot toast. This is a library that adds react banners and notifications.
I thought it would be a good idea to implement a welcome banner to users who have logged into the application. To do this I imported react/hottoast. This is a library that adds react banners and notifications. Again the app had issues with the import but after the restarting the server a few times it worked.
After completing the metamask authentication of the webapp I conducted my final functionality checks before handing the project to Luke for the creation of the NFT collection page and others services.
Functionality/Final Outcome
To the left is a video expalining how the minting process works, as well as how atributes and other details are addede to the NFTs when theyre launched.>
In the video to the left, shows how the front end and back end commincate showing how NFTs appear on the front after being minted on Thirdweb.
To the left is my personailised NFT in which I was given for being apart of the StoneyTigers team since the start.
Final Development and project summary
To conclude, I feel this project has been extremely beneficial to my growth as a Developer. This is down to working with other designers and developers, who have helped me to mold my skills within Next, React as well as web3 development in general. I have sharpened my skills within CSS and learnt the framework 'Tailwind' and feel a lot more confident about implementing interesting style features into my coding and I am also more confident in how I begin a project, as well as ending one.
It has enabled me to educate myself in the vastly expanding industry that is crypto and the NFT market. It has given me a passion for web3 development as well as showing a safer more secure method of user log in via Metamask, and I will look to expand this passion into my internship after leaving university. This project has allowed me to flourish my organisation, time management and communicative skills, as the weekly teams’ calls enabling me to stay up to date with the team, as well as allowing me to bring up any queries I had as well. However, I do feel that my organisation and time management skills could have been improved, as I completed the webapp two weeks later than intended on my Gantt chart however I have learnt my lesson and will work on this into the future.
I am staying on the Stoney team after this semester, I would defiantly investigate NFT game development as it’s an exciting new market which points towards the future in terms of web3 development. Before beginning my internship, I will set myself coding targets for each week, instead of having and end date and just working towards it hopefully this will keep me up to date before starting! With a solid plan and target. This would have allowed more time for coding and preparation which ultimately would've kept me on target. Going into the future I will keep my love of react and web3 as I feel these languages will be a very beneficial for the future.
