<h2>PoP what?!</h2>Proof of Participation (PoP) is the new system we've launched at TAIKAI that enables hackathon participants to receive on-chain NFTs to showcase the projects they were involved in.  This NFT contains data about the user's involvement in the hackathon and detailed information about the organizer and promoters. PoP is an immutable record that rewards participants, recognizing their hard work and commitment to the hackathon. This was made possible through HTML, CSS, Handlebars, and a library called node-html-to-image, which gathered all the pieces and allowed us to create unique NFTs for each hackathon while keeping the process simple and user-friendly.The idea for PoP originated in the first hackathon at TAIKAI in March 2019. Initially, we called them "badges" and intended to use them to promote gamification within the community. However, other features took priority over this idea and remained dormant. But if you want to know more about PoP, you can always read our blog post “<a href="https://taikai.network/blog/proof-of-participation-feature-explained" target="_blank">Proof of Participation (PoP): Explained</a>”.<img src="https://taikai.azureedge.net/P5aZELKBjjIxC7puiDqdUzeZ26YFdI64xsnUaSXywuE/rs:fit:800:0:0/aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3RhaWthaS1zdG9yYWdlL2ltYWdlcy9hNTg5MmZkMC1lNDNlLTExZWQtODk5YS1hNzNmMmQzZjkyYTkxLnBuZw" style="width:800px" class="fr-fic fr-dib" /><h2>From idea to the conception</h2>Now, the right time has arrived to elevate this concept of "badge" to an "NFT", as it can bring much more value to the user than just gamification. The development process was not straightforward as we did not initially know which approach would work best for us and not limit us in the future.First, we had to determine the layout, the information we wanted to show in the NFT, and the design. We began exploring different formats, how the data woudl be presented, testing some edge cases, and finally, how we wanted the final image to look.Since the beginning, our goal has been to create an NFT that would be different in each hackathon, and that would be generated automatically based on the dynamic data. The data aspect was relatively easy, but the most interesting part was replicating what the design team had created for something the API could build dynamically.Building the NFT using TAIKAI’s or LayerX’s logo image would have been a straightforward process as the image remains constant and could be delivered by the design team for all hackathons, with the system only adding the relevant data. However, this was not the approach we desired. We aimed for distinct and unique images for each hackathon, hence applying special effects to ensure they were not just unprocessed images provided by the organization.We went through a design thinking session and quickly tested the concepts we had in mind for the images, like square and circle masks, different types of glitches or pixelate effects, and how the information could be distributed over that image. To help us, we used two services that allowed us to test effects on images easily: <a href="https://glitchyimage.com" target="_blank">Glitch Image Generator</a> and <a href="https://photomosh.com" target="_blank">PhotoMosh</a> (no, it's not Mosh Mage from LayerX).The latter, PhotoMosh, offered us more possibilities in terms of effects and previews, which ended up helping us a lot. And since the path was chosen regarding the effect, we needed to understand how this effect would be automatically generated on top of each image.We experimented with several libraries, including <a href="https://threejs.org" target="_blank">three.js</a>, to achieve our desired outcome, but the process was more complicated than we desired. In keeping with our motto of "keeping it simple," we aimed to achieve the same results with fewer lines of code.To simplify the process, we created a small Node.js service that could use data from the API to generate an image for the NFT using a template. This led us to consider using Puppeteer, a tool that allows the creation of an image from an HTML template that can then be minted on the blockchain. Fortunately, we found the <a href="https://github.com/frinyvonnick/node-html-to-image" target="_blank">node-html-to-image</a> library, which achieves this using Puppeteer in headless mode and also supports the use of Handlebars for adding logic to the HTML.This challenge led us to a crucial decision point that helped us choose our path: creating the NFT image using only HTML and CSS. By using CSS properties like transform, background-blend-mode, mix-blend-mode, filter, and several others, we successfully achieved the desired effect and placed all the information in the appropriate locations. The library's support for <a href="https://handlebarsjs.com/guide/#what-is-handlebars" target="_blank">handlebars</a> to fill in the HTML with dynamic details made creating what PoP is today a straightforward process.<img src="https://taikai.azureedge.net/23-_io_gC-dN2XPnkacZZUTAgCywal0Pj28hANquQrU/rs:fit:800:0:0/aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3RhaWthaS1zdG9yYWdlL2ltYWdlcy9iMTMxNTkyMC1lNDNlLTExZWQtYjA2My1kZGI4ZWYyZDBjODcyLnBuZw" style="width:800px" class="fr-fic fr-dib" /><h2>The PoP Playground</h2>As you can imagine, one of the crucial parts of software development is testing the software. And that's when the idea of the PoP Playground appeared. This playground, for now, is an internal tool that allows anyone, developer or not, to play with the PoP and preview a PoP customization with the desired information: name of the hackathon, what type of participant the PoP refers to, data related to the project, etc.This tool allowed two interesting things. The first was that it facilitated the PoP styling development. It allowed us to test variations quickly and check if the code was doing what it was supposed to do without generating PoPs for every code change we made. The second was that we quickly managed to provide the entire LayerX team, developers or not, with a tool so that they could test and understand how a PoP of a given challenge would look and try possible edge cases.<img src="https://taikai.azureedge.net/HArgSbwPiQZcPqA2oLphQVWQu4-piToTy9K4V937pDQ/rs:fit:800:0:0/aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3RhaWthaS1zdG9yYWdlL2ltYWdlcy9iOWRlOTFmMC1lNDNlLTExZWQtODc1OS0yMTc1MTZkMzkwMGQzLnBuZw" style="width:800px" class="fr-fic fr-dib" /><h2>The UX matters</h2>After creating the PoP, we considered how the user would interact with it. We wanted to ensure that the user experience was as simple as possible, just like the PoP creation process was for us.Transitioning from web2 to web3 can be a challenging process. One of our primary goals is to simplify this process for users by providing easy-to-follow instructions and streamlining complicated procedures. Our ultimate goal is to ensure that acquiring a PoP is a straightforward and fast experience for the user. An email will be sent to every participant, jury, and mentor notifying them that they have one or more PoPs available. They simply need to click on the link provided in the email to go to the hackathon page associated with the PoP, and then confirm their intention to mint that particular PoP.  For this process, the user only needs a wallet address associated with their profile, which you can update in the user settings.<h2>What’s next?</h2>We are excited about the future of PoP and the possibilities it offers to all its holders. Our development approach philosophy also allows us to explore new ideas, such as integrating PoP into our CMS (Content Management System) for customers to preview and customize the PoP for their hackathons. This feature would allow customers to modify the image and the information contained within the PoP, opening up a range of creative opportunities for customization.The PoP NFT is in its early stages, so we welcome you to share your ideas and suggestions regarding how you envision it being used in the future through our <a href="https://discord.gg/layerx" target="_blank">Discord</a>.

Proof of Participation (PoP) is the new system we've launched at TAIKAI that enables hackathon participants to receive on-chain NFTs.

Proof of Participation: from concept to creation

Related Posts

How Base is scaling access to web3

TAIKAI is now on Base

TAIKAI Product Update 3.19

Subscribe to our newsletter

Products

Community

Company

Help