DEV Community: Nde-Dilan

Deploying an Auto Watermarking React Application to AWS Amplify

Nde-Dilan — Tue, 23 Dec 2025 15:21:47 +0000

Have you ever assisted to a tech event in Cameroon? to the back office of it? I have, and let me tell you most at time, some task like auto watermarking the pictures before publishing them to social media is still done manually, whereas technology can automate that particular process!

What if we had a simple app that could automate that process?
That's exactly what we will be trying to solve today with a simple React app that does

No Sign Up/login
User creates an event, which will just help him group images logically
Upload the watermark, upload the set of pictures to auto watermark,
Choose the position, alignment, apply watermark, download
And that's it

Note that, the app is design to be as simple as possible, so no backend, we will be using the browser's power, no API calls and no data collection (yes we are kind of tired of it :(, no pricing), just a simple and efficient tool everyone can use on his/her laptop, phone or tablet.

So what does the app looks like?

As you can se, the UI is really simple, and we have about 4 sections in total, we will go through each one of them of course.
Let's get started:

1.Correspond to the area where you can create and see you events, basically they are just kind of tag of folders if you will

Here is the section to upload the watermark , and as soon as you upload it, you will get positioning options and a preview with the first image from 3 , to help you adjust it.
In 3 now you can upload all your images (max to 100) per turn
In zone 4, You will get a preview of the watermark being applied to your images.
Done!

Now let's look closely at the architecture of the system!

After now understanding the system, we are going to host it on AWS Amplify.
To follow along you can clone the repository at snap-seal.github (if you leave a star, I will be more than happy :)); OR you can use any React Application you already developed!
With that aside, we can get going, so Login to your AWS Console, and head over to the search bar.

It will be the first option you see, so click on it and you should be redirected to the following page:
It's beautiful isn't ?, well they really amplified it, you can read around and even watch the quick videos underneath the 2 buttons, once you are done and ready to move on, just click on "Deploy an App"!

Now we are presented with a 4-steps form, but don't worry it will be pretty quick to fill. The first question we are asked is to choose a provider. What's it? well in simple terms that's where your code or app will be coming from, in our case we have a GitHub repository, so our provider will be GitHub.

That's it for the first step, now just click on Next!
A pop up or a new tab should open, and you should see a request similar to the following, read and just click on "Authorize AWS Amplify", that will give read only access to your repositories to AWS Amplify.

In the next screen, choose your account, and then click on "Install & Authorize AWS Amplify (us-west-2)".

After Installing the GitHub application, the pop up should close itself and you should be back to AWS Amplify step 2 : Choosing a repository and a branch to deploy from!

Just use the dropdown to select both your repository to deploy and the branch to use, after that click on next!
The default settings will work for any ReactJS application, except rare cases, so just click on "Next";

Now we just have to wait some few minutes for the magic to take place :), your screen should be same like mine with that amplified loading animation!

After some few minutes, depending on your internet connection, you should now have access to the overview page with some details about your deployment.

Right at the bottom left, You got a url ready to be shared, mine is https://main.d1yxskke924sm8.amplifyapp.com/, you can add custom domain (if you got one) or leave it as it's.
And that's it, you just deployed a React application to AWS Amplify!!

Deploying a Machine Learning Model to AWS SageMaker Complete Guide - PART 01

Nde-Dilan — Thu, 18 Dec 2025 22:39:01 +0000

So today we will see how to deploy a custom made machine learning model or any other model you find on Hugging Face directly on the compute powerhouse that's AWS using severall of their services, mainly AWS Sagemaker, API Gateway, Lambda Functions.

AWS Sagemaker, like the name suggest it'is the "sage maker", i.e the one creating sages, in our case the one creating AI.
API Gateway, a way for our API to get out there :), it will be mainly used for stuff like taking our deploying model out there for others devs to play with via API calls
Lambda function, will serve as the little policeman deciding which road each request should take, think of it as a control point where incoming calls will be filter out and redirected or formatted to what the AI model expect. The beautifull part is that it's serveless so we won't need to spin up our own server for it.
With that little explanation as avant gout let's get into the real stuff.
Question: Will it be costly ??
Yes, a bit, but since this is for learning purposes just prepare maximum 5$ if you leave the setup in AWS for more than 6hours.
PS: I strongly suggest you setup billing alerts to something like 5$, like that you will be alerted when things start gettintg really dangerous .

The first service we are going to use is AWS SageMaker AI, which is the "AI crafter*"* we have been talking about, so just search "AWS SageMaker " on the top left search bar, your screen should be similar to the following :

On the homepage of the service , we can see several options from the left sidebar, the one that interest us is "Notebooks", click on it and let's create our first notebook in the cloud .

What's a Notebook in AWS SageMaker?
An Amazon SageMaker notebook instance is a machine learning (ML) compute instance running the Jupyter Notebook application. more on it here .
Now click on "create Notebook instance" button, and prepare yourself to fill some forms...

Don't worry, it will be short,so give it a name, in our case I am going to call it "translation-model-01", next the instance type, which refers to the amount of compute power you will need (can be changed later), note that the more powerful an instance is, the more you will be billed per hour, so be cautious not to choose something too high, always refer to the pricing page.

In the next section of the form, we are asked to give details about permissions and encryption, for that we have the possibility to either choose a predefined or existing role, or to create one.
A role is an IAM identity that has permissions to perform actions with AWS services, here think of identity as a person, an organization.
But what's the point of using Roles, then assigning capabilities when we can just go ahead and create everything and manage it with our account? Me too I am wondering.. was..., yeah still a little, but long story short we want to give as less privilege as possible so that even in the event that an attacker succeed in exploiting a vulnerability through let's say SageMaker, he won't get access to your full account, rather to a role that can only perform carefully selected activities.

The default configurations for the role is ok for now, but you should really think about consequences that what you do or choose might have in the futur, like giving full access to all s3 buckets in your account might sometimes be a bad move.

Then click on "create role" some minutes after that, you will see the green successful message and the role will be auto selected.Leave all the rest of details as they are and click on "Create notebook"

Now that the notebook has been created (5-10 mins), we can move on to opening it, right away you will see 2 options : Jupyter & JupyterLab. They are both programs which allows a programmer to interactively write code, run it, keep their data and variables intact, then rewrite, re-run, and refine their code on-the-fly*, it's called a* Read-Eval-Print-Loop (REPL).

At the top left you should be able to see the different available menu options, again it's just like in VSCode, for now let's just create new notebook via the "File>New>Notebook" menu option, next you will be prompt to select a kernel for the notebook, and the default one will be perfectly fine for our use case.

For our python or Markdown(.md files) code to be executed, we need a kernel, you can think of it, like the interpreter you will download if you were working locally, the difference can be that in this case it comes ready with some pre-configurations already applied out of the box.

JupyterLab Main editor screen, the JupyterLab is kind of an IDE or Integrated Development Environment in the sense that you get access to not just the editor but file explorer terminal and a lot more.
In the provided screenshot we created a notebook file, for now "Untitled.ipynb" (We can rename it later & ipynb for iPython notebooks), and in it we are going to write the same code we would write in google collab.
For now a simple python code is writen and you can run it with Shift + Enter, you should see the result in the next cell, in this case "Hello World!" is printed.
That's it for today!