Sheeraz Shaikh
Bite Sized Learnings for Dev Community

Bite Sized Learnings for Dev Community

My First AWS Amplify Project

Learning experience of Amplify Studio

Sheeraz Shaikh's photo
Sheeraz Shaikh
·Oct 1, 2022·

2 min read

My Story

Few days ago, I stumbled upon an announcement of AWS Amplify Hackathon organized by Hashnode. I have heard about Amplify several times but didn't know the purpose of its existent. After doing research and going through high level tutorials, I made up my mind to learn this tool by implementing something.

Project Details

I came across of a project idea which was in my mind for several days. My idea was to build up a platform for my community who are supporting their families through home cooking. I realized, Amplify can be great tool to develop this idea faster.

I have seen people post their daily kitchen menu on their WhatsApp group. When someone needs to order, he needs go through the individual WhatsApp group of chef and then place an order. I was interested to build up a platform where a customer can look into their daily menu and order directly from this platform which will send a WhatsApp message to chef.

Implementing through Amplify Studio

After going through Amplify tutorials, It seems to be a simple workflow which we need to be follow to implement the application. I followed these steps in order to create an app within few hours:

  1. Create an app in Amplify
  2. Launch Amplify Studio in Backend environments
  3. Go to UI Library and clone figma file
  4. There are several built in components in figma file, I chose HeroLayout and card component to develop my basic design
  5. Initialized React Application in my local machine and pull amplify app.
  6. Implemented schema in Data Modeling
  7. Filled up some test data in Content
  8. In UI Library, bind data with the components and their properties.
  9. Created a collection out of Card Component
  10. In React Application, rendered Collection of Card Component and Hero Layout.
  11. Tested the application on localhost
  12. Deployed application on prod

Application

Here is the basic application which I built using AWS Amplify.

prod.d1dfrg9t54tuvg.amplifyapp.com

This is very basic application but I intend to extend it and release it with all the features which I have in my mind.

Conclusion

Amplify Studio is very easy to use as you can develop a MVC without writing much code. But sometimes, it takes a lot of time to deploy after making some changes in the studio.

#AWSAmplify #AWSAmplifyHackathon

 
Share this