Add pages & user system to React project (ReactJS, TypeScript, Gmail signin & Firebase) -- 2
Budget: £20 – £250 GBP
Things to be done (refer to images):
Upload page [edit existing page] (upload page.jpg):
1. Add table below current table which shows previous 5 image uploads and only use the top one for the current session's uploads.
1. When users navigate to the upload page, the top table should be empty.
1. Do not move new image uploads to the bottom page.
2. Add multiple delete functionality for both tables.
3a. Add a modal that makes you confirm if you want to delete multiple images.
3b. Add a modal that makes you confirm if you want to delete single images.
4. Change the progress column on the previous uploads table to show the description of the upload.
5. Add tags column to previous uploads.
6. Upload form validation: make sure file being uploaded is an image.
7. Drag and drop images (dnd.jpg) (something like "border-style: dashed; opacity: 75%; border-width: 4px;" would be good)
7. Set the title of drag and drop images to "Untitled" and leave description and tags empty.
7. Change storage image name to be "{filename}_{imageid}" and replace spaces " " with "_".
Sign in system:
1. Allow people to sign in with gmail
2. Redirect un-signedin people to the signin page
3. On first sign in, set username to their email excluding "@gmail.com"
4. Update upload page to use UserID when uploading, but show the username in the table
Profile info to be stored:
1. Username (required)
2. UserID (required) (guid)
3. Email (required) (readonly)
4. Name (optional)
5. Time zone (optional)
6. Currency (optional)
Profile [add new page]:
Overview [add tab on the profile page]:
1. Shows user info.
Analyse Image [add tab on the profile page] (analyse.jpg):
1. List of images that you uploaded.
2. Allow users to search through images uploaded.
3. When you click an image, it needs to popup the modal for that image (modal.jpg)
Analyse Image Modal [add new modal] (modal.jpg):
If the image has not been analysed:
1. First tab (disable all others) & show the image, title, desc and tags (readonly).
2a. When you press "Analyse" fade the image, title, desc and tags to 75% opacity.
2b. When you press "Analyse" change the analyse text to "Please wait... o" (the "o" is a loading circle).
3. When analysing is done move to the label tab and disable the analyse tab (make it unclickable)
4. Make other tabs clickable
If the image has been analysed before:
1. Move to label tab
2. Disable analyse tab
Settings [add new page]:
1. Allow people to edit their profile info (including username)
More info:
Analyse modal: add the other tabs and just display the tab title in each tab for now.
Analyse modal: For now the functionality of analysing can just be add data to db showing the image is analysed and then wait 1 second.
Analyse modal: Analyse tab is readonly
Analyse data to be saved:
imageId (the same as upload image id)
analysedDate (date (UTC))
labels (will store json later on, can leave empty for now)
userId (of the person who clicked analyse)
Let me know if you think we should keep using NOSQL or switch to SQL.
Upload page [edit existing page] (upload page.jpg):
1. Add table below current table which shows previous 5 image uploads and only use the top one for the current session's uploads.
1. When users navigate to the upload page, the top table should be empty.
1. Do not move new image uploads to the bottom page.
2. Add multiple delete functionality for both tables.
3a. Add a modal that makes you confirm if you want to delete multiple images.
3b. Add a modal that makes you confirm if you want to delete single images.
4. Change the progress column on the previous uploads table to show the description of the upload.
5. Add tags column to previous uploads.
6. Upload form validation: make sure file being uploaded is an image.
7. Drag and drop images (dnd.jpg) (something like "border-style: dashed; opacity: 75%; border-width: 4px;" would be good)
7. Set the title of drag and drop images to "Untitled" and leave description and tags empty.
7. Change storage image name to be "{filename}_{imageid}" and replace spaces " " with "_".
Sign in system:
1. Allow people to sign in with gmail
2. Redirect un-signedin people to the signin page
3. On first sign in, set username to their email excluding "@gmail.com"
4. Update upload page to use UserID when uploading, but show the username in the table
Profile info to be stored:
1. Username (required)
2. UserID (required) (guid)
3. Email (required) (readonly)
4. Name (optional)
5. Time zone (optional)
6. Currency (optional)
Profile [add new page]:
Overview [add tab on the profile page]:
1. Shows user info.
Analyse Image [add tab on the profile page] (analyse.jpg):
1. List of images that you uploaded.
2. Allow users to search through images uploaded.
3. When you click an image, it needs to popup the modal for that image (modal.jpg)
Analyse Image Modal [add new modal] (modal.jpg):
If the image has not been analysed:
1. First tab (disable all others) & show the image, title, desc and tags (readonly).
2a. When you press "Analyse" fade the image, title, desc and tags to 75% opacity.
2b. When you press "Analyse" change the analyse text to "Please wait... o" (the "o" is a loading circle).
3. When analysing is done move to the label tab and disable the analyse tab (make it unclickable)
4. Make other tabs clickable
If the image has been analysed before:
1. Move to label tab
2. Disable analyse tab
Settings [add new page]:
1. Allow people to edit their profile info (including username)
More info:
Analyse modal: add the other tabs and just display the tab title in each tab for now.
Analyse modal: For now the functionality of analysing can just be add data to db showing the image is analysed and then wait 1 second.
Analyse modal: Analyse tab is readonly
Analyse data to be saved:
imageId (the same as upload image id)
analysedDate (date (UTC))
labels (will store json later on, can leave empty for now)
userId (of the person who clicked analyse)
Let me know if you think we should keep using NOSQL or switch to SQL.