Building and Deploying a Product Listing Frontend App with AWS Amplify

Introduction

Modern software delivery demands speed, reliability, and scalability. As businesses continue to shift toward cloud-native architectures, the ability to rapidly build and deploy frontend applications has become a critical competitive advantage.

In this blog post, I walk through the process of building a Product Listing Frontend Application using React and deploying it to production using AWS Amplify Hosting, a managed service that eliminates infrastructure complexity and enables continuous delivery directly from a GitHub repository.

What is AWS Amplify?

AWS Amplify is a fully managed platform from Amazon Web Services designed to help frontend and mobile developers build, deploy, and host web applications at scale — without managing servers or infrastructure.

Amplify Hosting provides a Git-based CI/CD workflow, meaning that every code change pushed to a connected GitHub repository automatically triggers a new build and deployment. This makes it an ideal solution for teams that need fast, reliable, and repeatable deployments.

Core capabilities of AWS Amplify Hosting include:

• Automatic build and deployment on every git push
• Free SSL/TLS certificate provisioning (HTTPS out of the box)
• Global Content Delivery Network (CDN) for low-latency access worldwide
• Branch-based deployments for staging and production environments
• Custom domain support with simple DNS configuration
• Generous free tier suitable for startups and enterprise projects alike

Prerequisites

Before proceeding, ensure the following are in place:

• A GitHub account with access to create repositories
• An AWS account (free tier is sufficient for this guide)
• Node.js (v18+) and npm installed on your local machine
• Basic familiarity with React and Git

Step 1 — Create the React Application

Begin by scaffolding a new React project using Create React App. Open your terminal and execute the following commands.

npx create-react-app product-listing-app

cd product-listing-app

Go to the file explorer

C:\Users\hp\product-listing-app\src\
import React from "react";
Right-click on App.js
Open with Visual Studio
Paste the code over there

const products = [
  { id: 1, name: "Wireless Headphones", price: "$49.99", category: "Audio" },
  { id: 2, name: "Smart Watch",         price: "$99.99", category: "Wearables" },
  { id: 3, name: "Bluetooth Speaker",   price: "$29.99", category: "Audio" },
  { id: 4, name: "Laptop Stand",        price: "$19.99", category: "Accessories" },
  { id: 5, name: "USB-C Hub",           price: "$39.99", category: "Accessories" },
  { id: 6, name: "Noise Cancelling Earbuds", price: "$79.99", category: "Audio" },
];

function ProductCard({ name, price, category }) {
  return (
    <div style={{
      border: "1px solid #e0e0e0",
      borderRadius: "10px",
      padding: "1.2rem",
      backgroundColor: "#fff",
      boxShadow: "0 2px 6px rgba(0,0,0,0.06)"
    }}>
      <span style={{
        fontSize: "0.75rem",
        color: "#888",
        textTransform: "uppercase",
        letterSpacing: "0.05em"
      }}>
        {category}
      </span>
      <h3 style={{ margin: "0.5rem 0" }}>{name}</h3>
      <p style={{ fontWeight: "bold", color: "#2d6a4f" }}>{price}</p>
      <button style={{
        marginTop: "0.5rem",
        padding: "0.5rem 1rem",
        backgroundColor: "#0073e6",
        color: "#fff",
        border: "none",
        borderRadius: "6px",
        cursor: "pointer"
      }}>
        Add to Cart
      </button>
    </div>
  );
}

function App() {
  return (
    <div style={{ padding: "2rem", fontFamily: "Inter, sans-serif", backgroundColor: "#f9f9f9", minHeight: "100vh" }}>
      <h1 style={{ color: "#1a1a2e" }}>🛒 Product Listing</h1>
      <p style={{ color: "#555" }}>Browse our latest collection of products.</p>
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
        gap: "1.2rem",
        marginTop: "1.5rem"
      }}>
        {products.map((p) => (
          <ProductCard key={p.id} {...p} />
        ))}
      </div>
    </div>
  );
}

export default App;
Verify the application runs correctly on your local environment:

npm start

The application will be available at http://localhost:3000. Confirm the product cards render as expected before proceeding.

Step 2 — Initialize a GitHub Repository and Push the Code

Navigate to github.com and create a new repository named product-listing-app. Set the visibility to Public or Private based on your requirements.

Once the repository is created, execute the following commands in your terminal to initialize Git and push the project:

git init
git add .
git commit -m "Initial commit: product listing app"
git remote add origin https://github.com/YOUR-USERNAME/product-l
isting-app.git
git branch -M main
git push -u origin main

Confirm that all files are visible in your GitHub repository before moving to the next step.

Step 3 — Connect the Repository to AWS Amplify

3.1 — Open the AWS Amplify Console

Sign in to the AWS Management Console and navigate to AWS Amplify. Click "Create new app".

3.2 — Select GitHub as the Source

On the Deploy your app page, select GitHub and click Continue. You will be redirected to GitHub to authorize AWS Amplify access to your account. Click Authorize AWS Amplify.

3.3 — Install the Amplify GitHub App

GitHub will prompt you to install the Amplify GitHub App in your account. This app grants Amplify read-only access to your selected repositories, a more secure approach compared to full OAuth access.

• Select your GitHub account
• Choose only select repositories and select product-listing-app
• Click Install & Authorize

You will be redirected back to the Amplify Console automatically.

3.4 — Select Repository and Branch

In the Add repository branch page:
• Repository: product-listing-app
• Branch: main

Click Next.

Step 4 — Configure Build Settings

AWS Amplify automatically detects the React framework and populates the build configuration. The default amplify.yml build specification will look like this:

No modifications are required for a standard React application. Click Next to proceed.

Step 5 — Review and Deploy

Review all configured settings on the final screen. Once confirmed, click "Save and deploy".

AWS Amplify will immediately begin the deployment pipeline, which consists of four automated stages:

The entire process typically completes within 2 to 3 minutes.

Step 6 - Access Your Live Application

Upon successful deployment, AWS Amplify provides a publicly accessible URL in the following format:

https://main.d1abc123xyz.amplifyapp.com

Your Product Listing App is now live, secured with HTTPS, and served globally via AWS CDN.

Continuous Deployment in Action

A key advantage of AWS Amplify is its built-in continuous deployment pipeline. Any subsequent code changes pushed to the connected branch will automatically trigger a new build and deployment, no manual intervention required.

To verify this, make a small update to your application:

# Edit src/App.js — update the heading
# From: <h1>🛒 Product Listing</h1>
# To:   <h1>🛒 Featured Products</h1>

git add .
git commit -m "Updated page heading"
git push

Return to the Amplify Console, and a new deployment will be triggered automatically within seconds of the push.

Conclusion

AWS Amplify provides a robust, production-grade hosting solution that significantly reduces the time and effort required to deploy frontend applications. By integrating directly with GitHub, it enables engineering teams to focus on writing code rather than managing infrastructure.

Whether you are deploying a simple product page or a complex enterprise frontend, AWS Amplify's Git-based workflow offers a clean, repeatable, and efficient path from development to production.