An Engaging Interactive NFT Experience

Problem

In an effort to create a highly interactive NFT experience, we wanted to embed pixels directly on the blockchain and showcase them through OpenSea's iframe feature. This aimed to not only track the history of each pixel on-chain but also allow users to personalize and sign their artworks. Challenges included enabling users to level up their canvas and offering the flexibility to edit an NFT up to 100 times, all while ensuring a seamless and user-friendly interface and keeping gas to a minimum.

Solution

Our innovative approach led to the development of a custom smart contract that stores the history of each NFT through a unique mapping of pixels. The contract is designed with custom events and listeners that dynamically update metadata and attributes as users paint their canvas. This system rewards engagement; users who own other NFTs, engage in activities like burning or making edits, subsequently elevate their experience and unlock new features. Only NFT holders have the privilege to edit their own pieces, offering a layer of exclusivity and ownership. Additionally, artists have the option to 'freeze' their NFTs, permanently capturing their creation in its current state. This feature underscores our commitment to both innovation and artist autonomy, presenting a canvas where digital artistry meets blockchain technology.

Highlights

Minting

• Users would mint an NFT and recieve a randomly generated painter along with an empty canvas

Drawing

• Users could draw whatever they like on top of the canvas

Leveling Up

• Overtime a users canvas would level up and they could add music, generative art frames, and overlays

Home

Tech Stack

• Backend: We used an AWS Fargate container to listen to our contract events in order to update the metadata as users edited their NFT's.
• Database: We used DynamoDB for storing the metadata.
• Frontend: Next.js frontend integrated with p5.js so users could draw on their canvas.
• Wallet Integration: Wagmi, a JavaScript library for Ethereum, is integrated for seamless wallet connections, simplifying the process for users to interact with the Ethereum blockchain.