Fightpandemics: Implement avatar photos

[joshmorel]

We need to allow upload of avataor photos or organization & individual users. But we should set restrictions (size/format) & store ourselves (S3) instead of an external URL.

[joshmorel]

This is MVP but not soft launch critical.

[mannykary]

We could potentially use Gravatar so that we don't have to deal with image uploads/storing of avatars. Otherwise, we would have to create a microservice that is responsible for processing image uploads to compress and store them on S3 or some other CDN in order to offload that work from the main web server.

Gravatar API: https://en.gravatar.com/site/implement/

[mannykary]

If we were to implement this ourselves, we could actually get away with not having a microservice if we pre-resize the image client side (see this StackOverflow post for an example). There is also a React NPM module that we could potentially use. Then we can upload the image to S3 directly from the backend, and store the URL to the S3 image URL in the database.

[mannykary]

@robinv85 also mentioned that we could get the avatar through Auth0, which uses Gravatar. So we may not need to use the Gravatar API directly.

[robinv85]

I can take a look at this. All the approaches that were mentioned seem possible, so we can make some choices and decide about the required functionality first. I think Auth0 checks if a gravatar exists for the e-mail address when signing up, and also uses the social media avatar when using a social media account to sign up. (this can also affect how user accounts are linked if that's implemented (see #781).

Another point that was mentioned is that the organizations also need to be able to upload a profile image, so maybe to keep it simple we can use the same approach for both individual users and organizations. So this probably means adding a separate endpoint to upload images and store them on AWS S3. I'll look into this if we should use a separate microservice as @mannykary mentioned, or AWS Lambda function perhaps?

If #781 is finished we could still revisit this and look at syncing from Gravatar or social media as an extra feature.

[mannykary]

@robinv85 Yeah, if we want to offload image uploads and processing from the main server, we could create an API Gateway endpoint that accept image upload requests, place them onto an SQS queue, and add a trigger to the queue to invoke a Lambda to process the image upload request and upload to S3. The tricky part is authentication though, since the endpoint would be called from the frontend. So this implementation is a bit complex.

Since this is just for organizations, of which there is a much smaller number than individuals, we might be able to get away with the main web server processing the image upload and uploading directly to S3. I would recommend pre-resizing the image client side to minimize the size of the image being uploaded.

[robinv85]

@mannykary yeah that is more or less what I was thinking, but wasn't sure if we would need API gateway and how to integrate that with our existing authentication.

But do you think we should only use this for organizations though? And for individual users use Auth0 instead of storing images on S3? If we go though our own API to Auth0 it would create a similar problem when using the main node.js server application and I guess that would result in 2 different approaches which is also more work to split it up?

[mannykary]

Yeah I guess it would be much simpler to just implement one thing. We probably won't encounter scalability issues until later, so we can just roll our own avatar upload for now (and just keep it simple by having the main web server process it and upload to S3). If we encounter scalability problems, we'll need to reassess.

[robinv85]

@mannykary yeah that's also what I was thinking, not sure about expectations for traffic (it could spike e.g. when doing official launch or marketing campaign). This also makes me wonder if we have a solid way to check diagnostics and do some profiling, there are some good explanations for node.js here https://nodesource.com/blog/diagnostics-in-NodeJS-2 but might be harder in production

[SubhaSarojini]

Feature Pod : https://www.notion.so/fightpandemics/Avatars-for-Profiles-e4af32c040c94035a041c76b3c9a1e97

[SubhaSarojini]

AWS S3, Lambda Architecture ideas were discussed in this link: https://fightpandemics.slack.com/archives/C010QR5D4KY/p1598307761061900

[manualzuru]

@ashminbhandari should we move this as in progress?

[ashminbhandari]

Yes! @manualzuru

[mannykary]

Replaced BACKEND label with FRONTEND for this ticket, and split the backend ticket to https://github.com/FightPandemics/FightPandemics/issues/1539