A well-designed image gallery will make your application stand out and provide a great user experience. Since React is good at building fast interfaces, creating an image gallery offers a smooth user experience.

We will initialize a React project with the Vite frontend-built tool, install the Axios and MUI libraries to fetch images from a free API, and design it properly using Material-UI components.

Here is the step-by-step guide:

Step 1: Initialize a React project

Create a new Vite project with a React template using the command below:

npm create vite@latest image-gallery -- --template react

Go inside the project folder using the command below:

cd image-gallery

Install the project dependencies using the command below:

npm install

Step 2: Install MUI and Axios

MUI provides every type of styling out of the box. We just need to import the proper components to style our images fetched from an API to create an image gallery.

npm install axios @mui/material @emotion/react @emotion/styled

Step 3: Set up the Project Structure

Let me show you what our final project structure should look like:

src
├── components
│   ├── ImageCard.jsx
│   └── ImageGallery.jsx
├── App.jsx
└── main.jsx

Step 4: Create an ImageCard component

Under the “src” folder, create a folder called “components”.

Inside that folder, create a new file called “ImageCard.jsx” and add the code below:

// src/components/ImageCard.jsx

import { Card, CardMedia, CardContent, Typography } from "@mui/material";

// eslint-disable-next-line react/prop-types
const ImageCard = ({ image }) => {
  return (
    <Card>
      <CardMedia
        component="img"
        height="140"
        image={
          // eslint-disable-next-line react/prop-types
          image.url
        }
        alt={
          // eslint-disable-next-line react/prop-types
          image.title
        }
      />
      <CardContent>
        <Typography variant="h6">
          {
            // eslint-disable-next-line react/prop-types
            image.title
          }
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {
            // eslint-disable-next-line react/prop-types
            image.description
          }
        </Typography>
      </CardContent>
    </Card>
  );
};

export default ImageCard;

This is a component that will display the images in a proper format using MUI styling.

Step 5: Create an ImageGallery component

Under the “components” folder, create a new file called “ImageGallery.jsx” and add the code below:

// src/components/ImageGallery.jsx

import { useEffect, useState } from "react";
import { Grid, Container } from "@mui/material";
import axios from "axios";
import ImageCard from "./ImageCard";

const ImageGallery = () => {
  const [images, setImages] = useState([]);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/photos?_limit=12")
      .then((response) => setImages(response.data))
      .catch((error) => console.error("Error fetching images:", error));
  }, []);

  return (
    <Container>
      <Grid container spacing={4}>
        {images.map((image) => (
          <Grid item key={image.id} xs={12} sm={6} md={4}>
            <ImageCard
              image={{
                url: image.thumbnailUrl,
                title: image.title,
                description: "Market crashes big today",
              }}
            />
          </Grid>
        ))}
      </Grid>
    </Container>
  );
};

export default ImageGallery;

This is our image gallery component that contains fetched images from an API.

We are fetching 12 images at a time and displaying each image properly using the ImageCard component, which we already created in the previous step. So, this is a container component that holds 12 images.

Step 6: Update the App Component

You can update the “src/App.jsx” component to import the “ImageGallery.jsx” component.

// src/App.jsx

import { CssBaseline, AppBar, Toolbar, Typography } from "@mui/material";
import ImageGallery from "./components/ImageGallery";

const App = () => {
  return (
    <div>
      <CssBaseline />
      <AppBar position="relative">
        <Toolbar>
          <Typography variant="h6" color="inherit" noWrap>
            Image Gallery
          </Typography>
        </Toolbar>
      </AppBar>
      <main style={{ marginTop: '30px' }}>
        <ImageGallery />
      </main>
    </div>
  );
};

export default App;

Step 7: Update the main entry point

Our main entry point is main.jsx component, which has the below code:

// src/main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import { CssBaseline, ThemeProvider, createTheme } from "@mui/material";

const theme = createTheme();

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

We created a basic theme for the project and passed the theme to our React application.

Go to the terminal and start the development server using the below command:

npm run dev

That’s it!