{"id":49,"date":"2025-07-01T14:27:39","date_gmt":"2025-07-01T18:27:39","guid":{"rendered":"https:\/\/www.shawntgray.com\/blog\/?p=49"},"modified":"2025-07-01T14:27:26","modified_gmt":"2025-07-01T18:27:26","slug":"how-to-build-an-art-gallery-with-react-part-6-wrap-up","status":"publish","type":"post","link":"https:\/\/www.shawntgray.com\/blog\/how-to-build-an-art-gallery-with-react-part-6-wrap-up\/","title":{"rendered":"How to Build an Art Gallery with React \u2013 Part 6: Wrap Up"},"content":{"rendered":"\n

Congratulations! Your hard work is done. Now it is time to package it and share your work with the world. But, before we do that, let’s review what we’ve done.<\/p>\n\n\n\n

Check Your Project Directory<\/h2>\n\n\n\n

Your list of folders and files should look like this:<\/p>\n\n\n\n

react_art_gallery\n\u251c\u2500\u2500 README.md\n\u251c\u2500\u2500 node_modules\n|   \u2514\u2500\u2500 All the installed package files live here<\/em>\n\u251c\u2500\u2500 package-lock.json\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 .gitignore\n\u251c\u2500\u2500 public\n|   \u251c\u2500\u2500 images\n|   |   \u2514\u2500\u2500 Your artwork that's featured in your gallery<\/em>\n\u2502   \u251c\u2500\u2500 index.html\n\u2502   \u2514\u2500\u2500 robots.txt\n\u2514\u2500\u2500 src\n    \u251c\u2500\u2500 App.css\n    \u251c\u2500\u2500 App.js\n    \u251c\u2500\u2500 ImageCard.js\n    \u251c\u2500\u2500 ImageGallery.js\n    \u251c\u2500\u2500 images.json\n    \u251c\u2500\u2500 index.css\n    \u2514\u2500\u2500 index.js<\/code><\/pre>\n\n\n\n
Double-Check Your Work<\/h2>\n\n\n\n
Click the file listed below to review the completed code for the component, stylesheet, etc.<\/p>\n\n\n\n
App.css<\/summary>\n
\n
This CSS file holds all styles for your App<\/strong>, ImageGallery<\/strong>, and ImageCard <\/strong>components.<\/p>\n\n\n\n
.App {\n  text-align: center;\n  padding: 20px;\n  min-height: 100vh;\n}\n\n.gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 8px;\n  justify-items: center;\n}\n\n.image-card {\n  text-align: center;\n  max-width: 200px;\n}\n\n.image-card img {\n  max-width: 100%;\n  border-radius: 10px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, .1);\n  cursor: pointer;\n}\n\n.categories {\n  margin-top: 10px;\n  margin-bottom: 20px;\n  display: flex;\n  flex-flow: row wrap;\n  gap: 1em;\n  justify-content: center;\n}\n\n.category-pill {\n  padding: 5px 12px;\n  background-color: #333;\n  color: #f1f1f1;\n  border: 1px solid #f1f1f1;\n  border-radius: 20px;\n  font-size: 14px;\n  font-weight: 500;\n  transition: all .3s, color .3s;\n  cursor: default;\n}\n\n.category-pill:hover,\n.category-pill.active {\n  background-color: #428645;\n}\n\n.popover {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, .7);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity .3s ease, visibility 0s .3s;\n}\n\n.popover.show {\n  opacity: 1;\n  visibility: visible;\n  transition: opacity .3s ease, visibility 0s 0s;\n}\n\n.popover-content {\n  background-color: rgba(0, 0, 0, .7);\n  padding: 25px 50px;\n  border-radius: 8px;\n  position: relative;\n}\n\n.popover-content img {\n  max-width: 100%;\n  max-height: 80vh;\n  object-fit: contain;\n  box-shadow: -5px 5px 10px rgba(0, 0, 0, .7);\n}\n\n.close-button {\n  position: absolute;\n  font-size: 1.25em;\n  font-weight: bold;\n  top: 10px;\n  right: 10px;\n  background-color: #f96e46;\n  color: white;\n  border: none;\n  border-radius: 50%;\n  padding: .25em .5em;\n  cursor: pointer;\n}<\/code><\/pre>\n<\/div>\n<\/details>\n\n\n\n
App.js<\/summary>\n
\n
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.<\/p>\n\n\n\n
import { useEffect, useState } from 'react';\nimport '.\/App.css';\nimport ImageGallery from '.\/ImageGallery';\nimport data from '.\/images.json';\n\nconst shuffleArray = (array) => {\n  const shuffledArray = [...array];\n  for (let i = shuffledArray.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];\n  }\n  return shuffledArray;\n}\n\nfunction App(){\n\n  const [filters, setFilters] = useState([]);\n  const [images, setImages] = useState([]);\n  const [selectedImage, setSelectedImage] = useState(null);\n  \n  useEffect(() =>{\n    const shuffledData = shuffleArray(data);\n    setImages(shuffledData);\n  }, []);\n  \n  const toggleFilter = (category) => {\n    setFilters((prevFilters) => {\n      if (prevFilters.includes(category)) {\n        return prevFilters.filter((filter) => filter !== category);\n      } else {\n        return [...prevFilters, category];\n      }\n    });\n  }\n\n  const uniqueCategories = [...new Set(images.flatMap((image) => image.categories))].sort();\n\n  const filteredImages = filters.length === 0\n    ? images\n    : images.filter((image) => filters.every((filter) => image.categories.includes(filter)));\n\t\n  const [selectedImage, setSelectedImage] = useState(null);\n\n  const openPopover = (image) => { setSelectedImage(image); }\n  const closePopover = () => { setSelectedImage(null); }\n  \n  return (\n    <div className='App'>\n      <h1>Art Gallery<\/h1>\n      <p>Select categories to filter<\/p>\n      <div className='categories'>\n        {uniqueCategories.map((category) => (\n          <button\n            key={category}\n            className={`category-pill`}\n            onClick={() => toggleFilter(category)}\n          >{category}<\/button>\n        ))}\n      <\/div>\n      {\n         filteredImages.length === 0\n           ? (\n             <p style={{ color: 'red' }}><em>No images found for the selected categories.<\/em><\/p>\n           )\n           : (\n             <ImageGallery\n               images={filteredImages}\n               toggleFilter={toggleFilter}\n             \/>\n           )\n      }\n      \n      {\n         filteredImages.length === 0\n           ? (\n             <p style={{ color: 'red' }}><em>No images found for the selected categories.<\/em><\/p>\n           )\n           : (\n             <ImageGallery\n               images={filteredImages}\n               toggleFilter={toggleFilter}\n               onImageClick={openPopover}\n             \/>\n           )\n      }\n\n      {\n        selectedImage && (\n          <div\n            className={`popover ${selectedImage ? 'show' : ''}`}\n            onClick={closePopover}\n          >\n            <div\n              className='popover-content'\n              onClick={\n                (e) => e.stopPropagination()\n              }\n            >\n              <img\n                src={`${process.env.PUBLIC_URL}${selectedImage.src}`}\n                alt={selectedImage.title}\n              \/>\n              <p>\n                {selectedImage.title}\n              <\/p>\n              <button\n                className='close-button'\n                onClick={closePopover}\n              >\n                &times;\n              <\/button>\n            <\/div>\n          <\/div>\n        )\n      }\n    <\/div>\n  );\n}\n\nexport default App;<\/code><\/pre>\n<\/div>\n<\/details>\n\n\n\n
ImageCard.js<\/summary>\n
\n
This is the child component of ImageGallery.js.<\/strong> 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<\/em><\/strong>.<\/p>\n\n\n\n
const ImageCard = ({ image, toggleFilter, onImageClick }) => {\n  return (\n    <div className=\"image-card\">\n      <img\n        src={`${process.env.PUBLIC_URL}${image.src}`}\n        alt={image.title}\n        onClick=(() => onImageClick(image))\n      \/>\n      <p><strong>{image.title}<\/strong><\/p>\n      <div className=\"categories\">\n        {\n          image.categories.length > 0\n            ? (\n              image.categories.map((category) => (\n                <span\n                  key={category}\n                  className=\"category-pill\"\n                  onClick={\n                    (e) => {\n                      e.stopPropagination();\n                      toggleFilter(category)\n                    }\n                  }\n                >{category}<\/span>\n              ))\n            )\n            : (<span>Add a category<\/span>);\n        }\n      <\/div>\n    <\/div>\n  );\n}\n\nexport default ImageCard;<\/code><\/pre>\n<\/div>\n<\/details>\n\n\n\n
ImageGallery.js<\/summary>\n
\n
This is the child of the App <\/strong>component and ImageCard’s <\/strong>parent. This mostly transitory component contains all ImageCard <\/strong>components that are rendered based on the data fed to it from the App <\/strong>component & images.json<\/strong>.<\/p>\n\n\n\n
import ImageCard from '.\/ImageCard';\n\nconst ImageGallery = ({ images, toggleFilter, onImageClick }) => {\n  return (\n    <div className=\"gallery\">\n      {images.map((image, i) => (\n        <ImageCard\n          key={i}\n          image={image}\n          toggleFilter={toggleFilter}\n          onImageClick={toggleFilter}\n        \/>\n      ))}\n    <\/div>\n  );\n}\n\nexport default ImageGallery;<\/code><\/pre>\n<\/div>\n<\/details>\n\n\n\n
images.json<\/summary>\n
\n
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):<\/p>\n\n\n\n
[\n  {\n    \"src\": \"\/path\/to\/image.png\",\n    \"categories\": [\n      \"tag 1\",\n      \"another descriptor\",\n      \"3rd tag\",\n      \"tag the fourth\"\n    ],\n    \"title\": \"Image Title\"\n  },\n  {\n    \/\/same as before\n  }\n]<\/code><\/pre>\n<\/div>\n<\/details>\n\n\n\n
index.css<\/summary>\n
\n
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.<\/p>\n\n\n\n
body {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  background-color: #2f2f2f;\n  color: #ddd;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n    monospace;\n}<\/code><\/pre>\n<\/div>\n<\/details>\n\n\n\n
index.js<\/summary>\n
\n
This is React’s entry point to your app. Your app can’t be built or rendered properly without this file. Your App <\/strong>component must be contained within the <React.StrictMode><\/strong>, which is inside the root <\/em><\/strong>of your document.<\/p>\n\n\n\n
import React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport '.\/index.css';\nimport App from '.\/App.js';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n  <React.StrictMode>\n    <App \/>\n  <\/React.StrictMode>\n);<\/code><\/pre>\n<\/div>\n<\/details>\n\n\n\n
Build For Launch<\/h2>\n\n\n\n
Open a command prompt terminal of your choice and navigate to your project directory. Type the following command:<\/p>\n\n\n\n
npm run build<\/code><\/pre>\n\n\n\n
This will execute React’s build program, where it creates a fully optimized, compiled version of your project. In doing so, it checks your code for any confusions and errors. If it finds no errors, you should see a message similar to this:<\/p>\n\n\n\n
\"NPM<\/figure>\n\n\n\n
Open your newly created build <\/strong>folder to see a file directory similar to:<\/p>\n\n\n\n
build\n\u251c\u2500\u2500 images\n|   \u2514\u2500\u2500 Your artwork that's featured in your gallery<\/em>\n\u2514\u2500\u2500 static\n    \u251c\u2500\u2500 css\n    |   \u251c\u2500\u2500 main.abcdef01.css\n    |   \u2514\u2500\u2500 main.abcdef01.css.map\n    \u251c\u2500\u2500 js\n    |   \u251c\u2500\u2500 123.4567890a.chunk.js\n    |   \u251c\u2500\u2500 123.4567890a.chunk.js.map\n    |   \u251c\u2500\u2500 main.01234567.js\n    |   \u251c\u2500\u2500 main.01234567.js.LICENSE.txt\n    |   \u2514\u2500\u2500 main.01234567.js.map\n    \u251c\u2500\u2500 asset-manifest.json\n    \u251c\u2500\u2500 index.html\n    \u2514\u2500\u2500 robots.txt<\/code><\/pre>\n\n\n\n
Take all contents of this build folder and upload them to wherever you want your app to live. Once you do, you should be able to play around with it.<\/p>\n\n\n\n