How to Generate Dynamic Social Preview Images? | Frontend System Design | JavaScript Problem Solving

Making a product more appealing to the end users is a never-ending process. We need to constantly experiment, try new things, and grab the low-hanging fruits to achieve success. I faced one such situation while working on the Devtools Tech platform (https://www.devtools.tech). I wanted to make the social previews that appear on websites like Twitter, LinkedIn, Facebook, and so on richer, context-aware & appealing. This video is about what possible solutions I came up with and what was the final implementation.

Do check out the video and share your feedback! :D

00:00 Introduction
00:36 What are the Dynamic Social Preview Images?
01:09 Social Preview Live Example
02:31 Different Possible Approaches
05:06 Finalised Approach
05:19 Imagekit.io Introduction
06:04 Final Implementation
08:56 Live Demo
10:06 Recap
10:46 Outro

You can support our channel via:

https://rzp.io/l/support-devtools-tech
https://devtoolstech.gumroad.com/l/support
https://www.buymeacoffee.com/yomeshgupta

************************************************************
Devtools Tech is a YouTube channel started as a collaborative effort among like-minded engineers to provide high-quality programming tutorials for free. We firmly believe in knowledge sharing and easy access to quality content for everyone. Hence, this channel is an effort to give back to the community and a step toward our belief -- "We rise by lifting others".

Interview questions: https://devtools.tech/questions/all?ref=dt-yt
Interview resources: https://devtools.tech/resources/all?ref=dt-yt
Hidden Gem: https://devtools.tech/crazyones

Team Members:
Yomesh Gupta
Portfolio: https://yomeshgupta.com
LinkedIn: https://www.linkedin.com/in/yomeshgupta/
Twitter: https://twitter.com/yomeshgupta

#javascript #developer #web #frontend #interview #interviewquestions #devtoolstech #code #programming #developement #eslint #coder
***********************************************************