Inspiration

The idea struck when i read about creators not getting a fair share of their income from fans just because they were on a platform which charges 40-50% as platform fees. This includes big names such as Twitch and Youtube. Initially the idea that i came up with was a extension onto Twitch where the creator's NFTs that the fan owns can be used as emotes during the livestreams. This would have been a good idea to implement especially since creators are already used to the twitch bits system.

The issue with completing this project was the fact that twitch kept rejecting the extension since it used web3 libraries and that is against twitch's policy. So to deal with this i decided that we had to move this stream of revenue to a different platform without actually expecting the creator to stream on a different platform.

The solution to this is somewhat inspired by this book called A Thousand Fans which states that all a creator needs to be successful is 1000 loyal fans. Taking this as the starting point i landed on the conclusion that a product where the creator can offer exclusive access to themselves to their super fans is the right way to go.

What it does

The project is a 2d metaverse where certain rooms are NFT restricted, the fans can access these areas and interact with the creator only if they have certain NFTs. Other fan will also be able to access this metaverse but won't be able to go into this gated room where the creator will be engaging with the "super fans". The engagement right now is in the form of video calls and some simple tic-tac-toe game. I plan on extending this to a sort of MMORPG game where fans will be able to set on quests with their friends, here the "super fans" will be gain access to some perks apart from engagement with the creator.

How we built it

I built this using Phaser.JS for the frontend rendering of the 2D assets. Inorder to make the map i used tiled.io map editor and exported as a JSON which would later be imported using phaser(they have support for tiled's JSON format). I used React to build the various dialogs which pop up upon interaction and redux-toolkit for global state management.

To enable multiplayer i used a express server which ran an instance of Colyseus for the multi-player aspect of the game.

To token gate the frontend we built a NFT marketplace using hardhat for smart contract development and deployed it to polygon testnet. The marketplaces frontend is built on nextjs for the frontend framework. On this the creator can mint NFTs and upload metadata generated using IPFS.

Challenges we ran into

We're familiar with making smart contracts and marketplace frontends so this wasn't really challenging. The part which really made my life really difficult is the rendering of the 2d game and multiplayer enabling for the metaverse.

Phaser.JS

This is a really comprehensive library for building out complex 2D games but the fact remains that game development is completely new to me and i was having a really hard time getting the elements to render. Initially i was having trouble with getting the JSON file that tiled generates to work properly with phaser. Turns out apart from just loading the images, i had to load the layers as well, i spent an embarrassing amount of time figuring this out.

Colyseus

Colyseus is a godsend api but due to the complexity of the tasks it performs (syncing sockets and updating data to all the clients) just using the library requires a clear mental model of it's operations. Due to my unfamiliarity i struggled setting event listeners for variable changes and updating player state based on that. I did eventually manage to figure this out but boy was it a journey filled with frustration. Now that i've gone through it i feel really accomplished having cracked that tough nut.

Token gating

Even though fetching the state of whether the user owned the NFT was fairly simple with the balanceOf function, rendering the closing door was a pretty difficult problem as i wasn't sure how i had to append the object after initialising. Turns out i had to store it as a global variable and update it as and when the wallet address has the NFT.

Accomplishments that we're proud of

I am pretty proud of the fact that i was able to make use of such complex libraries and make a functioning project. I used my favourite bundler vite for this due to it's speed. The fact that this could potentially be a product that creators could use to diversify their incomes gives value to the project itself.

Getting all these moving parts, Express colyseus phaserjs redux and react, to work together feels like a huge achievement. The best part of all this is that i have used typescript in this project which is an amazing dev tool and i'm glad i got to explore that as well over the course of this projects development.

What's next for Panchayat

I am imagining Panchayat to be a platform for creators/DAOs to congregate their fans/members in to help better engage with them. This should be done via an RPG style MMORPG where fans /friends from within the DAO could go on quests together and have fun. All this while still providing incentive to the fans who own the NFTs.

Built With

Share this project:

Updates