DEV Community

Cover image for How to Build an Image Gallery with Amplify UI
teri for AWS Community Builders

Posted on

How to Build an Image Gallery with Amplify UI

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:

Check out the complete source code in this repository on GitHub.

View the live demo app.

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>
Enter fullscreen mode Exit fullscreen mode

<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
Enter fullscreen mode Exit fullscreen mode

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:

 // 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>
    );
Enter fullscreen mode Exit fullscreen mode

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:

<!-- 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"
    />
Enter fullscreen mode Exit fullscreen mode

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:

// 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"
        }
    ]
Enter fullscreen mode Exit fullscreen mode

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:

// 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;
Enter fullscreen mode Exit fullscreen mode

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 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:

// src/App.js

    import CardList from './components/card-list/card-list.component';

    const App = () => {
      return (
        <>
          <CardList />
        </>
      );
    };

    export default App;
Enter fullscreen mode Exit fullscreen mode

The app should look something like this:

gallery

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:

// 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;
Enter fullscreen mode Exit fullscreen mode

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

Deploying the App

Check out this guide 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

Top comments (0)