In a world dominated by social media platforms, where ‘Stories’ have become an omnipresent feature, I found myself pondering - does my blog really need Stories? The answer, of course, is a resounding ‘fuck no’. But here we are, my blog now has Stories, and I’m not entirely sure why.
It all started when I was using my mobile internet provider app, and to my surprise, they had added Stories to their app. This was simply too much for me to handle. A mix of joy, wonder, and confusion overtook me. I mean, why would an internet provider app need Stories? It was at this moment that I decided, if they can do it, why can’t I? And so, the journey began.
Naturally, as a developer with a penchant for the absurd, I fired up my code editor and started coding, and my goal was to Stories to my blog. The reasoning behind it? That’s still a work in progress.
The process of adding Stories to my blog was surprisingly straightforward, thanks to the power of
communism open-source. Open-source tools and libraries are a blessing for developers. They save time, effort, and often lead to better solutions than one could come up with on their own. After a bit of research, I stumbled upon a fantastic package that seemed to be the answer to all my prayers - react-insta-stories. This package is designed to create Instagram-like Stories on React, which was exactly what I was looking for.
react-insta-stories package is incredibly versatile and customizable. It allows you to create stories with images, videos, and even custom components. You can customize the duration of each story, add action buttons, and much more. It was almost too good to be true. With this package, I was able to add Stories to my blog in no time, and with minimal effort.
Initially, I thought about creating custom videos using default backgrounds from stock video websites. I even went as far as creating a script using FFmpeg and Node.js to automate the process. However, after some consideration, I decided to drop that idea. For the first iteration, I decided to create a story for each of the last five blog posts on my website.
For the stories content, I decided to keep it simple. I would display a background image from a stock photo related to the category of the blog post, overlay the title of the blog post, and include a link to access it. This way, the stories would not only serve as a visual teaser but also as a functional gateway to the full content of the blog post.
To make it more organized, I grouped these stories by the category of the blog post. For example, if out of the past five blog posts, three were in the “coding” category and two in the “games” category, I would display two different story previews - those little image circles that you click to see the stories. Then, “inside” each of these grouped circles, you would click and see those stories.
This approach seemed more manageable and, let’s be honest, required less effort on my part. It also provided a way for visitors to quickly catch up on my latest posts in a more interactive and engaging manner. Not that I’m particularly concerned about visitor retention or engagement. I’m just adding this feature because, well, why not?
Once the decision was made (with a shrug and a “why not”), it was time to dive into the deep end of the coding pool. Here’s a brief overview of the steps I took, or rather, the rabbit hole I went down:
- Creating the StoriesPreview component: This component is responsible for displaying the preview of the stories on the main page of the blog.
- Creating the StoryImage component: This component is responsible for displaying the image of the story.
- Creating the StoryModal component: This component is responsible for displaying the story in a modal when the user clicks on the story image.
- Creating the useLocalStorage hook: This custom hook is used to manage the state of the seen stories in the local storage.
- Creating the useStories hook: This custom hook is used to manage the state of the stories.
The process of adding Stories to my blog was surprisingly straightforward, thanks to the open-source package
Was I adding Stories to my blog to enhance the user experience? lol no. Do I regret it? Well… no really. In a world where we are constantly bombarded with new features, updates, and innovations, it’s easy to get caught up in the whirlwind of “keeping up with the JS” 🥁.
So, here we are. My blog now has Stories, a completely unnecessary addition, but one that I can’t help but find amusing. I hope you enjoy this completely unnecessary, yet oddly satisfying addition to my blog.
See you in the next post!