Requirement:

• To share/post the progress of the application to social media (Twitter, Facebook)

Acceptance Criteria:

• When user shares/posts the link, it should preview the image of the progress in the social media post.

Tools and Technologies:

• Spring Boot REST for services
• React Js for front-end development

Description:

I have a react application which tracks the progress of the users goals and objectives. The progress is displayed in a card component with progress bar. I need to share this progress component to social media like Twitter, Facebook.

I would like to know how to generate preview links so that I can share that link to twitter, which in turn, should display the progress bar chart component as an image/thumbnail view on the social media platform.

What I have tried so far:

I have created an api which extracts the meta tags when we pass the url link. The reference image is below,

I really don't know how to add meta tags to my react component. I have researched on react-helmet npm package, but, I have no idea on how to generate an image out of react-component, make the image as a link and create a preview link url for that, so that it can be shared to social media.

The component which I would like to post on social media is,

I'm working on it for the past couple of days, have not got any helpful information so far, as I'm new to the react front-end technology.

It would be highly appreciated if anyone of you could help me in this regard.

Thanks a lot for your time.

Note: I apologize if my post is not as per rules and regulations of Stackoverflow, I'm open for corrections. Thanks.