Add Page & Upload Functionality to Template App (ReactJS, Typescript & Firebase)

Job ID: 32768054

Budget: £20 – £250 GBP

I have a ReactJS project template. I need a new page to be created that allows me to get images and upload images to firebase storage.

Things that need to be done:
New menu item on the left sidebar
New page
Create functionality for uploading images to firebase and update the UI (view upload modal.png)
Create functionality for getting images from firebase and update the UI (view page.png)
Create functionality for editing details on the image (feel free to reuse the uploading images modal, just make sure the user cannot)

For this project, please use your own firebase account config for testing and then remove your config before uploading it back to git. I will test it and then release the payment as long as everything is correct.

View attached images for the wireframes of roughly what I need.

Below the uploading table, I need a similar table that just shows the previous 10 uploaded images (ordered by date/time uploaded descending)

Data to be saved (firestore):
ImageName (string)
ImageID (guid)
CreatedDate (DateTime object)
Title (string)
Description (string)
Tags (string) (tags seperated by spaces)
UserID (guid) (not sure about this one at the moment)

User experience of uploading:
You're on the main page, you click the "+ Upload" button which shows the upload modal. You click the "+" on the modal to add a photo there. Then you enter the other details (title, description, tags) and then press the bottom upload button on the modal. Then the modal dissapears and that info is added to the table where the progress of the upload is shown and the details are saved to the database.

Template: https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469
Related categories: JavaScript React.js Yarn Typescript Google Firebase