Forem: Mark Ramrattan

Running a Validator Node on The Root Network (TRN) with AWS

Mark Ramrattan — Sun, 31 Aug 2025 16:03:19 +0000

From Palm 🌴 Network to Futureverse 🌌

😎 As a lifelong 🦇 DC fan, the last four years have been nothing short of a rollercoaster. From the early days on the DC NFT Marketplace built on the Palm Network, to the big merger with Candy Digital, and now this exciting leap into the Futureverse powered by The Root Network — it’s been wild 🤪

And now, for the first time ever, I’m running a Validator Node on AWS to help support our DC collectibles migration and contribute to the Futureverse ✨ ecosystem. But before I dive 🤿 into my experience with validator setups, let’s back up for anyone new to The Root Network…

What is The Root Network? 🌐

The Root Network (TRN) is the backbone blockchain that powers the open metaverse — designed to connect games, content, and digital experiences in one interoperable ecosystem. Think of it as the infrastructure that ties everything together.

👉 Check out The Root Network

To keep TRN alive and synchronised, it relies on nodes — the backend engines that either serve apps or secure the network. Without nodes, no blocks get processed, no transactions get validated, and the metaverse doesn’t move forward.

Types of Nodes 🖥️

Here’s a quick breakdown of the three main types of nodes on The Root Network:

Full Node ⚡
Stores recent blockchain data and prunes older states (keeping the last 256 finalised blocks). Around 50GB of storage. Useful for developers who need access to the latest transactions and data.

Archive Node 📚
The historian of the blockchain — keeping all past blocks and states. Heavyweight: 500GB–1TB of storage required. Great for apps needing historic data (leaderboards, ownership records, collection displays, gamification).

Validator Node 🛡️
The guardians of the network. Validators don’t just store data — they create new blocks and validate transactions, playing a central role in securing TRN and maintaining consensus.

Lessons Learned from Running a Validator Node 🛠️

Running a validator for the first time isn’t just a “click and go” setup. It’s an ongoing responsibility. Here are some of my key learnings that might save you time (and money) if you’re considering joining as a validator:

1. Be Ready to Stake Big 💰

The first thing to know: you’ll need to stake a significant amount of ROOT tokens to cover costs and make your validator viable.

👉 At the time of writing, 1.5M–2M ROOT (roughly $5K–$7K USD) is the recommended range, though this can change depending on market prices.

This detail isn’t always clear in the documentation. It’s “tacit knowledge” among node operators. Factor it in early: running a validator isn’t just about spinning up a server — it’s about ensuring your stake covers costs and generates returns.

2. Don’t Run It From Home 🏠🚫

It’s tempting to host a validator locally or through a cheap provider, but uptime and performance are everything.

If your node goes offline, you risk slashing penalties (losing part of your stake). Robust cloud infrastructure is the way to go.

✅ I chose AWS, which offers 99.99% uptime per month. Alternatives include Microsoft Azure or Google Cloud.

If you delegate to someone else’s validator, make sure you can reach them quickly if things go wrong. Downtime happens, and responsiveness is critical.

3. Fine-Tune Node Settings ⚙️

The docs are easy to skim, but buried inside are optimisations that really matter:

Disable Simultaneous Multithreading (SMT) → Better single-threaded performance.
Prioritise CPU speed → Single-thread performance matters more than core count.
Use SSD gp3 (EBS storage) → Lower latency, optimised for I/O-heavy workloads.
Harden network settings → Secure your instance for updates and P2P traffic.

4. Monitor Everything 📊

Running a validator is like managing a server that never sleeps. You need visibility.

CloudWatch Alarms → Alerts for CPU, storage, and RAM usage (set triggers at ~70%).
Node updates → Expect ~3–4 updates per month (kernel patches, security updates, resets for optimal performance).

Small practices like this make a huge difference in long-term stability.

Example: Updating a Root Network Node

If you don’t understand the commands below — no stress. I’ve added documentation links at the end. You can copy and paste commands into search or the docs for more detail.

Step 1 — Check what’s upgradeable:

apt list --upgradable

Step 2 — Check & Update Packages information:

sudo apt update

Step 3 — Upgrade packages:

sudo apt upgrade

Step 4 — Restart if needed:

sudo reboot

Example Updates Performed

On 29th August 2025, we updated around 10 packages on our Ubuntu system.

Linux kernel packages:

linux-aws (6.14.0-1011.11~24.04.1 → 6.14.0-1012.12~24.04.1)
linux-headers-aws (6.14.0-1011.11~24.04.1 → 6.14.0-1012.12~24.04.1)
linux-image-aws (6.14.0-1011.11~24.04.1 → 6.14.0-1012.12~24.04.1)
linux-tools-common (6.8.0-78.78 → 6.8.0-79.79)

System packages:

udisks2 (2.10.1-6ubuntu1.2 → 2.10.1-6ubuntu1.3)
libudisks2-0 (2.10.1-6ubuntu1.2 → 2.10.1-6ubuntu1.3)

New kernel-related packages installed:
linux-aws-6.14-headers-6.14.0-1012
linux-aws-6.14-tools-6.14.0-1012
linux-headers-6.14.0-1012-aws
linux-image-6.14.0-1012-aws
linux-modules-6.14.0-1012-aws
linux-tools-6.14.0-1012-aws

We moved from kernel 6.14.0-1011-aws → 6.14.0-1012-aws. Restarting the system was required to load the new kernel.

Why Continuous Updates Matter

Skipping updates leaves your validator exposed. For example:

Critical security flaws (like CVE-2025-38083 in the network traffic control subsystem).
Broad driver and network fixes.

👉 In short: keeping your node updated = protecting both your stake and the network.

Helpful Documentation 📚

Final Thoughts 🙌

Running a validator is a commitment, but it’s also an incredible way to support the network and community while deepening your knowledge of blockchain infrastructure. For me, this is more than a technical experiment — it’s about helping shape the future of DC collectibles in the open metaverse 🌍✨

TL;DR ⚡

The Root Network (TRN) powers the open metaverse — nodes keep it running.
Validator Nodes 🛡️ secure TRN by creating blocks & validating transactions.
What you need to know if you’re starting out:
Stake Requirement → 1.5M–2M ROOT ($5K–$7K) recommended.
Don’t run from home → Use cloud providers (AWS, Azure, GCP) for uptime.
Optimise settings → Disable SMT, prioritise CPU speed, use SSD gp3, secure networking.
Monitor constantly → Set CloudWatch alerts, expect ~3–4 updates per month.
Updates matter → Kernel/security patches (e.g. CVE-2025-38083) protect your stake and the network.
In short: Running a validator is a real commitment, but it’s one of the best ways to support the Futureverse ecosystem while learning blockchain infra 🚀

Special thanks to:

Scott (MoMeta.root) — Debugging node issues
Bildo — Connecting me with experts
Shen — Optimising storage & costs
People from AWS: David Espitia Castresana, Diego Cavestany, Jason Dunn + Team (& many others I am sure helping behind the scenes)
AWS London IRL Workshops — Node performance guidance
Dr Cleopatra — Reviewing this content 🙏

Collaborative efforts achieve greater, more sustained success than individual pursuits. I’m grateful to everyone contributing — whether by helping, staking, or simply reading this blog 🚀

DC Bat Cowls with Amplify Gen 2 Fullstack Typescript

Mark Ramrattan — Sun, 26 May 2024 08:59:59 +0000

This is a submission for the The AWS Amplify Fullstack TypeScript Challenge

What I Built

I built an application that helps users find the DC Bat Cowls 🦇 trait rarity using Amplify Gen 2 with Typescript. What a Bat Cowl is can be found here. The marketplace for them is here. Summary on Bat Cowls is a really cool project that has enabled me to create our own DC Comic... and created our own super villain within the DC Universe.

Demo

You can view a Live Demo of the application here:
https://www.dcbatcowls.com

Git Repository:
https://github.com/markramrattan/dcbatcowls

Journey

My process (journey) involved spending the Amplify Gen 2 release week soaking up all the information each day. That was wild!🤪 (plus the 4 hour AWS Twitch stream) and an incredible insight into the BIG steps forward the AWS Amplify team is making. I could probably write 5 blogs... on all the AWS AMPLIFY updates 😂 (Yes it's capitalised for a reason aka it's AMPLIFIED...) though if you want to read what's new check out these two blogs:

https://aws.amazon.com/blogs/mobile/team-workflows-amplify/

https://aws.amazon.com/blogs/mobile/new-in-aws-amplify-integrate-with-sql-databases-oidc-saml-providers-and-the-aws-cdk/

First thing I did was do the Quickstart during the Amplify Gen 2 release week. That template gives you a fast and quick (hands-on) insight on the new features. If you want to check it out, it's here. I used the NextJS App Router version.

What's weird or interesting 🧐 is my own development journey has switched to NextJS and Typescript. Then this pops up... with AWS Amplify Gen 2 using a TypeScript-based, code-first developer experience (DX) for defining backends.

The Gen 2 DX offers a unified Amplify developer experience with hosting, backend, and UI-building capabilities and a code-first approach.

I think that means... I am a *Full Stack developer... * I remember back in the days of putting Front-end Developer on my C.V. 😆 Those days are LONG gone💨 I am enjoying this Full Stack Developer experience. A great understanding of how Amplify works is the concepts section (probably a great place to start). The page has a great overview on how to reframe your mind on what it currently is now:

https://docs.amplify.aws/nextjs/how-amplify-works/concepts/

This diagram from the page above is great to visually understand the constructs:

Ok, enough theory! 🧠 We did the reading, let's build and participate in this Amplify Gen 2 challenge. The initial Base of the project is the quickstart template. Sometimes it's better to not start from a blank canvas. Gutted it out and started working on my data models...

How was I going to store the data?
What would it look like?
Would users find it beneficial being in that format?

Reflecting, I probably did it the wrong way around. I should of spent more time with users and work backwards. Though... this project is still in development and I'll continue to work on it after the challenge is done.

I really enjoyed learning about constructing the data model. I am used to Amplify Studio and doing it the visual way and this is a big change for me. I found it a better experience (code first)... which is weird (as I am a more visual person).

After spending time working out the model. I used the data manager to input the data needed. I wish there was a way to add the data in bulk (i.e.) upload this csv, reformat it and populate it in the tables (there probably is... if you know how, drop a comment or tag me). Though saying that, when the Bat Cowls get re-minted on the blockchain, i'll probably use the API to populate the data.

Connecting up the model to the Front UI was fun. I used tailwind and reverted to what I know (not always best), though I was able to quickly design it and push out something cool! 😎

Yes the different traits are clickable and it takes you to more details (rarity).

For me, this looks Cool! 😎 and built SO FAST💨 Normally it takes me at least a month to get it to this level. Instead it's increased my speed of development. I used Amazon Q with Amplify integration! That shizzle is SOO GOOD! I would say it's a 10x improvement in development speed (for me). Though lots still to learn! and excited about integrating more user benefits.

I also added a Web3 wallet from ThirdWeb so users in the future will be able to connect their Bat Cowls to the application. Great integration and has the ability to specify wallets and restrict usage to particular blockchains.

<ConnectButton
     client={client}
     wallets={wallets}
     chain={defineChain(11297108109)}>
</ConnectButton>

I added the Data component for this project. I could easily add the other three (Authentication / Serverless Function / File Storage). However, I tried to make this about self learning and improvement aligned to building something of benefit to the user.

Going forward (continuously learning), I'll definitely be integrating more components when needed for user benefit.

Thank you for reading my blog. Feel free to check out what I've created. All feedback is welcome 😎

Editor: Dr Shivani Kochhar
Updated Data for DC Bat Cowls by Jake & NFTink3r

The Matrix Fight Club built with AWS Amplify

Mark Ramrattan — Fri, 30 Sep 2022 21:57:51 +0000

Demo Video & Walkthrough

The Matrix Fight Club (Web Link)

https://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, 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:

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, 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

A beginners guide to AWS Amplify Studio

Mark Ramrattan — Sat, 01 Jan 2022 16:46:08 +0000

Are you trying to learn more about AWS Amplify Studio? If your answer is Yes, then this guide may help you get a better understanding. Hopefully it will also help you keep track of related information around this new release. There are a few different videos, blogs, tweets popping up on Amplify Studio. I needed something to connect them all together (maybe you do too). We all know how fast it changes in this space and a guide can help keep this information in one place and relevant. As I find new resources / links, I'll be updating this same guide to keep it up to date :) If you have recommended resources, please do share them and I'll add them to this guide. Probably a good time to drop that famous African proverb:

If you want to go fast, go alone, but if you want to go far, go together

I'll be explaining and listing essential resources on Amplify Studio. We will also be taking AWS Amplify Studio for a test drive! Hopefully you will find value in this guide / blog. Even if it's just understanding concepts, please do follow along (at your own pace) and test it out with me. If you're not aware of this new update… let's explain below (feel free to skip this if you've already gone through it):

What is AWS Amplify Studio?

AWS Amplify Studio is a visual development environment for building full-stack web and mobile apps. Studio builds on existing backend building capabilities in AWS Amplify, allowing you to accelerate your UI development. With Studio, you can quickly build an entire web app, front-to-back, with minimal coding, while still maintaining full control over your app design and behaviour through code.

I like to think of amplify as a great way for you to go from idea to production ready app, fast. I also think this shift to Amplify Studio will help bring ideas to life for non developers too. Have you got a startup idea? I would recommend trying this out! Let's have a look at what resources are available to you:

Documentation Resources

About Amplify Studio: https://aws.amazon.com/amplify/studio/

General information on Amplify Studio. Great for quickly understanding what it can be used for.

Amplify Studio Docs: https://docs.amplify.aws/console/

This website is where most of the magic happens. It explains how to setup your Amplify (Studio) environment. Key concepts are explained, helping you to turn your idea into UI design, database modelling and binding your UI to data.

Amplify UI Docs: https://ui.docs.amplify.aws

Great website for you to learn how you can use prebuilt UI design layouts and components within your app. This is a new feature and definitely worth checking out for inspiration!

Understanding CSS: Flex Help

There are lots of properties now with UI / CSS aspects in the development and design of components and layouts. This website will help you fill in the gaps of what can be changed regarding design.

What's New: AWS News Post on AWS Amplify Studio

General overview / announcement explaining region availability of Amplify Studio.

Amplify Studio features written by @aspittel and @theswaminator

8 New Features of Amplify Studio

Ali Spittel for AWS ・ Dec 6 '21

#javascript #webdev #aws #react

Great overview of eight new functionalities and features for Amplify Studio.

Tutorial Resources

Launch Blog Tutorial: AWS Amplify Studio using Figma

René taking you through a tutorial from start to finish. Even if this is not aligned with your idea, doing this tutorial will help you gain practical understanding of key concepts.

AWS Amplify Studio: Official Getting Started Tutorial

You should do this official tutorial! It’s really good and probably the best place to start if you don’t really want to read anything and just build, which is completely cool to do. We all learn and build differently.

Build a Vacation Rental Site with Amplify Studio

Build a Vacation Rental Site with Amplify Studio

Ali Spittel for AWS ・ Dec 14 '21

#react #javascript #aws

Great tutorial that helps with all those nuances that don't get explained. Lots of extra links on the different steps to help plug those gaps.

Matt's Amplify Studio Twitter Tutorial thread:

// Detect dark theme var iframe = document.getElementById('tweet-1467374905033437185-864'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1467374905033437185&theme=dark" }

Great for understanding the steps quickly. Definitely recommended if you want to learn via Twitter.

Anna's blog on: Building a Newsfeed with AWS Amplify Studio

Great to see a different use case tutorial! Brings in a deeper integration of how to do different layouts and social components (profile pictures, comments) integration.

A Cloud Guru Tutorial: Create a Blog App with Studio

Ali showing us a different use case and includes building the app from a sandbox environment.

Clojurescript Tutorial: How to Use Amplify Studio Figma Connector with Clojurescript by @rberger

Instead of being Javascript based, the blog shows how you can use Clojurescript for the project implementation. It does incorporate the Javascript output of Amplify Studio but all code to use it is in Clojurescript. Great work!

(Ali Spittel) Figma to React to the Cloud: Build a Fullstack App with AWS Amplify Studio:

Using AWS Amplify Studio to generate React code from Figma components which are fully cloud-connected. Ali builds a blog app in this tutorial!

Figma Design Integration

One of the new features allows you or graphic designers to develop your app design in Figma and integrate within Amplify Studio. Let's take a look at this integration.

Figma is a free, online UI tool to create, collaborate, prototype, and handoff your application design. Amplify Studio offers an integration with Figma, allowing you to generate reusable React code by importing your Figma design file. Amplify Studio automatically converts any Figma component in your Figma file to a React component that can then be used in your app. Whenever you make a change to the component in Figma you sync the changes to Amplify Studio and update your application!

There are 4 introduction videos here on how to use Figma. If you're like me, this is all new. I'm used to graphic designers working in adobe photoshop, illustrator etc and sending it to front-end developers (me) and then I would translate that into production. Using Figma is a new way for me to improve the design -> development process.

Let's GO! & Build a Solution (MVP)

The above is a lot of information to digest. We are not stopping there... (stick with me!) and yes we could probably split this into a series, though we have all these resources and we've got nothing tangible... We need to build something with all this knowledge!

I was in the Amplify Extensibility sessions and a few people commented "Is there anywhere on the web with all the amplify videos in one place?" I replied, "I've not seen one and could easily create a youtube playlist to encapsulate them all." Let's create a place (solution) to view all Amplify Studio videos.

Yep, we are going to build an app to hold all of our Amplify Studios videos. Yes, that sounds like Inception, building something for Amplify with Amplify. We need this solution, to give other users CRUD access to update / manage the content (Amplify Studio enables this functionality). That's enough talking, let's GO!

Step 1: Load up an App in Amplify Studio

Lots of different ways to do this, I've gone via AWS Management Console, then locate AWS Amplify and select New app -> Build an App. You should see the below screen, I've called my app 'Amplify Studio Learning'. Select Confirm Deployment.

Step 2: Launch Amplify Studio

Once it loads, you'll see 'Launch Studio' button in the backend tab. Click that button, though check if your pop up is blocking it from opening (always happens to me, in chrome!).

If you've been using Amplify recently, you'll notice, Amplify Studio looks exactly like Amplify Admin UI and you would be correct ;) What's better than a new service, a service that's been refined and improved over time. I digress, let's get back on it!

Step 3: Data modelling & Adding Data

Select the Data tab on the left, we are going to do some data modelling. Mine looks like this:

If you've gone through the other tutorials, this will be familiar to you. I've added fields for video url, name and type. Once you're happy with your data structure, click "Save and Deploy". This is where Amplify builds it all out for you in the background. Once done, head over to the content tab. Mine looks like this:

Yes we can add auto generated data, though you're on route to production / being a pro, put in some real data. I've inputed some Amplify Studio videos that are essential viewing. Once done, it's time to introduce Figma (Design). Click the Home menu and select the 'Build UI' button. Or click the UI Library tab and select Get Started button.

Step 4: Open up Figma

Clicking the Get Started button will open up the link to: Figma - Amplify Studio Template. Click duplicate and select My Components. You'll see the available components. I've customised CardE.

Feel free to adjust your component the way you would like it. Once you're happy with the design. Click the Share button in the top right and copy the link.

Step 5: Sync Amplify Studio with Figma

Once you've got your link, you need to switch back over to Amplify and paste the link in the UI Library (tab) area and click Continue. This will prompt you to sign in with Figma, allow access and sync the files. I normally accept all, it's quicker. Then all your components will be available for you.

Once that is done, you will see all the components loaded from Figma in your Amplify UI Library tab. Here is what mine looks like:

Step 6: Configure & Bind Data to Components

Awesome, it's looking good. Notice I've highlighted the Configure button in the above image. We now need to turn our design into a collection and bind the data to our design. Click Configure and you'll now be able to do this:

Groovy! Add in your model name in the Type. Select the top level Component (CardE) and input that in and give it a name (mine's 'Info'). Go through your other elements and connect them up. The property on text is 'label' and the value would be 'Info.name'. This will be different for you, depending on what you've named your data model and component name. Once you're done connecting it up, click Create Collection and give it a name (mine's 'CardECollection').

Step 7: Adjust Layout and Get Component Code

Here you can adjust the layout, spacing and order for your collection. On the left, I've selected 'Grid' and added 10px around each card. On the right you can adjust the order. I've added a sort filter via Name to be ascending, which will keep the content displayed in a logical order. Feel free to do the same or make it your own. Coolio 😎, that's done! We now need to import this into our app locally to test it out. Click '</> Get component code' This brings up a handy prompt of what we need to pull locally into our amplify app.

Step 8: Create App Locally & Sync with Amplify Studio

Create your React app locally. You can do this with running the following command in Terminal:



npx create-react-app amplify-demo

Move into the React app that you've just created:



cd amplify-demo

Remember that section with the 'initial project setup' guide. Run those commands:



npm install -g @aws-amplify/cli



npm install aws-amplify @aws-amplify/ui-react

Once done, you'll need to switch to the other tab instruction and pull the Amplify Studio code into your project. Mine looks like this:



amplify pull --appId d22vmom8abyhk2 --envName staging

In your App.js file add:



import { CardECollection } from './ui-components';

Place your collection where you would like it to be displayed:



<CardECollection />

My App.js looks like this:

Step 9: Override & Extend Generated Code - React Player

I know what you're thinking, wait a minute what happened to CardECollection in your code? Don't worry it's there, I've renamed it and it's called 'PlayerCollection.' Why have I done this? Remember at the start we are trying to allow users (you and me) the ability to watch videos. There is no video component integrated (yet). When you use a default component, any changes will be overwritten when you re-sync with Figma. Take a look at this Modify Generated Code Override. This explains how to do this change and also everything we've gone through so far is within that documentation. Take the time to explore the docs too.

I used and installed this (React Player):



npm install react-player

Then within your CardE component import the React player. Change the url to your corresponding path in your data model. Mine would be: url={Info?.video}



import ReactPlayer from 'react-player'

// Render a Video Player
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />

Remember that grey box in my CardE design on Figma. I've made the React Player to be the same size and it fits nicely within that area. Here's what my Player / CardE component looks like:

Now that's added, we should load up the React server and check what this looks like...



npm start

Mine looks like this:

Take a moment to reflect... if you've followed along. You've just turned an idea into a real, working product. AMAZING! Well Done! You've not only created an MVP, you are the MVP! All we do now is wait for Venture Capitalists to invest ;) or integrate your own payment model and bootstrap your startup. If you feel like helping to add more videos to our Amplify Videos app, feel free to connect with me. I'll add you to Amplify Studio content management section. You can add more videos and help the community learn more about Amplify.

Summary

I really like the direction AWS Amplify (Studio) is going. If you've got a startup idea or need to develop a solution to a problem, with an AWS service, Amplify Studio is a good option. Yes, the learning curve does take time (each person is different). I would encourage you to stick with it, the rewards are exponential when you understand how it all connects. Yes, it isn't a no-code solution and it does take time to up-skill. We've seen a deeper design integration which will exponentially help us reduce the time it take to move from idea to production ready app. I hope you found this guide useful. Leave a comment or tweet me @markramrattan with any questions or resources you think could be added. You can also join the Amplify Discord if you need help... They are superheroes!

Clean Up

To clean up your Amplify project, run:



amplify delete

Or via the Amplify Web Console, go Actions -> Delete app:

Wishing you a healthy and happy new year! I'm looking forward to seeing what you build in 2022.

Figma File Link @zachjonesnoel

Extra

If you want to take it a step further. Check out my other blog, it shows you how to integrate Chat and GEO within your Amplify App. That would be a cool extra integration:

Build a serverless, real-time application with modern APIs: The GraphQL Real-time Race

Mark Ramrattan for AWS Community Builders ・ Jun 29 '21

#aws #amplify #graphql #appsync

Editor: Dr Shivani Kochhar

Build a serverless, real-time application with modern APIs: The GraphQL Real-time Race

Mark Ramrattan — Tue, 29 Jun 2021 15:50:26 +0000

I attended this awesome AWS virtual workshop over 5 days from June 21st - 25th, where we spent an hour and half each day going through an episode (5 episodes in total). During this time, I built a fully functioning Formula 1 based application using AWS AppSync, AWS Amplify, Amazon Location Service and many others AWS services. Apart from learning how to build solutions to different use-cases using AWS services, I'm a massive Ferrari Formula 1 fan… Therefore doing this type of workshop is double the fun for me to take on. I am sure you'll learn something in this workshop that can help you with your projects.

However, like with many virtual workshops it doesn't always go smoothly :) This dev post is to help other developers overcome issues I encountered when completing this workshop. Don't worry if you didn't attend, you can still follow along and complete the workshop with the contents in this post. In the words of F1 commentator Murray Walker, 'And it's GO! GO! GO!'

This workshop is well suited for developers, Solution Architects, and anybody looking to get started with GraphQl on AWS. The main programing language used is Typescript and Javascript. However, you do not need to have an advance knowledge of coding. All the code is provided for you.

This workshop should take you about 5 hours to complete.

Virtual Workshop Link: Click Here

This will take you through the workshop, step by step (including all the code)

OLD Workshop Link: Click Here

This is meant to be the new workshop link. However the updated version has removed the code snippets needed to complete the workshop.

Shout out @dev_007_387ddc3e7f1626418 for sourcing a working version of the workshop.

Video for each episode

All 5 Episodes in a Playlist

I also created a playlist of all 5 videos, if you want to watch them all, one after the other: Click Here

Slide Deck for Each Episode & Lab Files

Slide Decks 1 - 5 & Lab File: Click Here

Each person who conducted an episode / session had slides to work alongside the workshop. You might find this useful for understanding the concepts of each section.

Shout out to @jjmats, who noticed the lab files have been removed from the updated workshop. I have a copy and i've uploaded the lab files to the dropbox link above.

Episode 1

Build and deploy your serverless app in minutes
Video: Episode 1 - Walkthrough

Brice Pellé lead this session. I found it hard keeping pace, as I had many errors and was trying to follow along whilst debugging. Below are my tips so you find a faster pathway.

Tips:

Pick Ohio (us-east-2) as your region. Don't do what I did and pick eu-west-1 / eu-west-2 (I'm in London and wanted a region closer). Amazon Location Service is only available in specific regions and in eu-west-1 I had trouble getting it all working in that region. Worked great in us-east-2…

Cloud9 is a great IDE service. Strongly encourage you to use that route to do this workshop. Later on in Episode 3 Video tutorial, you'll see errors and warnings. You can turn it off, to avoid seeing them. Cloud9 -> Preferences -> Language -> Hints and Warnings -> Turn off

At the start of the session, many of us had a problem with VPC errors when setting up our Cloud9 for the first time. Simple way to solve this is to create the Default VPC. Your VPCs -> Actions -> Create Default VPC

57:55 mins into the tutorial video (Lab 1 -> Add Auth), Read & Update is selected on Event. Make sure you select both of them, the workshop guide only instructs you to select just Read.

Episode 2

Get started and dive into API modernization with GraphQL
Video: Episode 2 - Walkthrough

Brice Pellé did this session and it was a good continuation from Day 1. I thought it went well, probably because I attempted this lab before the session started (prep work). Following along was easier. Main tip for this area is to make sure you take breaks when you're tired. Lots of detail in setting up the connection with DynamoDB. A typo can result in having to redo the entire section to find out what went wrong.

Episode 3

Integrate real-time location services into your app so you can interact with users based on where they are
Video: Episode 3 - Walkthrough

This is the section where I found out eu-west-2 didn't have Amazon Location Service available (doh moment, happens to all of us). I deleted everything and started again (in us-east-2). I did manage to adjust the code to get eu-west-1 to work though for the sake of fluidity, I went back to the beginning. Probably my favourite feature from the entire workshop. Absolutely love the geofencing and the tracking of movement. Marcia Villalba covered this session swiftly. Watch out for the right IAM role to update:

When you see the Map working for the First Time:

Check out this quick screen share I made during this episode. The geofencing and tracking through amazon location service enables you to track user movement. Left side is one user and the right is another user logged in (side by side so you can see). You could do many different use cases... (Imagine showing content to users based on which paddock they are in i.e. Ferrari, Mercedes, Red Bull, etc):

Episode 4

Integrate chat and push notifications into your app to drive fan engagement via a second screen
Video: Episode 4 - Walkthrough

Derek Bingham, talks through this section. Take your time going through the details of integrating pinpoint. The initial setup of chat is straightforward though adding images and tagging someone requires careful setup. I got bit carried away in my chat :) Yes I know Ferrari are not winning the title this year, we can dream though…

Episode 5

Live real time race with AWS AppSync

Video: Episode 5 - Walkthrough

Stefano Sandrini went through Session 5. You can easily get something wrong in this section. Take your time, and you're better off watching Stefano video rather than just following the written instructions. During the 'Ingest real-time data into your app' section it asks you to open the 'parameters.json' file (There is no parameters.json file). Don't do what I did and think, he probably meant function-parameters.json file. You need to create a new parameters.json file and insert the code into that file:

{
    "stepFunctionprocessWorkflowArn": {
    "Fn::GetAtt": [
      "stepFunctionprocessWorkflow",
      "Outputs.Arn"
    ]
  }
}

The final outcome of the workshop is awesome, definitely worth seeing your car sprint around the track:

Summary

Great workshop, thoroughly enjoyed undertaking this one. I definitely know a lot more now than when I started. I'll definitely be adapting this workshop and building this knowledge within my own project. I've gone through this workshop probably 3 times. I will still need to go through it again, understanding how each part of the code interacts. I would recommend you do the same. It's great when it all works at the end, though if you don't understand what's going on in each section (code) you'll have difficulty transferring that over to problems you're trying to solve. Feel free to drop your thoughts in the comments. If you encounter any problems when doing this workshop, feel free to drop them in the comments and you can also find me on Twitter: @markramrattan More information and solutions can be found on AWS Amplify Discord

I have a live fully working version running, so if you have any questions or you want to check something out, let me know. I could do a live code session of me doing it all again from scratch, though the AWS team members have done a great job with the video walkthroughs.

Clean Up

Many of the services used in this workshop have a free tier. However, make sure to clean up at the end of the workshop to avoid incurring charges.

To clean up your Amplify project, run:

amplify delete

To clean up your Location resources, head to the Location service AWS console:
- Maps: Select GraphQlRealTimeRacing and click Delete Map
- Geofence collections: Select MonzaCircuit and click Delete geofence collection.
If you used Cloud9 for this workshop, head to the Cloud9 AWS console, select your environment, and click Delete.

Forem: Mark Ramrattan

Running a Validator Node on The Root Network (TRN) with AWS

From Palm 🌴 Network to Futureverse 🌌

What is The Root Network? 🌐

👉 Check out The Root Network

Types of Nodes 🖥️

Lessons Learned from Running a Validator Node 🛠️

Example: Updating a Root Network Node

Final Thoughts 🙌

TL;DR ⚡

DC Bat Cowls with Amplify Gen 2 Fullstack Typescript

What I Built

Demo

Journey

The Matrix Fight Club built with AWS Amplify

Demo Video & Walkthrough

The Matrix Fight Club (Web Link)

Problem to Solve

Background

Matrix Avatar Example

Learnings from the Past

Idea to Reality

Frameworks

LET'S GO! BUILD!

Blank Canvas...

First Prototype

User Input

Skeleton is Ready

Battle Calculations

Testing Ideas

D21 🎲 Integration and Updated Design

Mobile and User Guidance

AWS Amplify Enabled Speed of Development

Custom Domain Name with SSL Certification

Test Version of MFC + Password Protected

Summary

Mobile Optimisation

High Resolution Matrix Avatars

Battle Calculations

ADHD Users

Future Plans

A beginners guide to AWS Amplify Studio

Documentation Resources

8 New Features of Amplify Studio

Ali Spittel for AWS ・ Dec 6 '21

Tutorial Resources

Build a Vacation Rental Site with Amplify Studio

Ali Spittel for AWS ・ Dec 14 '21

Let's GO! & Build a Solution (MVP)

Build a serverless, real-time application with modern APIs: The GraphQL Real-time Race

Mark Ramrattan for AWS Community Builders ・ Jun 29 '21

Build a serverless, real-time application with modern APIs: The GraphQL Real-time Race

Virtual Workshop Link: Click Here

OLD Workshop Link: Click Here

Video for each episode

All 5 Episodes in a Playlist

Slide Deck for Each Episode & Lab Files

Episode 1

Episode 2

Episode 3

Episode 4

Episode 5

Live real time race with AWS AppSync

Summary

Clean Up