React.js Firestore Project to Build Instagram Grid Image Gallery Using Cloud Storage & Framer Motion in Javascript

 

 

npx create-react-app imagegallery

 

 

cd imagegallery

 

 

npm i firebase

 

 

npm i framer-motion

 

 

 

App.js

 

 

 

 

index.css

 

 

 

 

App.css

 

 

 

 

Now create a folder called as firebase and inside it create a file called config.js and copy paste the below code

 

 

config.js

 

 

 

 

Now make a hooks folder and inside it create a file called useFirestore.js and copy code as shown below

 

 

 

 

And now create a file called as useStorage.js and copy paste the below code

 

 

 

 

And now create a folder comps folder and create a ImageGrid.js file and copy paste the below code

 

 

 

 

Modal.js

 

 

 

 

ProgressBar.js

 

 

 

 

Title.js

 

 

 

 

UploadForm.js

 

 

Leave a Reply