{"id":3349,"date":"2026-04-11T23:14:00","date_gmt":"2026-04-11T15:14:00","guid":{"rendered":"https:\/\/ichwanchandra.com\/blog\/?p=3349"},"modified":"2026-10-17T01:58:13","modified_gmt":"2026-10-16T17:58:13","slug":"aws-solutions-architect-project-performance-efficiency-pillar-part-5","status":"publish","type":"post","link":"https:\/\/ichwanchandra.com\/blog\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\/","title":{"rendered":"AWS Solutions Architect Project (Performance Efficiency Pillar) \u2013 Serverless Application \u2013 Part 5"},"content":{"rendered":"\n<p>In this part we will create the frontend part of the application by using a react-based app deployed to AWS Amplify. Starting by checking out the code from github, examine the code, and we will continue to upload and configure it on AWS Amplify.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Setup Code Repository<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Login to our Github account and visit to <a href=\"https:\/\/github.com\/techwithlucy\/ztc-projects\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/isuchan\/aws-sa-projects<\/a><\/li>\n\n\n\n<li><strong>Fork<\/strong> the repository by clicking <strong>Fork<\/strong>, then click <strong>Create fork<\/strong> to copy the whole repo to our own GitHub account <\/li>\n\n\n\n<li>Open terminal (or Git Bash on Windows) and clone <strong>the forked repository<\/strong> to local machine by replacing <code>&lt;our-github-username&gt;<\/code> with our GitHub username:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>git clone https:\/\/github.com\/&lt;our-github-username&gt;\/aws-sa-projects.git<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Copy the project-4 directory into a new folder called <strong>product-inventory-frontend<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>cp -R \/aws-sa-projects\/project-4 product-inventory-frontend<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Still using the terminal, go to the <strong>product-inventory-frontend<\/strong> and initialize a fresh git repository<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>cd product-inventory-frontend\ngit init\ngit branch -M master<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>From Github, create <strong>New Repository<\/strong> and name it <strong>product-inventory-frontend<\/strong>. Keep it empty by not creating either README or .gitignore file<\/li>\n\n\n\n<li>Link up our local directory to the new repository by replacing &lt;our-username&gt;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>git remote add origin https:\/\/github.com\/&lt;our-github-username&gt;\/product-inventory-frontend.git<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add, commit, and push the code<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>git add .\ngit commit -m \"Initial commit\"\ngit push -u origin master<\/code><\/pre>\n\n\n\n<p>Then on github repository, we should have something like the following<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"914\" height=\"396\" src=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-37.png\" alt=\"\" class=\"wp-image-3361\" srcset=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-37.png 914w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-37-300x130.png 300w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-37-768x333.png 768w\" sizes=\"auto, (max-width: 914px) 100vw, 914px\" \/><\/figure>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Host Frontend Web App to AWS Amplify<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigate to AWS Amplify console<\/li>\n\n\n\n<li>Click <strong>Deploy an app<\/strong><\/li>\n\n\n\n<li>Select Github as the git provider<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1057\" height=\"610\" src=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-38.png\" alt=\"\" class=\"wp-image-3365\" srcset=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-38.png 1057w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-38-300x173.png 300w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-38-1024x591.png 1024w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-38-768x443.png 768w\" sizes=\"auto, (max-width: 1057px) 100vw, 1057px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To proceed further, we need to authorize AWS amplify to access our Github repository<\/li>\n\n\n\n<li>In this case, we just allow a single repository access <strong>(product-inventory-frontend)<\/strong> and select branch name: <strong>master<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"599\" height=\"891\" src=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-39.png\" alt=\"\" class=\"wp-image-3366\" srcset=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-39.png 599w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-39-202x300.png 202w\" sizes=\"auto, (max-width: 599px) 100vw, 599px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1067\" height=\"796\" src=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-40.png\" alt=\"\" class=\"wp-image-3367\" srcset=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-40.png 1067w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-40-300x224.png 300w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-40-1024x764.png 1024w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-40-768x573.png 768w\" sizes=\"auto, (max-width: 1067px) 100vw, 1067px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>AWS Amplify will automatically detect the build settings, so let&#8217;s keep it as it is<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1067\" height=\"796\" src=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-41.png\" alt=\"\" class=\"wp-image-3368\" srcset=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-41.png 1067w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-41-300x224.png 300w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-41-1024x764.png 1024w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-41-768x573.png 768w\" sizes=\"auto, (max-width: 1067px) 100vw, 1067px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Next, we need to adjust environment variables. Click <strong>Advanced settings<\/strong>, then click <strong>Add new<\/strong> under Environment variables<\/li>\n\n\n\n<li>Add the following key and value pair\n<ul class=\"wp-block-list\">\n<li><strong>Key:<\/strong> VITE_API_URL<\/li>\n\n\n\n<li><strong>Value:<\/strong> https:\/\/&lt;your-api-id.execute-api.region.amazonaws.com&gt; (without trailing slash)\n<ul class=\"wp-block-list\">\n<li>We can get this value from <strong>AWS API Gateway<\/strong> &#8211;&gt; <strong>APIs<\/strong> &#8211;&gt; <strong>Select our API<\/strong> &#8211;&gt; select <strong>Stages<\/strong> from the side menu. <\/li>\n\n\n\n<li>Click <strong>$default<\/strong> as the stage, and then copy the <strong>Invoke URL<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1067\" height=\"1658\" src=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-42.png\" alt=\"\" class=\"wp-image-3369\" srcset=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-42.png 1067w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-42-193x300.png 193w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-42-659x1024.png 659w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-42-768x1193.png 768w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-42-988x1536.png 988w\" sizes=\"auto, (max-width: 1067px) 100vw, 1067px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Next, review the setting and click <strong>Save and Deploy<\/strong> and wait for the deployment to finish<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1067\" height=\"993\" src=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-43.png\" alt=\"\" class=\"wp-image-3370\" srcset=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-43.png 1067w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-43-300x279.png 300w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-43-1024x953.png 1024w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-43-768x715.png 768w\" sizes=\"auto, (max-width: 1067px) 100vw, 1067px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1067\" height=\"801\" src=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-45.png\" alt=\"\" class=\"wp-image-3372\" srcset=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-45.png 1067w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-45-300x225.png 300w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-45-1024x769.png 1024w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-45-768x577.png 768w\" sizes=\"auto, (max-width: 1067px) 100vw, 1067px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Access Application &amp; Configure CORS<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Access the deployed application by visiting the domain<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1067\" height=\"508\" src=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-46.png\" alt=\"\" class=\"wp-image-3373\" srcset=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-46.png 1067w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-46-300x143.png 300w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-46-1024x488.png 1024w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-46-768x366.png 768w\" sizes=\"auto, (max-width: 1067px) 100vw, 1067px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go back to the API Gateway Console, and select <strong>ProductInventory<\/strong> API<\/li>\n\n\n\n<li>From side menu, under <strong>Develop<\/strong>, click <strong>CORS<\/strong>, click <strong>Configure<\/strong><\/li>\n\n\n\n<li>As we can see above, we got an error above due to CORS limitation. Let&#8217;s update the CORS settings by including our Amplify app URL<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>Access-Control-Allow-Origin:\n**&lt;https:\/\/main.d1234567890.amplifyapp.com&gt; (Replace this with our Amplify app URL without the trailing slash)**\n\nAccess-Control-Allow-Headers:\n**Content-Type, Authorization**\n\nAccess-Control-Allow-Methods:\n**GET, POST, PUT, DELETE**\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1067\" height=\"770\" src=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-49.png\" alt=\"\" class=\"wp-image-3378\" srcset=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-49.png 1067w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-49-300x216.png 300w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-49-1024x739.png 1024w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-49-768x554.png 768w\" sizes=\"auto, (max-width: 1067px) 100vw, 1067px\" \/><\/figure>\n\n\n\n<p>And then click <strong>Save<\/strong>. <\/p>\n\n\n\n<p><strong>Note:<\/strong> since we re using $default stage to deploy this front-end application, AWS Amplify will automatically deploy it<\/p>\n\n\n\n<p>Now refresh the browser and the application should be running like below<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1067\" height=\"770\" src=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-50.png\" alt=\"\" class=\"wp-image-3381\" srcset=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-50.png 1067w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-50-300x216.png 300w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-50-1024x739.png 1024w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-50-768x554.png 768w\" sizes=\"auto, (max-width: 1067px) 100vw, 1067px\" \/><\/figure>\n\n\n\n<p>Let&#8217;s test the CRUD functionality by adding new product, then click <strong>Add Product<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1067\" height=\"770\" src=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-51.png\" alt=\"\" class=\"wp-image-3384\" srcset=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-51.png 1067w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-51-300x216.png 300w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-51-1024x739.png 1024w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-51-768x554.png 768w\" sizes=\"auto, (max-width: 1067px) 100vw, 1067px\" \/><\/figure>\n\n\n\n<p>New product will be added to the list<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1067\" height=\"770\" src=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-52.png\" alt=\"\" class=\"wp-image-3385\" srcset=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-52.png 1067w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-52-300x216.png 300w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-52-1024x739.png 1024w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-52-768x554.png 768w\" sizes=\"auto, (max-width: 1067px) 100vw, 1067px\" \/><\/figure>\n\n\n\n<p>We also can click <strong>Edit<\/strong> on one of the products and change any of its attribute to update respective item before click <strong>Save<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1067\" height=\"770\" src=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-53.png\" alt=\"\" class=\"wp-image-3387\" srcset=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-53.png 1067w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-53-300x216.png 300w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-53-1024x739.png 1024w, https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/04\/image-53-768x554.png 768w\" sizes=\"auto, (max-width: 1067px) 100vw, 1067px\" \/><\/figure>\n\n\n\n<p>Using the developer tools on our browser, we can continue to check all the CRUD functionalities and ensure among all POST, DELETE, and PUT requests having no CORS errors.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Project Conclusion<\/h2>\n\n\n\n<p>In this project, we have been demonstrating a modern server-less architecture patterns by combining the Lambda function and API gateway to let the front-end application call it via REST API to perform commonly use CRUD functionalities. This reflects real world implementation where serverless is being used as part of cost-effective elastic scaling.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Resource Cleanup<\/h2>\n\n\n\n<p>To avoid ongoing AWS charges, remember to delete what we created:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Ampify App<\/strong>\n<ul class=\"wp-block-list\">\n<li>Go to <strong>AWS Amplify App console<\/strong>, click App, click <strong>App Settings, <\/strong>click<strong> General Settings<\/strong>, click <strong>Delete App<\/strong><br><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>API Gateway<\/strong>\n<ul class=\"wp-block-list\">\n<li>Go to <strong>API Gateway console<\/strong>, select StoreInventory API, click <strong>Actions<\/strong>, click <strong>Delete<\/strong><br><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Lambda Functions<\/strong>\n<ul class=\"wp-block-list\">\n<li>Go to <strong>Lambda console<\/strong>, delete all previously created functions and the <strong>Lambda Layer<\/strong><\/li>\n\n\n\n<li>Clean up log groups in <strong>CloudWatch Logs<\/strong><br><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>DynamoDB Table<\/strong>\n<ul class=\"wp-block-list\">\n<li>Go to <strong>DynamoDB console<\/strong>, select <strong>ProductInventory<\/strong> table, select <strong>Actions<\/strong> and delete table<br><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>IAM Role<\/strong>\n<ul class=\"wp-block-list\">\n<li>Go to <strong>IAM console<\/strong>, select <strong>Roles<\/strong>, select <strong>ProductInventoryRole<\/strong> and delete it<br><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>CloudWatch Logs<\/strong>\n<ul class=\"wp-block-list\">\n<li>Go to <strong>CloudWatch<\/strong>, select <strong>Log groups<\/strong><\/li>\n\n\n\n<li>Delete Lambda function log groups with <strong><em>\/aws\/lambda\/product<\/em><\/strong> patterns such as <strong><em>\/aws\/lambda\/addProduct, \/aws\/lambda\/deleteProduct, \/aws\/lambda\/getProduct<\/em><\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>In this part we will create the frontend part of the application by using a react-based app deployed to AWS Amplify. Starting by checking out the code from github, examine the code, and we will continue to upload and configure it on AWS Amplify.<\/p>\n","protected":false},"author":1,"featured_media":3414,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,20,85,75,8],"tags":[],"class_list":["post-3349","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aws","category-backend","category-projects","category-system-design","category-technology"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>AWS Solutions Architect Project (Performance Efficiency Pillar) \u2013 Serverless Application \u2013 Part 5 - Ichwan Chandra<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ichwanchandra.com\/blog\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AWS Solutions Architect Project (Performance Efficiency Pillar) \u2013 Serverless Application \u2013 Part 5 - Ichwan Chandra\" \/>\n<meta property=\"og:description\" content=\"In this part we will create the frontend part of the application by using a react-based app deployed to AWS Amplify. Starting by checking out the code from github, examine the code, and we will continue to upload and configure it on AWS Amplify.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ichwanchandra.com\/blog\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\/\" \/>\n<meta property=\"og:site_name\" content=\"Ichwan Chandra\" \/>\n<meta property=\"article:published_time\" content=\"2026-04-11T15:14:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-16T17:58:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/10\/aws-solutions-architect-project-performance-efficiency-part-5.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1376\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ichwan Chandra\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ichwan Chandra\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\\\/\"},\"author\":{\"name\":\"Ichwan Chandra\",\"@id\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/#\\\/schema\\\/person\\\/2fa69a7a1008a3369584752194b063d5\"},\"headline\":\"AWS Solutions Architect Project (Performance Efficiency Pillar) \u2013 Serverless Application \u2013 Part 5\",\"datePublished\":\"2026-04-11T15:14:00+00:00\",\"dateModified\":\"2026-10-16T17:58:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\\\/\"},\"wordCount\":694,\"image\":{\"@id\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/aws-solutions-architect-project-performance-efficiency-part-5.jpeg\",\"articleSection\":[\"AWS\",\"Backend\",\"Projects\",\"System Design\",\"Technology\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\\\/\",\"url\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\\\/\",\"name\":\"AWS Solutions Architect Project (Performance Efficiency Pillar) \u2013 Serverless Application \u2013 Part 5 - Ichwan Chandra\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/aws-solutions-architect-project-performance-efficiency-part-5.jpeg\",\"datePublished\":\"2026-04-11T15:14:00+00:00\",\"dateModified\":\"2026-10-16T17:58:13+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/#\\\/schema\\\/person\\\/2fa69a7a1008a3369584752194b063d5\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/aws-solutions-architect-project-performance-efficiency-part-5.jpeg\",\"contentUrl\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/aws-solutions-architect-project-performance-efficiency-part-5.jpeg\",\"width\":1376,\"height\":768},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"AWS Solutions Architect Project (Performance Efficiency Pillar) \u2013 Serverless Application \u2013 Part 5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/\",\"name\":\"Ichwan Chandra\",\"description\":\"In a lifelong learning mode\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/#\\\/schema\\\/person\\\/2fa69a7a1008a3369584752194b063d5\",\"name\":\"Ichwan Chandra\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8d8d64c76e361108ee058442df7c49c539eefd1d1e5a3e8dbcc9d70289e0bbf2?s=96&d=retro&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8d8d64c76e361108ee058442df7c49c539eefd1d1e5a3e8dbcc9d70289e0bbf2?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8d8d64c76e361108ee058442df7c49c539eefd1d1e5a3e8dbcc9d70289e0bbf2?s=96&d=retro&r=g\",\"caption\":\"Ichwan Chandra\"},\"sameAs\":[\"https:\\\/\\\/ichwanchandra.com\\\/blog\"],\"url\":\"https:\\\/\\\/ichwanchandra.com\\\/blog\\\/author\\\/isuchan193\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AWS Solutions Architect Project (Performance Efficiency Pillar) \u2013 Serverless Application \u2013 Part 5 - Ichwan Chandra","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ichwanchandra.com\/blog\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\/","og_locale":"en_US","og_type":"article","og_title":"AWS Solutions Architect Project (Performance Efficiency Pillar) \u2013 Serverless Application \u2013 Part 5 - Ichwan Chandra","og_description":"In this part we will create the frontend part of the application by using a react-based app deployed to AWS Amplify. Starting by checking out the code from github, examine the code, and we will continue to upload and configure it on AWS Amplify.","og_url":"https:\/\/ichwanchandra.com\/blog\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\/","og_site_name":"Ichwan Chandra","article_published_time":"2026-04-11T15:14:00+00:00","article_modified_time":"2026-10-16T17:58:13+00:00","og_image":[{"width":1376,"height":768,"url":"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/10\/aws-solutions-architect-project-performance-efficiency-part-5.jpeg","type":"image\/jpeg"}],"author":"Ichwan Chandra","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Ichwan Chandra","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ichwanchandra.com\/blog\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\/#article","isPartOf":{"@id":"https:\/\/ichwanchandra.com\/blog\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\/"},"author":{"name":"Ichwan Chandra","@id":"https:\/\/ichwanchandra.com\/blog\/#\/schema\/person\/2fa69a7a1008a3369584752194b063d5"},"headline":"AWS Solutions Architect Project (Performance Efficiency Pillar) \u2013 Serverless Application \u2013 Part 5","datePublished":"2026-04-11T15:14:00+00:00","dateModified":"2026-10-16T17:58:13+00:00","mainEntityOfPage":{"@id":"https:\/\/ichwanchandra.com\/blog\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\/"},"wordCount":694,"image":{"@id":"https:\/\/ichwanchandra.com\/blog\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\/#primaryimage"},"thumbnailUrl":"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/10\/aws-solutions-architect-project-performance-efficiency-part-5.jpeg","articleSection":["AWS","Backend","Projects","System Design","Technology"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/ichwanchandra.com\/blog\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\/","url":"https:\/\/ichwanchandra.com\/blog\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\/","name":"AWS Solutions Architect Project (Performance Efficiency Pillar) \u2013 Serverless Application \u2013 Part 5 - Ichwan Chandra","isPartOf":{"@id":"https:\/\/ichwanchandra.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ichwanchandra.com\/blog\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\/#primaryimage"},"image":{"@id":"https:\/\/ichwanchandra.com\/blog\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\/#primaryimage"},"thumbnailUrl":"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/10\/aws-solutions-architect-project-performance-efficiency-part-5.jpeg","datePublished":"2026-04-11T15:14:00+00:00","dateModified":"2026-10-16T17:58:13+00:00","author":{"@id":"https:\/\/ichwanchandra.com\/blog\/#\/schema\/person\/2fa69a7a1008a3369584752194b063d5"},"breadcrumb":{"@id":"https:\/\/ichwanchandra.com\/blog\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ichwanchandra.com\/blog\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ichwanchandra.com\/blog\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\/#primaryimage","url":"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/10\/aws-solutions-architect-project-performance-efficiency-part-5.jpeg","contentUrl":"https:\/\/ichwanchandra.com\/blog\/wp-content\/uploads\/2026\/10\/aws-solutions-architect-project-performance-efficiency-part-5.jpeg","width":1376,"height":768},{"@type":"BreadcrumbList","@id":"https:\/\/ichwanchandra.com\/blog\/aws-solutions-architect-project-performance-efficiency-pillar-part-5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ichwanchandra.com\/blog\/"},{"@type":"ListItem","position":2,"name":"AWS Solutions Architect Project (Performance Efficiency Pillar) \u2013 Serverless Application \u2013 Part 5"}]},{"@type":"WebSite","@id":"https:\/\/ichwanchandra.com\/blog\/#website","url":"https:\/\/ichwanchandra.com\/blog\/","name":"Ichwan Chandra","description":"In a lifelong learning mode","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ichwanchandra.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/ichwanchandra.com\/blog\/#\/schema\/person\/2fa69a7a1008a3369584752194b063d5","name":"Ichwan Chandra","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/8d8d64c76e361108ee058442df7c49c539eefd1d1e5a3e8dbcc9d70289e0bbf2?s=96&d=retro&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8d8d64c76e361108ee058442df7c49c539eefd1d1e5a3e8dbcc9d70289e0bbf2?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8d8d64c76e361108ee058442df7c49c539eefd1d1e5a3e8dbcc9d70289e0bbf2?s=96&d=retro&r=g","caption":"Ichwan Chandra"},"sameAs":["https:\/\/ichwanchandra.com\/blog"],"url":"https:\/\/ichwanchandra.com\/blog\/author\/isuchan193\/"}]}},"_links":{"self":[{"href":"https:\/\/ichwanchandra.com\/blog\/wp-json\/wp\/v2\/posts\/3349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ichwanchandra.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ichwanchandra.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ichwanchandra.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ichwanchandra.com\/blog\/wp-json\/wp\/v2\/comments?post=3349"}],"version-history":[{"count":25,"href":"https:\/\/ichwanchandra.com\/blog\/wp-json\/wp\/v2\/posts\/3349\/revisions"}],"predecessor-version":[{"id":3417,"href":"https:\/\/ichwanchandra.com\/blog\/wp-json\/wp\/v2\/posts\/3349\/revisions\/3417"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ichwanchandra.com\/blog\/wp-json\/wp\/v2\/media\/3414"}],"wp:attachment":[{"href":"https:\/\/ichwanchandra.com\/blog\/wp-json\/wp\/v2\/media?parent=3349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ichwanchandra.com\/blog\/wp-json\/wp\/v2\/categories?post=3349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ichwanchandra.com\/blog\/wp-json\/wp\/v2\/tags?post=3349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}