Posts

Bridging the Gap: A Scalable Workflow for Figma and React with AWS Amplify

Image
In modern front-end development, the handoff from design to development is often a source of friction. Designers meticulously craft pixel-perfect layouts in Figma, and developers are tasked with a manual, error-prone translation of that design into React components. What if the design was the component? What if we could create a system that was not only fast to build but also incredibly resilient to design changes? In this post, I'm breaking down the scalable, UI-first workflow we're using to connect Figma directly to our live React application using AWS Amplify. The 4-Step Workflow: From Figma to React Our process turns a static design into a fully functional, data-driven component in four steps. Step 1: Design Components (in Figma) This all starts with the designer. They don't just draw pictures; they build reusable components with variants (e.g., a button with active and enabled states) and organize them in a library. Step 2: Sync to Amplify Studio The designer us...
Post a Comment
Read more

AWS Best Practice: Securely Connecting EC2 to RDS with Security Group Referencing

Image
Hello everyone! When connecting an EC2 application to an RDS database in AWS, using IP addresses or setting "Public Access" to 'Yes' is highly insecure. The real, professional-grade solution is to use Security Group Referencing inside a Custom VPC. In this article, I'll walk you through the exact, secure architecture we just built. Our Architecture: The Foundation (VPC): A custom private network named my-first-vpc . The Application (EC2): An EC2 instance launched with its own Security Group, my-server-sg , inside my-first-vpc . The Database (RDS): An RDS instance launched with its own separate Security Group, rds-sg , also inside my-first-vpc . The Secure Connection: We tell rds-sg , "You are only allowed to accept traffic that comes from my-server-sg ." Step 1: Launch the EC2 Instance & its Security Group First, let's set up our application server. Go to the EC2 service in the AWS Console - > "Launch instances". In the Netw...
Post a Comment
Read more

How to Create an AWS VPC From Scratch (Step-by-Step): A Guide to Public and Private Subnets

Image
Hello! If you're starting your journey with AWS, you've definitely heard the term "VPC." For many beginners, it can seem like a complex and intimidating topic. But in reality, a VPC (Virtual Private Cloud) is just the secure "foundation" for almost everything you'll ever build on AWS. In this article, I'll walk you through what a VPC is and how to build a secure one from scratch, step-by-step, using the AWS Console. What is a VPC? In the simplest terms, think of a VPC as your very own private, isolated piece of land in the AWS cloud. It's your personal network that no one else can access, and you have complete control over it. Why Do We Need Public and Private Subnets? Okay, so you have your piece of land (the VPC). Now, imagine you put your Application Server and your Database (like a secure safe) right in the middle of this open land. If you build a "main gate" (an Internet Gateway) and leave it open for users to come in, that means...
Post a Comment
Read more