Coders Packet

Image Gallery using ReactJS

By Umang Mundhra

Simple and Interactive React Image Gallery built on top of React using firebase, which can be used in React projects.

To run this application in your system:

> open the folder in vs code

> In the terminal, run the command npm install and npm start.


React PhotoGram is a react image gallery component that is built on top of React and using firebase. It is pretty simple and interactive and developers can embed it in their react project to use this image gallery.

There are a few different components for each function in this app and to support them there are some hooks.

The Title component is used to display the title and subheading on the front page.

The UploadForm component is used to upload the image.

The ProgressBar component is used to display the progress of uploading an image to the FireBase Storage.

The image grid component is used to display a grid of images from the database.

The Modal component is used to enable the enlarge-on-click functionality in the app.

There is a folder in src named "firebase" which contains a file "config.js". This file holds the integration of the project to the firebase service. We are using two services of firebase i.e. FireStore Database as well as Storage. Anyone can replace it with their firebase configuration to use it in their web project. In the config file, we are initializing the app and also two different services that are FireStore and Storage from firebase, and exporting them for further usage.

The file "src/hooks/useStorage.js" is a react hook that contains the logic of uploading an image that the user selected to the firebase storage and returning some useful information about the upload that is the progress of the upload, the URL of the image in storage as well as error if any. In the database, a collection is created named 'images' which contains the URL of the image as well as the timestamp on which it was created.

The file "src/hooks/useFireStore.js" is another react hook that takes the collection of items as a parameter and returns the array of URLs of images along with the date of creation that is stored in the storage. We use this array and iterate through it to display the images in the image grid component. The array we get from the usFireStore hook is filtered based on the date of creation in ascending order. We fire a snap object using the snapshot method every time a change occurs in the collection.

Whenever a user clicks on the image it gets enlarged and when the user clicks on the empty area part of the image it shrinks back to its original size. To achieve this functionality we have passed a prop from the ImageGrid component to the app and then from the app to the Modal component and that prop is the URL of the selected image. In the ImageGrid component, upon clicking on the image we are invoking our onClick event and setting the value of the selectedImg state in the App.js through setSelectedImg prop.

Some subtle animations are also added to the web app like when you hover over the image its opacity increases, animation when you add a new image, progress bar, or when you click an image. All these animations have been implemented using the Framer Motion package of npm. It is an easy-to-use and amazing package to add animations to your project.

Download Complete Code


No comments yet