Introduction 😊

Hi, I am AK Deepankar, First-year Data Science Student. I am always excited about learning and building new things. This Hackathon was a Great Opportunity for Me to Know About AWS Amplify and its Services.

🧑‍💻 Project Overview

MySpace is a photo-sharing and detection app, whenever you Upload an Image it automatically detects what's the Image about backstage using recognitions and stores the data in a gallery Section.

✨ AWS Services Used

• AWS Amplify → App Backend

• AWS Cognito → Authentication of Users

• AWS Hosting → Deploying App

• AWS App Sync → GraphQL API Service

• AWS S3 → For Storing Images

• AWS DynamoDB → NoSQL Database For Storing Info.

• Amazon Rekognition → Image Recognition using ML Predictions

⚒️ TechStack

• React JS → FrontEnd Framework

• Tailwind CSS → Used for Styling

• Next UI, Chakra UI → React UI Frameworks

🚀 Try the App 🤖

Link : MySpace

USERNAME : akdeepak PASSWORD: akdeepak123

🏎️ Getting Started 🎌

Prerequisite Check ✅:

• Node.Js, Npm, git, AWS Account, VS Code Editor

• Now, time to create a React Project.

  

• Installing and Configuring the Amplify CLI in the React project using the AWS Amplify Documentation.

• To get things workout go to IAM (Identity and Access Management) in AWS Create policy and allow required actions, then create a Group and the new policy that you created, and at last create a user and add the new Group that you created.

  $amplify init

  $amplify configure

Adding Authentication to App 🔐:

• Amazon cognito handles all the Authentication and Identity, so we can focus on building our App. This is one of the Feature I liked the most.

  $amplify add auth > Default Configuration > Username

  $amplify push - Local Backend to Cloud

  

  Now, Just by importing the required library and Wrapping WithAuthenticator in the App return code, It Works. 😁🔐👍

🏊 Swimming Around 🥽

Setting Up S3 🫙:

$amplify add storage > Content (Images, Videos...) >> Auth Users Only > CRUD ✅ > Lambda Trigger ? Nope. > Successfully Added !!

$amplify push - To push our changes to cloud

Setting Up AppSync API 🚋:

$amplify add api > GraphQL >> Amazon Cognito Pool (Default Authorization type for the API ) > Advanced Setting? Nope > Annottated GraphQL Schema ? Nope > Guided Schema Creation ? Yes > Single Objects with Field Project > Edit Scheme Now ? Yes

So, I am very much new to these things and learned Various things. Here are some.

After saving, $amplify push and it will save our changes to cloud.

Now, Time for Some Frontend Code to Upload File to S3 Bucket storage and Display it in the Screen Itself.

React is all about Component, so we create Component as UploadImage.js to perform the Uploading Operations, where i took a file input and stored it in database.

The Output. All Cleared ✅

🏊 Diving Deeper 🤿

Time to add some Magic ✨ to our Application.

🤖 Amazon Rekognition is a deep-learning-based Image recognition and video Analysis Service. We can perform several outputs such as Labeling an Image If the image is Unsafe, Text in Images, Pathing, Face Search, Face Detection and Analysis, Celebrity recognition as well as Real-time video analysis.

My project be using Labels detections from Images, so we are configuring it accordingly.

$ amplify add prediction > Identify > Identify Labels >> Default Configuration > Auth Users Only. $amplify push

So, after Studying the Documentation and Implementing it in React project. Here is the Output I got. I also added a Delete button to Delete the Image.

Now, Time to Make our React app beautiful by adding UI frameworks. I used Chakra UI to separate two sections of Upload and Gallery into Two Tabs to Access and Next UI for the rest of the Customization.

The Final Output looks like this.

Here we can Upload Image and wait till the Image load in the Side Card.

In My Gallery section, we can find the Uploaded Image with the Recognized Texts.

Thank you. Looking forward to work on More Amplify related Projects.