Non-Fungible Travel

Have you ever wanted to preserve your travel memories accurately and forever? Our project is an application which you can make such a wish come true.

Non-Fungible Travel is a service that travelers can mint a memorial NFT. The NFT includes metadata such as a photo and a map

Next, I will explain how it works. First, the traveler takes a photo and uploads it to the app. Second, our app gets the location of the photo and also a map and uploads them to IPSF. Third, the traveler can mint a memorial NFT including a photo and a map. This is how travelers can engrave their trip's memories on the blockchain as NFTs.

In fact, the traveler can choose whether to select the secondary distribution of the NFT. Basically, we recommend minting a non-transferable NFT in order to preserve the memory of that traveler. At this time, they only pay for the gas price.

However, we have also provided the option for travelers to mint transferable NFTs by taking into account influencers and versatility. However, the user would then have to pay a fee in addition to the cost of the mint gas.

Let's enjoy your trip using Non-Fungible Travel after covid-19 is over!

Opensea: https://testnets.opensea.io/collection/nftravel-gjztaza6cv?search[sortAscending]=false&search[sortBy]=CREATED_DATE

The frontend is divided into three main parts: the part that does the Mint, the part that composes images and uploads them to IPSF, and the part that generates HTML for NFT.

The minting page is made up of Next.js, TailwindCSS, and Typescript, and the connection to the contract is made using Ethers.js. We also use Typeschain to access the contract, which is typed in Typescript.

The other two parts are controlled from this Mint page. After the user has entered their information, the NFT HTML generator generates the HTML, the server-side combines the images, the user confirms these two elements, and the server-side uploads the user's input, HTML, and images to IPFS via Pinata.

The final step is to Mint them all together.

The image compositing and uploading to IPFS are done by Vercel serverless function, which is not storing images in vercel, so it can't be done in the frontend.

The image composition is done on the server-side by creating HTML text from JSX, which is the template for the image and then using PlayWright to take a screenshot of it. The IPFS upload is done by sending the file from the client-side to the server-side and uploading it to the IPSF through the Pinata SDK.

The part that generates the HTML for the NFT is a function that is tapped on the client-side to generate HTML using Vue3 based on the data entered by the user.

When we use Opensea to display images and location information, we use Mapbox and Vue3 to improve UX, but even if Mapbox, opsen steet map, or other external services are no longer available, we can upload images with the same information to IPFS in advance.

Even if external services such as Mapbox or opsen steet map are no longer available, you can upload images with the same information on IPFS in advance and the data will remain forever.

Smart Contract is written in Solidity and deployed on polygon (Mumbai) to mint NFTs in accordance with ERC721.

We have developed a function that allows users to choose whether they want to do secondary distribution of NFT.

We have achieved the ability to restrict secondary distribution by calling the beforeTokenTransfer hook in ERC721.

Polygonscan & code : https://mumbai.polygonscan.com/address/0x91382043965fbcf629d180787461d924f2d74161