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

There is a few different components for each functionality in our app and to support them there are some hooks.
The Title component is used to display the title and sub heading on thr frontpage. 
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 ImageGrid 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 as "firebase" which contains a file "config.js" . This file holds the integration of the project to the firebase service. We are basically using two services of firebase i.e. FireStore Database as well as Storage.  Anyone can replace it with their own firebase  configuration to use it in their web project. In the config file we are initializing the app and also two different services that is 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 a 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 as '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 collection of items  as a parameter and returns the array of url's of images along with date of creation that is   stored in the storage. We use this array and iterate through it to display the images in ImageGrid component. The array we get from usFireStore hook is filtered on the basis of the date of creation in the ascending order. We fire a snap object using onSnapShot method everytime a change occurs in the collection.

Whenever a user clicks on image it's get enlarged and when the user clicks on empty area aprt of the image it shrinks back to it's original size. To achieve this functionality we have passed a prop from ImageGrid component to the app and then from app to 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.

I have also included some subtle animations to the webapp like when you hover over the image it'ss opacity increases , animation when you add a new image , progress bar or when you click an image . All these animations have been implemented using Framer Motion package of npm. It's a easy to use and amazing package to add animations to your project.



