The Matrix Fight Club built with AWS Amplify
Tags: amplify, javascript, begineers
Published: 2022-10-01 10:51:49

---
title: The Matrix Fight Club built with AWS Amplify
published: true
date: 2022-09-30 21:57:51 UTC
tags: # amplify # javascript # begineers 
canonical_url: https://markramrattan.hashnode.dev/the-matrix-fight-club-built-with-aws-amplify
---

## Demo Video & Walkthrough

{% embed https://youtu.be/hZtQOKVuO1E %}

## The Matrix Fight Club (Web Link)

[https://matrixfightclub.com](https://www.matrixfightclub.com)

## 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](https://niftys.com/c/thematrix), 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

![Screenshot 2022-09-26 at 15.10.50.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664201469718/z-d-AOwsr.png)

## 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](https://dev.to/aws-builders/a-beginners-guide-to-aws-amplify-studio-391) and gone through [AWS Amplify Workshops](https://dev.to/godspowercuche/build-a-serverless-real-time-application-with-modern-apis-the-graphql-real-time-race-4gbk-temp-slug-3687641). 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](https://aws.amazon.com/amplify/)

## 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](https://www.amazon.co.uk/Sprint-Solve-Problems-Test-Ideas/dp/0593076117/ref=sr_1_1?crid=3VZBO5TNL6AA0&keywords=sprint+jake+knapp&qid=1664206595&sprefix=sprint%2520jake%2520knapp%2Caps%2C92&sr=8-1). Definitely a recommended read if you've not read it. Here is a quick 90 second overview:

[https://youtu.be/K2vSQPh6MCE](https://youtu.be/K2vSQPh6MCE)

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](https://reactjs.org/), [Tailwind CSS](https://tailwindcss.com/) and using [AWS Amplify](https://aws.amazon.com/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...** 

> 1. We need a way for a user to input their information and bring back data of their Matrix Avatar
> 
> 2. We need a way for the user to select an opponent
> 
> 3. The system will need to do a calculation to battle each other
> 
> 4. 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](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d).

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](https://www.freecodecamp.org/news/how-to-use-axios-with-react/#what-is-axios) 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](https://recharts.org/en-US/).

## First Prototype

This is one of the First Prototypes that went live and was shared with users 🥳

![Screenshot_2022-08-12_at_18.25.22.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664278847257/NwUOSAHEJ.png)

Feedback from [Munkiboy](https://twitter.com/_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.

![Screenshot_2022-08-15_at_13.58.45.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664279310526/K4sLXfc8N.png)

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.

![Screenshot_2022-08-15_at_14.08.34.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664279453454/yZ9vD9wT4.png)

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.

![Screenshot 2022-09-27 at 11.06.20.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664291426070/W7sRCtC5B.png)

The feedback was that this calculation was **too simplistic** and didn't give an **element of chance**. We then looked at variations:

## Testing Ideas

![Screenshot 2022-09-27 at 20.32.38.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664307172024/-X0xD46gB.png)

## 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.

![Screenshot_2022-08-25_at_20.08.07.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664293148368/gSzy1i03i.png)

## 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.

![Mobile.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1664546365831/aQ864M9Dr.jpg)

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.

![Screenshot_2022-09-11_at_21.16.07.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664293180503/CIjz8NccR.png)

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](https://aws.amazon.com/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](https://aws.amazon.com/route53/) 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.

![Screenshot 2022-09-27 at 20.35.50.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664311558064/aq-Xh0OKM.png)

### 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](https://twitter.com/markramrattan)

I'll be testing new features of The Matrix Fight club here:

[https://feature.d1zshvo1xzu1rw.amplifyapp.com/](https://feature.d1zshvo1xzu1rw.amplifyapp.com/)

It's password protected,

**username:** neo

**password:** whiterabbit

**I am also testing !** some 3D tilting of Matrix avatars. ![3d.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664362806185/KAp5ZYZ_B.png)

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.

![Screenshot_2022-08-28_at_19.01.26.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664363151878/Z7ESwACZ9.png)

## 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](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](https://discord.com/invite/niftys). 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