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 installed on your local machine
- AWS account for hosting the app. Sign-up is free
- A code editor
- Basic understanding of React and JavaScript
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>
<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:
// 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:
<!-- 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:
// 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:
// 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
Cardcomponents group related pieces of content, and it holds the image and text - The rest of the components like the
Image,Heading, andTextdisplay the responsive images, heading, and text in the element, respectively - The
Viewcomponent 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;
The app should look something like this:
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;
The code above does the following:
- The
Flexcomponent is responsible for the layout in the footer section using CSS Flexbox - The
Badgecomponent is a color-coded element used to display a message which in this case is the link to the GitHub repo - Finally, the
Linkcomponent is used within theBadgecomponent to direct users to an external link using the props isExternal set to true
Now, the page should look like this:
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!
Top comments (0)