Stoney Tiger Club NFT

Client brief

The Stoney Tiger Club is a NFT collection designed by my fellow course mate, Aidan Waldron. The collection features over 800 custom NFT’s with variety of traits and unique custom elements to the designs. NFT stands for ‘Non Fungible Token’ as is digital asset, otherwise known as digital artwork and other forms of media, that is stored on the Blockchain in the form of a digital ledger. Forbes has further detailed information on this Topic. The NFT collection will be built on a decentralized app, otherwise known as a ‘dApp’, with the intention to store and release the NFT’s on the application.

Before commencing on the project, we signed an Agreement outlining the brief on the procedures when the project advances into the future, including the team contributing the project.

Documents

  1. NLT 2 Document
  2. Handover document

Developer and Software Meeting

Developer meeting During the meeting, Alex Wardle and I decided we would use Third web, React/Nextjs, Sanity.io for the backend work of the application.

Tailwind.css would be utilised to build the front end of the application. We decided that this would be the appropriate method to build the application. It would also require a Metamask Authentication via Next.js. To communicate efficiently, we decided we would utilise GitHub to share our own development journey of the application, as well as the use of Visual Studios to develop the code.

As this was a new coding experience for both of us, we decided we would follow along using a YouTube tutorial online from the developer Clever Programmer, who has a series on building these applications.

Week Ten- Installing Yarn and Alchemy account

Next in order to for the application to compile, I downloaded Yarn. This was instead of Npm due to the stability and the security of the application.

In order for the application to run and function, I and enter ‘npm run’ or ‘Npm run dev’ as it downloads the required packages straight to the users home directory. However Entering sudo before Npm would enable the files to be owned by the root but in the same directory.

Next I signed up for Alchemy API, enabling the API (application programming interface).

This will provide the test network and the key to copy into the NFT Module.

Adding ThirdWeb SDK modules

Third web will allow for the individual NFT’s to be listed and then minted online, thus connecting directly to the Opensea marketplace and will be displayed in the collection page of the application.

Next in order for the Market Place module to connect to the NFT application, I copied across the Opensea market place address.

Within the Collection page, I listed the Open Sea Address and the direct NFT collection to be displayed within the application. Next I set the listings to display each of the NFT within the market place module.

This is a screenshot from Alex Wardle, with his role being to list the images from standard images to NFT’s through the use of Third Web.

Sanity Intergration

The next step was to Open up the Sanity Database. This is where I can create the NFT collection’s details, where I added the same contact address as the NFT collection address from Third Web. I then entered placeholder text for the data. Next I added in the profile images, such as the banner image and profile picture image of the collection.

Next I went to the Vison section fetched the detailed information about the collection. Here I requested the Banner URL, Profile picture, the creator of the application.

After the fetch had completed, I copied the query across to the collection page. I then wrapped it in the const query, where I replaced it with the collection ID. The query then returned the results from sanity, where it is fetched and then stored within the set collection, as shown on line 103.

Week eleven- NFT Pages

Next I implemented the NFTcard.js to add further detail into the layout of the NFT’s displayed.

Here i implemented an image container to contain all of the NFT's a form of grid.

Here is the main collection page where it pulls in data from the sanity client including data such as the profile picture, banner and, Web3 hooks, Third Web, social icons and the market place module.

After building out the collection page, the individual NFT’s had been formatted, mostly utilising TailWind.css.

Next I built out the nftid.js page, where the selected NFT can be passed down through into NFT image.

Next I developed ItemActivity where the event and price were passed through, to showcase the potential values that each of the NFT’s will contain.

Upon compiling, each of the Item’s details, contain what the values will be valued as. One glitch however discovered, is the lack of NFT Image compiling through into the individual NFT’s.

Last minute client feedback

Unfortunately our client submitted the UX design late, meaning that we only had a day to implement the CSS that he ahd supplied. This was unfortunate as we had hoped that we could have integrated the majority of the UX into CSS, so I could only integrate a minority of the CSS into the application.

As a result we edited the front page of the site to our client specifications, such as the Welcome text and the banner layout content and design.

Week 12- Final Outcome 🏆

The final outcome of the project showcased the successful development of a d’App where it utilises many pages an scripts integrating from Web3 sites such as Third Web, Alchemy API and Sanity. This has provided the client with a strong platform, with the ability to create and develop the site further with an unlimited variety of NFT’s to be created. Further development will be required to build out the application, as well as the website road map being integrated more efficiently and thoroughly given we would have had more time to develop the application.

Reflection and Analysis

To reflect on this project, I feel that I has enabled me to develop new skills with the development of Web3 and the growth of NFT’s. Despite the platform being new to me, I feel that I have developed my knowledge from very limited, to fairly comprehensive understanding on how such applications can be developed into the future. This has exposed me to new languages such as Tailwind, React and Next, which will only advance my knowledge into the future, as well as online resources from the Clever Programmer as discussed previously. It is unfortunate that the resources for the outlay of the project was delayed so close to the deadline, however I will remain a member of the Stoney Tiger team over the summer and develop the application further and knowledge on Web3 applications expand.

Time Management

I structured my time management on a week by week basis, where I made sure that I took each stage into account. The My Room in the Garden project (Greenhouse AR), took four weeks to complete, with the Banshee AR guitar project taking 9-10 weeks to complete. This was down to the amount of development work required to build out the application as well as manging work alongside my dissertation too. The Stoney Tigers NFT platform however stretched between week 9-10 and week twelve, due the longevity that it took for the development and completion of application, partly due to the postponed handover document from our client. Overall I was happy in the way I managed my workload, however was not happy with the delayed development of the Stoney Tiger Project.

Handover information

Handover Document

References

  1. Clever Programmer -https://www.youtube.com/watch?v=x3eRXeMB-4k&t=6964s

  2. W3 Schools Javascript- https://www.w3schools.com/js/default.asp