One of the things I ask all the engineers on my teams to do as part of their onboarding (and a part of ongoing team collaboration) is to “eat your own dogfood.”

What that means for my AWS Amplify is they’re asked to create their own application and use the products/services we build and maintain every day as a user would.

This builds empathy, understanding, and helps with a baseline understanding of the wide variety of ways customers use the products and services.

My kids have recently shown an interest in coding as they’ve observed the countless hours I spend at the computer while we’re all in quarantine together, so I decided to build a very simple project for them and their devices.

Separately, our family is pretty big on sharing quotes and thoughts on inspirational characters or people and so we regularly share quotes at breakfast or dinner. That led to a pretty simple project of displaying a random quote on a single-page-app and then hosting it on Amplify Console under my domain, using the Amplify CLI Hosting Plugin.

Build the App

Start with a very simple react app with @material-ui/core for some simple components.

npx create-react-app quotes && cd quotes
npm install @material-ui/core react-papaparse

Next, thanks to akhiltak we can use akhiltak/inspirational-quotes as our data source for this quotes app.

Now we’ve got the basics for App.js

import React, { useState, useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import { readRemoteFile } from "react-papaparse";
import "./App.css";

const useStyles = makeStyles({
  root: {
    maxWidth: 600
  quote: {
    color: "#999",
    fontSize: 25
  author: {
    fontSize: 50

function App() {
  const classes = useStyles();
  const [quote, setQuote] = useState(null);

  useEffect(() => {
    const url =

    readRemoteFile(url, {
      complete: function(results) {
        console.log("Results:", results);
        const items =;
        const quote = items[Math.floor(Math.random() * items.length)];
        console.log("Random", quote);
      skipEmptyLines: true
  }, []);

  if (quote == null) {
    return false;

  return (
    <div className="App">
      <header className="App-header">
        <Card raised className={classes.root}>

export default App;

AWS Amplify

First, make sure you have installed Amplify CLI and setup an AWS profile:

$ npm install -g @aws-amplify/cli
$ amplify configure

Initialize Amplify

You can use a global AWS profile, or simply use Access Keys for a specific application, then Amplify will now provision our resources.

Adding Hosting

Finally, we’ll see our Console pipeline, and be ready to have CI/CD integrated directly with the repository.