How to Build an Image Gallery with Amplify UI
Tags: aws, javascript, react, programming
Published: 2022-09-14 12:13:50

Amplify UI is an open-source UI library that allows frontend web developers to build fully extensible and customized user interfaces with components that give you control over the look and feel of your app.

This guide will teach you to build an image gallery with AWS Amplify UI without needing any other CSS utility library. Amplify UI provides all the components you need for styling.


## Prerequisites

The following setup is required:

- [Node >= 14.0.0 and npm >= 5.6](https://nodejs.org/en/?ref=hackernoon.com) installed on your local machine
- AWS account for hosting the app. [Sign-up](https://aws.amazon.com/) is free
- A code editor
- Basic understanding of React and JavaScript

Check out the complete source code in [this repository](https://github.com/Terieyenike/react-amplify-gallery) on GitHub. 

View the live [demo app](https://main.d3rsh3lkhrzcnl.amplifyapp.com/).

## Getting Started

The use of React is the primary frontend library for this project. To begin, install the boilerplate using this command:

```
npx create-react-app <name-of-app>
```

`<name-of-app>`: Replace this with your desired app name


After scaffolding the files and folders necessary to build the image gallery app, you need to install the dependencies for the UI components with this command:

```
npm install @aws-amplify/ui-react aws-amplify
```

**Import Styles**

Amplify ships with a default theme that you can customize. But, first, you need to import the styles, `.css`, in either of these `js` files, `src/App.js` or `src/index.js`. For this project, import the styles in the `src/index.js` file:

```js
 // src/index.js
    
    // other imports
    import '@aws-amplify/ui-react/styles.css'; // add this
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );
```

**Using Fonts**

The default theme that Amplify UI references is the Inter font. You can include the fonts in your app using the **Google Fonts CDN**. Copy and paste this code in the `public/index.html` file in the `<head>` element:

```HTML
<!-- public/index.html -->
    
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap"
      rel="stylesheet"
    />
```

## Creating the Image Gallery Info

In this section, create a file in the `src`  folder called `gallery-info.js`. This file will hold all the data in an array of objects consisting of the image URL, id, and text for the images on the home page.

Copy and paste the following code:

```js
// src/gallery-info.js
    
    export const categories =[
        {
            image: "https://res.cloudinary.com/terieyenike/image/upload/v1662646813/amplify/lerone-pieters-2-oqD5ve6Zs-unsplash.jpg",
            id: 1,
            title: "Travel",
            subtitle: "Lost in the city is where I found myself"
        },
        {
            image: "https://res.cloudinary.com/terieyenike/image/upload/v1662646814/amplify/oppo-find-x5-pro-fNPsd6_ZiuA-unsplash.jpg",
            id: 2,
            title: "Guide",
            subtitle: "Guide to Iceland"
        },
        {
            image: "https://res.cloudinary.com/terieyenike/image/upload/v1662646813/amplify/dane-wetton-t1NEMSm1rgI-unsplash.jpg",
            id: 3,
            title: "Journal",
            subtitle: "A lost city on the rolling hills"
        },
        {
            image: "https://res.cloudinary.com/terieyenike/image/upload/v1662646812/amplify/masahiro-miyagi-EHq_NyOiK80-unsplash.jpg",
            id: 4,
            title: "Guide",
            subtitle: "Top 10 things to consider when travelling"
        },
        {
            image: "https://res.cloudinary.com/terieyenike/image/upload/v1662646811/amplify/roman-kirienko-3gXotCRwGaw-unsplash.jpg",
            id: 5,
            title: "CSS Grid",
            subtitle: "Style your web components faster"
        },
        {
            image: "https://res.cloudinary.com/terieyenike/image/upload/v1662646812/amplify/dell-SGY0LIfTKZ4-unsplash.jpg",
            id: 6,
            title: "Guide",
            subtitle: "Hands on review with the best gimbal"
        }
    ]
```

## Creating the Image Gallery 

Let’s create a `components` folder in the `src` folder and include a new file called `card-list.component.jsx` in the `card-list` folder. This component will be responsible for displaying each card image.

Copy and paste the following code:


```js
// src/components/card-list/card-list.component.jsx
    
    import {
      Collection,
      Card,
      Heading,
      Text,
      Image,
      View,
    } from '@aws-amplify/ui-react';
    
    import { categories } from '../../gallery-info';
    
    const CardList = () => {
      return (
        <>
          <Collection
            items={categories}
            type='list'
            direction='row'
            gap={{ base: '0', medium: '2rem' }}
            wrap='wrap'
            justifyContent='center'
            alignItems='center'>
            {(category, index) => (
              <Card
                key={index}
                borderRadius='medium'
                maxWidth={{ medium: '22rem', large: '27rem' }}
                marginTop='2.5rem'
                marginBottom='1.5rem'
                boxShadow='medium'>
                <Image
                  alt={category.title}
                  src={category.image}
                  objectFit='cover'
                />
                <View as='div' maxWidth='100%'>
                  <Heading level={4}>{category.title}</Heading>
                  <Text>{category.subtitle}</Text>
                </View>
              </Card>
            )}
          </Collection>
        </>
      );
    };
    
    export default CardList;
```

The following occurs in the code snippets above:

- Import the various components from the Amplify library
- Next, import the categories that contain all the data objects for the image gallery
- The **collection** component accepts the data source from the **categories** import, which we will use to display items on the page. The essence of the Collection component acts as a way to repeat components through looping
- In each component provided by Amplify, the documentation offers **props** that can be attached to all imported components for styling and other properties needed for layout on the page
- The `Card` components group related pieces of content, and it holds the image and text
- The rest of the components like the `Image`, `Heading`, and `Text` display the responsive images, heading, and text in the **<p>** element, respectively
- The `View` component renders a `<div>` element by default


So far, the app won’t display the **CardList** component on the page yet. To view the image gallery, you must import the Card List component into the project's entry point, `App.js`. 


Now, add the **CardList** component in the `src/App.js` file:


```js
// src/App.js
    
    import CardList from './components/card-list/card-list.component';
    
    const App = () => {
      return (
        <>
          <CardList />
        </>
      );
    };
    
    export default App;
```


The app should look something like this:


![gallery](https://paper-attachments.dropbox.com/s_C7BFC2C5AD92D2C3478A8099A426D5F321A1A63DE7D3377EE46AF2C132949BF5_1663149694427_react+amplify+gallery.png)

## Creating Footer Info

The footer section of the app will contain information about the project and any other details you wish to include, like the brand name, copyright, and so on.

Create a new folder, **footer,** and file, `footer.component.jsx` within the **components** folder.

Copy and paste the following code:

```js
// src/components/footer/footer.component.jsx
    
    import { Badge, Link, Flex, Heading, Text, View } from '@aws-amplify/ui-react';
    
    const Footer = () => {
      return (
        <>
          <Flex
            direction={{ base: 'column', medium: 'row' }}
            justifyContent={{ base: 'center', medium: 'space-between' }}
            alignItems='center'
            marginTop='1.5rem'>
            <View>
              <Flex
                direction='column'
                alignItems={{ base: 'center', medium: 'start' }}>
                <Heading color='neutral.90'>Image Gallery</Heading>
                <Text color='neutral.90' as='p'>
                  Built with React.js and Amplify UI
                </Text>
              </Flex>
            </View>
            <Badge>
              <Link
                href='https://github.com/Terieyenike/react-amplify-gallery'
                isExternal={true}>
                GitHub
              </Link>
            </Badge>
          </Flex>
        </>
      );
    };
    
    export default Footer;
```

The code above does the following:

- The `Flex` component is responsible for the layout in the footer section using CSS Flexbox
- The `Badge` component is a color-coded element used to display a message which in this case is the link to the GitHub repo
- Finally, the `Link` component is used within the `Badge` component to direct users to an external link using the props isExternal set to **true**

Now, the page should look like this:


![footer info](https://paper-attachments.dropbox.com/s_C7BFC2C5AD92D2C3478A8099A426D5F321A1A63DE7D3377EE46AF2C132949BF5_1663151645210_footer.png)



## Deploying the App

Check out [this guide](https://hackernoon.com/how-to-deploy-modern-apps-with-aws-amplify) on deploying modern apps with AWS Amplify.



## Conclusion

This article taught you about using Amplify UI to build a fully responsive image gallery. Amplify UI provides everything you need to create other pages entirely from scratch.

Try it out!


## Learn More

- [Amplify UI components](https://ui.docs.amplify.aws/react/components)