Demo Video & Walkthrough
The Matrix Fight Club (Web Link)
Problem to Solve
There is a community of people who love playing Matrix Fight Club (MFC). There are 100,000 unique Matrix avatars. You would battle an opponent by entering in your Matrix NFT Avatar ID and based on attributes you would Fight. MFC really helped the community to engage with each other and simultaneously have fun (which is what life is all about). Though after a while, the MFC platform kept getting errors and didn't load well and finally got discontinued. The owner of MFC said it was hard to maintain and ultimately the costs of running the service were too much. This left a big gap within the community. Having no knowledge of creating a fight application for a big community, I set out to build something that was reliable, engaging and ultimately provide value and fun to the end user.
Background
You'll probably be wondering 🤷🏽 what these Matrix NFT Avatars are. Around November 30th 2021, Warner Bros., in partnership with Nifty's launched The Matrix Avatars Program, consisting of 100,000 unique avatar NFTs. There were 300K in a queue and yes I was one of them 😁. It sold out on launch and started a multi year program. During this time, nearly a year later, Web3 surfaced different problems to solve such as decentralisation and token based economy. Though a bigger problem was deeper engagement within The Matrix NFT experience and aligning it with customer expectations. These unique avatars come with many different traits and attributes and are built with EpicGames Metahuman Creator. Below is an example of One. Here, you can see the Matrix NFT Avatar and the attributes assigned to the NFT.
Matrix Avatar Example
Learnings from the Past
So, we now know the problem: no MFC 😭 AND the IMMENSE demand for these Matrix Avatars at launch 🚀.
The question is..? how are we going to build something to solve this problem - let's look at learnings from the past...
I've written tutorial guides previously for AWS Amplify and gone through AWS Amplify Workshops. Though never gone Live Production on something real and tangible for customers using AWS Amplify. Being able to handle 100K Matrix Avatars is Daunting and Very Exciting at the same time! I needed something that was robust and had the ability to make many changes at speed. You're able to do this with AWS Amplify, through previews and testing with CI/CD workflows by continuously deploying a progressive app on every code commit. Users of this MFC will be accessing it globally. AWS Amplify utilises reliable hosting with CloudFront's content delivery network (CDN) with hundreds of points of presence globally. Having an oversight on monitoring metrics can be done via Amplify CloudWatch integration to ensure traffic, errors, data transfer and latency of the app are working effectively. You can also share yet-to-be released features with users via setting username and password. And a whole lot more... Read more here
Idea to Reality
Great 🤩, we've got good learnings from the past that we can utilise. Though what method shall we use to bring Ideas to Reality. There is a great book I use to map out ideas, which help me test and iterate fast. It's called Sprint by Jake Knapp. Definitely a recommended read if you've not read it. Here is a quick 90 second overview:
I used the Sprint approach to set a long-term goal. Why are we doing this project? Where do we want to be by the end of this hackathon (1 Month)?
Allow the user to Fight against another User with their Matrix NFT Avatar.
Simple right? Though it's important we have clarity as you can easily get carried away with features / requirements that do not lead you to that goal. Now we have an idea of where we are heading it's time to select some front-end frameworks as we'll be using the learnings of the past to implement AWS Amplify.
Frameworks
I've opted to build MFC with React Javascript library, Tailwind CSS and using AWS Amplify to host the web app. I know it could have been built with so many other choices. Though, there is a lot of support available to the choices and I'm already familiar with these libraries. This enables us to move faster and prototype something useful within the timeframe available.
LET'S GO! BUILD!
Blank Canvas...
We need a way for a user to input their information and bring back data of their Matrix Avatar
We need a way for the user to select an opponent
The system will need to do a calculation to battle each other
Display who is the Winner / Loser
Uhh, I had forgotten how to build in React (it's good to be open and honest 🙃, so we can move forward faster), so I did 32 Video Tutorials on React! Yes, insane, though it was a really good refresher and I learnt a lot on best practices and got me back into the swing. You can view the Playlist here.
Once the refresher was done, I loaded up a blank create react app and got on with figuring out how to get the Data. Then I read up on the differences between Fetch API and Axios. I found this guide helpful on the benefits and opted for Axios. Synced up the Axios with the Nifty's API and made my first call to get data on a Matrix avatar. That was an amazing feeling when you see the Data come through... kinda indistinguishable from Magic... I then looked at displaying this information within the app. Also, at a glance I and other users needed to understand the data without having to delve too much into the numbers. A good reference point is EA Sports Fifa games. They plot the data as a visual chart. I did this with ReCharts.
First Prototype
This is one of the First Prototypes that went live and was shared with users 🥳
Feedback from Munkiboy " can we actually apply our avatars to this at the moment or is it just a demo page, I got Monterey's Dojo when visiting "
Even as a demo page, more was needed and FAST 😁. So, I set out to allow the user to input data within the application.
User Input
Don't worry about the aesthetics at this stage (yes I know the input boxes look bad), this was the first iteration and it worked.
A user could input their information and bring back data of their Matrix Avatar. This is a great win and gave momentum to tackling the second point of selecting an opponent. I was able to do this and allow the user to see combination analysis by overlapping the data. Really cool 😎 and added a level of interaction as you can tap and click on different attributes (revealing the amount i.e. 13 Strength).
Skeleton is Ready
Replicate input boxes for both Players. Adding in Combination Analysis to showcase the differences too.
We've accomplished building the first part of the logic, to pull data for Player 1 & 2 through user input. We now need to move onto the logic of building the battle calculations for the fight.
Battle Calculations
Many users felt "tired" of simple click gamification (user feedback) or grinding for XP (points). I needed a different type of dynamic to provide a deeper level of chance and element of fun. Therefore, different types of testing took place.
The feedback was that this calculation was too simplistic and didn't give an element of chance. We then looked at variations:
Testing Ideas
D21 🎲 Integration and Updated Design
We agreed to go forward with a Dice Roll 🎲 of 21 (D21) and used Tailwind💨 to improve the user design. Definitely adds more appeal to MFC with the updated design.
Mobile and User Guidance
A special emphasis was to make sure it worked well on Mobile, as a significant amount of users sent screenshots via mobile whilst using MFC.
I added information and guidance for users to understand the flow of information for each section, as some users felt confused on what to do (on each part). Later on (as per Dr Cleopatra request), we had to update the guidance to bullet points. Though this is a good way of seeing the development / iteration, some users found it difficult following along with paragraphs of text.
We've seen lots of development! 🤯 Underneath this process I used AWS Amplify to enable these iterations at speed. Let's look at this infrastructure closer 🧐
AWS Amplify Enabled Speed of Development
AWS Amplify helped me to speed up the development process. It has many built in features that expedited and reduced the hassle to look externally. These included registering a domain and setting it up from within AWS Amplify application, domain management and hosting the web app. Creating a testing site for new ideas and previews before going live was the next step. I then enabled password protection to allow certain users access, to test and provide feedback.
Custom Domain Name with SSL Certification
This integration was silky smooth via AWS Amplify Domain Management. I went via Route 53 and checked for domain name availability. Then picked the one I liked and paid. You can also attach domains not registered with Route 53. Then simply attach it in Amplify, under domain management. It sets up the Free SSL certificate and you've moved from idea / prototype to live production (INCREDIBLE!) in a few clicks.
Test Version of MFC + Password Protected
Throughout building this application, I needed to test ideas in private (small user group) whilst maintaining a live working version. Amplify enabled this by having a test version (branch) feature. A couple of clicks and you too can set it up.
Feel free to check out the feature branch, I've left the web address, username and password below. Please drop any feedback in the comments below too. Or reach out to me directly on Twitter
I'll be testing new features of The Matrix Fight club here:
https://feature.d1zshvo1xzu1rw.amplifyapp.com/
It's password protected,
username: neo
password: whiterabbit
I am also testing ! some 3D tilting of Matrix avatars. 
We also tried to incorporate 3D Dice 🎲, where a user can spin it. Though we had issues with browser compatibility. Again, this shows some of the powerful features available to us with AWS Amplify. I'd highly recommend using them in your project.
Summary
We did it! 🙌 And we hit some stretch goals 🎯 with added features. I hope you took it for a test drive, if not, here is the link again: https://www.matrixfightclub.com
We set out to Allow the User to Fight against another User with their Matrix NFT Avatar. This was achieved! 🥳 We also created a responsive design for mobile users. This worked well for the targeted users.
Mobile Optimisation
Many users access MFC via mobile. Spending time and energy ensuring it displays well at different break points helped create a greater adoption. Emphasis on building for Mobile is extremely important. Tailwind provided a great way to tailor the design for mobile.
High Resolution Matrix Avatars
I always wanted to easily access and view a High resolution version of users' matrix avatar. You can't do that directly via the Nifty's platform. Though you can do this via MFC. If you click the Camera 📸 icon you get a full HD version displayed in BIG format. Love looking at the details in that format. I would definitely recommend checking that out.
Battle Calculations
Battle calculation, added a great element of chance. No longer do the avatars with the highest stats win. With stronger odds, now a weaker avatar could end up winning. Though a stronger stats avatar does increase probability of winning 😉 The use of SmartCrop with A.I. to bring focus on a matrix avatar head gave the battle calculations deeper visualisation.
Even though feedback of click gamification isnt desirable, having the Sprint goal helps prioritise what needs to be achieved by the end of this hackathon. What's done so far hasn't fixed that problem. We need to drastically improve the game dynamics to create a more engaging experience. Though this is a great start 😃. From Zero to something tangible in Production within One Month. 🚀
ADHD Users
Found it extremely difficult reading long text of paragraphs. Switching it to bullet points made it more easily readable and understood by more users. Made me also reflect on the length of this blog and how it's currently written. More than one learning in this area 🤓.
Future Plans
OAuth 2.0. - We will try to check user wallet using OAuth 2.0 and allow only the owner to fight with their Matrix Avatars (using Authentication - AWS Cognito).
League Tables and Tournaments - by storing Data (using AWS Dynamo DB) will help retention. Enabling recurring visits and continuous engagement. This is the life blood of any product or service.
Translation into other languages - The Matrix Avatars NFT program has a wide scope of nationalities and English isn't the main language for many. Ranging from Spanish, German and French.
Notifications to Users that are fighting each other. Or sending notification to a user, that you would like to challenge them or invite them into a tournament or league table.
Dark Mode - I would have loved to make a version, though ran out of time and other aspects had a higher priority. Maybe even add in some Dynamic Matrix Rain 😉
Animations and interactions - to make it more interactive (sliders). This is a key area of development going forward. Would be great to align this with storylines too. Creating a more immersive experience.
Special Shout Out - to the amazing members on the Nifty's Discord. Feedback from Marquise, Wolfs-Faun, Munki, Cheef, Tupper, Kamron and OpticDojo is greatly appreciated. No doubt the list is longer of people who helped (each feedback helped!), thank you. Feel free to share more feedback or if you'd like to help build the next iteration with me, get in contact.
I'm Out... 😎
Editor: Dr Cleopatra
Top comments (0)