Mark Ramrattan 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/
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
