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!!
Top comments (0)