Profile: show badges for user

[souvikbasu]

Add ability to show different type of badges for a user. These badges will be assigned to user based on different conditions that will be played as a separate story

[jscodelover]

Hey Souvik, I would like to take this issue.

[souvikbasu]

Thanks Manisha, assigned the issue to you. I will post the page design in some time. Please let me know if your localhost setup works. If you face any issues, please join the #frontend-social-dev slack channel using this invite: https://join.slack.com/t/shoonya-tech/shared_invite/zt-i783y3rk-5I97wQmTZ~4zchNZdKJs2w

[jscodelover]

Thanks!! Yes, localhost setup is working fine.

[jscodelover]

Hey Souvik, I'm still waiting for the designs.

[souvikbasu]

Hi, sorry about the delay. Here is a design of the profile page with user badges:

• Show the badges below the profile photo
• Max 5 badges per row. Then move to next row
• The actual badge icons will be SVG files stored at location /public/badges e.g. /public/badges/author.svg will be the Author badge
• The GET profile api call will return a badges array. e.g. https://frontend-social-api.herokuapp.com/user/ will return a json that may contain an array

badges: ['author', 'angular-master']

• For backward compatibility, you will have to handle the case when this field is not found in the profile api response
• The badge image url will be /public/badges/.svg
• The dimension of the badge will be 50px x 50px with a 5px gap between them
• Badge title will show in tool tip on mouse hover

[souvikbasu]

@jscodelover please raise PR is ready

[jscodelover]

@souvikbasu I have raised the PR. FYI before you can test this feature you need to add images for the badges on the frontend side and need to update the user data API (to get badges data).