This CSS file holds all styles for your App, ImageGallery, and ImageCard components.

.App {
  text-align: center;
  padding: 20px;
  min-height: 100vh;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  justify-items: center;
}

.image-card {
  text-align: center;
  max-width: 200px;
}

.image-card img {
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
  cursor: pointer;
}

.categories {
  margin-top: 10px;
  margin-bottom: 20px;
  display: flex;
  flex-flow: row wrap;
  gap: 1em;
  justify-content: center;
}

.category-pill {
  padding: 5px 12px;
  background-color: #333;
  color: #f1f1f1;
  border: 1px solid #f1f1f1;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  transition: all .3s, color .3s;
  cursor: default;
}

.category-pill:hover,
.category-pill.active {
  background-color: #428645;
}

.popover {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s .3s;
}

.popover.show {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease, visibility 0s 0s;
}

.popover-content {
  background-color: rgba(0, 0, 0, .7);
  padding: 25px 50px;
  border-radius: 8px;
  position: relative;
}

.popover-content img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  box-shadow: -5px 5px 10px rgba(0, 0, 0, .7);
}

.close-button {
  position: absolute;
  font-size: 1.25em;
  font-weight: bold;
  top: 10px;
  right: 10px;
  background-color: #f96e46;
  color: white;
  border: none;
  border-radius: 50%;
  padding: .25em .5em;
  cursor: pointer;
}

This JavaScript file is the stage for all your other components and includes all high-level functionality to properly pass along properties and capture/process events.

import { useEffect, useState } from 'react';
import './App.css';
import ImageGallery from './ImageGallery';
import data from './images.json';

const shuffleArray = (array) => {
  const shuffledArray = [...array];
  for (let i = shuffledArray.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
  }
  return shuffledArray;
}

function App(){

  const [filters, setFilters] = useState([]);
  const [images, setImages] = useState([]);
  const [selectedImage, setSelectedImage] = useState(null);
  
  useEffect(() =>{
    const shuffledData = shuffleArray(data);
    setImages(shuffledData);
  }, []);
  
  const toggleFilter = (category) => {
    setFilters((prevFilters) => {
      if (prevFilters.includes(category)) {
        return prevFilters.filter((filter) => filter !== category);
      } else {
        return [...prevFilters, category];
      }
    });
  }

  const uniqueCategories = [...new Set(images.flatMap((image) => image.categories))].sort();

  const filteredImages = filters.length === 0
    ? images
    : images.filter((image) => filters.every((filter) => image.categories.includes(filter)));
	
  const [selectedImage, setSelectedImage] = useState(null);

  const openPopover = (image) => { setSelectedImage(image); }
  const closePopover = () => { setSelectedImage(null); }
  
  return (
    <div className='App'>
      <h1>Art Gallery</h1>
      <p>Select categories to filter</p>
      <div className='categories'>
        {uniqueCategories.map((category) => (
          <button
            key={category}
            className={`category-pill`}
            onClick={() => toggleFilter(category)}
          >{category}</button>
        ))}
      </div>
      {
         filteredImages.length === 0
           ? (
             <p style={{ color: 'red' }}><em>No images found for the selected categories.</em></p>
           )
           : (
             <ImageGallery
               images={filteredImages}
               toggleFilter={toggleFilter}
             />
           )
      }
      
      {
         filteredImages.length === 0
           ? (
             <p style={{ color: 'red' }}><em>No images found for the selected categories.</em></p>
           )
           : (
             <ImageGallery
               images={filteredImages}
               toggleFilter={toggleFilter}
               onImageClick={openPopover}
             />
           )
      }

      {
        selectedImage && (
          <div
            className={`popover ${selectedImage ? 'show' : ''}`}
            onClick={closePopover}
          >
            <div
              className='popover-content'
              onClick={
                (e) => e.stopPropagination()
              }
            >
              <img
                src={`${process.env.PUBLIC_URL}${selectedImage.src}`}
                alt={selectedImage.title}
              />
              <p>
                {selectedImage.title}
              </p>
              <button
                className='close-button'
                onClick={closePopover}
              >
                &times;
              </button>
            </div>
          </div>
        )
      }
    </div>
  );
}

export default App;

This is the child component of ImageGallery.js. This component renders the individual images along with their corresponding categories and titles. It also triggers the event to display the image’s full-screen Popover.

const ImageCard = ({ image, toggleFilter, onImageClick }) => {
  return (
    <div className="image-card">
      <img
        src={`${process.env.PUBLIC_URL}${image.src}`}
        alt={image.title}
        onClick=(() => onImageClick(image))
      />
      <p><strong>{image.title}</strong></p>
      <div className="categories">
        {
          image.categories.length > 0
            ? (
              image.categories.map((category) => (
                <span
                  key={category}
                  className="category-pill"
                  onClick={
                    (e) => {
                      e.stopPropagination();
                      toggleFilter(category)
                    }
                  }
                >{category}</span>
              ))
            )
            : (<span>Add a category</span>);
        }
      </div>
    </div>
  );
}

export default ImageCard;

This is the child of the App component and ImageCard’s parent. This mostly transitory component contains all ImageCard components that are rendered based on the data fed to it from the App component & images.json.

import ImageCard from './ImageCard';

const ImageGallery = ({ images, toggleFilter, onImageClick }) => {
  return (
    <div className="gallery">
      {images.map((image, i) => (
        <ImageCard
          key={i}
          image={image}
          toggleFilter={toggleFilter}
          onImageClick={toggleFilter}
        />
      ))}
    </div>
  );
}

export default ImageGallery;

This is your data file. Provide your image’s location, title, and any categories it belongs to. Your images.json file can contain as few or as many images as you like, as long as your JSON follows this pattern (replace all values with those that match your images):

[
  {
    "src": "/path/to/image.png",
    "categories": [
      "tag 1",
      "another descriptor",
      "3rd tag",
      "tag the fourth"
    ],
    "title": "Image Title"
  },
  {
    //same as before
  }
]

This CSS file contains all general styles that affect the app and the page that contains it. Use this file to define general tags like body, code, button, a, h1-h5, p, etc.

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #2f2f2f;
  color: #ddd;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

This is React’s entry point to your app. Your app can’t be built or rendered properly without this file. Your App component must be contained within the <React.StrictMode>, which is inside the root of your document.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App.js';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);