{"id":390096,"date":"2024-06-29T09:01:45","date_gmt":"2024-06-29T09:01:45","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=390096"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=390096","title":{"rendered":"How to create LinkedIn-like reactions with Serverless Redis<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

Originally posted on\u00a0DEV.to<\/a><\/p>\n

As a side hustle, I teach tech recruiters web and software development technologies using plain English. It helps them with understanding job specs and resumes and it makes all of us, tech people, happier.<\/p>\n

I run a weekly newsletter and often get feedback from recruiters via email or LinkedIn DMs.<\/p>\n

I thought that I could try to collect feedback using the \u201cReactions\u201d feature just like LinkedIn or Facebook does. It\u2019s not as informative as personalised messages but is a simple feature that may incentivize more people to provide some general feedback.<\/p>\n

Either way, it\u2019s worth trying and as a software developer, I can\u2019t wait to implement it.<\/p>\n

This tutorial is about implementing a feature that will be used in real life on my project.<\/p>\n

Planning<\/h4>\n

As with any feature or project, we start with the planning phase.<\/p>\n

I am going to stick with LinkedIn-like reactions because they are more appropriate for the type of content I post.<\/p>\n

<\/figcaption><\/figure>\n

I will use the Like, Insightful and Curious reactions and will substitute them with \u200b, \u200b and \u200b emojis respectively.<\/p>\n

My static website is built with Gatsby. I do not use a database but I need one to store reactions. I need to decide what database to use.<\/p>\n

I deploy with Netlify and I use functions for backend related functionality. That means that I go serverless. Ideally, I need a serverless database too to not have to deal with deploying my own DB or overpaying for PaaS with fixed plans.<\/p>\n

As of writing this article, I am using Netlify’s free tier and can easily go for more features with a paid plan at a very good price. Using a reasonably priced database would be a perfect complement to my current tech stack.<\/p>\n

These are the tasks:<\/p>\n

    \n
  1. \n

    Research database options.<\/strong>
    I need to find out what serverless databases exist and choose one.<\/p>\n<\/li>\n

  2. \n

    Create a Serverless Backend with functions for:<\/strong>
    — storing reactions and incrementing\/decrementing the count
    — fetching reactions by a post id<\/p>\n<\/li>\n

  3. \n

    Create the «reactions» component.<\/strong>
    Gatsby is based on React and I will build a simple \u201creactions\u201d component.<\/p>\n<\/li>\n

  4. \n

    Put it all together to make my static website a little bit dynamic.<\/strong>
    Static websites can have dynamic features and it\u2019s what makes them, static site generators so incredibly awesome.<\/p>\n<\/li>\n<\/ol>\n

    In this tutorial, I will focus on the first two tasks. The \u201creactions» component implementation you can check in the\u00a0source code<\/u><\/a><\/p>\n

    Research<\/h4>\n

    This second phase in Software Development Life Cycle (SDLC) is named Prototyping but I call it Research in this tutorial because I will skip the proof of concept (POC) part.<\/p>\n

    Research is always fun because it provides a great opportunity to learn about new technologies. While this process is interesting, it can also take a lot of time if we do not make our research more specific.<\/p>\n

    SQL and NoSQL are the most common database types. The choice isn\u2019t difficult if we know what data will be stored. Let\u2019s quickly take a look at what data structure we will have.<\/p>\n

    Every\u00a0post has a set of reactions<\/strong>\u00a0and we need to\u00a0count<\/strong>\u00a0those\u00a0reactions<\/strong>.<\/p>\n

    Since I simply want to get an idea about how people react to my posts, I will not require them to log in or limit the types of reactions.<\/p>\n

    Based on the above, our data structure could look as follows for a post with 3 likes, 12 insightful and 7 curious reactions:\u00a0{ \"like\":3, \"insightful\":12, \"curious\":7 }<\/code><\/p>\n

    A NoSQL database looks like a good choice for storing and manipulating a data structure like the above.<\/p>\n

    I immediately thought of MongoDB and Redis. However, based on how we will manipulate data, namely persist it once and then increment or decrement certain values, I decide in favor of Redis.<\/p>\n

    The reason being is that Redis has built-in and performance-optimized commands to support what we need.<\/p>\n

    Besides that, I found a serverless Redis database\u00a0Upstash<\/u><\/a>\u00a0which looks simple and has reasonable pricing including a free plan. I like starting free and paying as I scale.<\/p>\n

    Note that we are using Redis as a\u00a0primary database<\/strong>. Redis can be configured to write data to disk which provides a degree of\u00a0data safety<\/u><\/a>\u00a0comparable to what PostgreSQL offers.<\/p>\n

    Redis solves a much wider range of problems than just in-memory caching and can be used either as a primary database or as an additional database for solving problems that other databases struggle with.<\/p>\n

    I like that Upstash\u00a0enables persistence<\/u><\/a>\u00a0by default keeping data both in memory and disk. This removes the headache of configuring things which would be an overhead for a task like this one. This is why I always use serverless and PaaS whenever possible.<\/p>\n

    To sum up this part, let me share with you an interesting\u00a0free e-book<\/u><\/a>\u00a0called \u201cRedis in Action\u201d packed with valuable information and use-cases for Redis.<\/p>\n

    Serverless Backend<\/h4>\n

    I will use Netlify\u2019s serverless functions with Node instead of creating my own backend. You are free to use any backend architecture.<\/p>\n

    The easiest way to connect Redis with Upstash is to use the\u00a0redis-client<\/u><\/a>\u00a0as described\u00a0here<\/u><\/a>.<\/p>\n

    First things first, we need to create a Serverless Redis database following this\u00a0Getting Started guide<\/u><\/a>.<\/p>\n

    Please, note that I leave out the\u00a0Strong Consistency Mode<\/u><\/a>, because Eventual Consistency is suitable for my task.<\/p>\n

    This is the schema for naming the keys:\u00a0post:{id}:{reaction}<\/strong><\/p>\n

      \n
    1. \n

      post:{id}:like<\/strong>\u00a0->\u00a0post:856f9d0a:like<\/code><\/p>\n<\/li>\n

    2. \n

      post:{id}:insightful<\/strong>\u00a0->\u00a0post:856f9d0a:insightful<\/code><\/p>\n<\/li>\n

    3. \n

      post:{id}:curious<\/strong>\u00a0->\u00a0post:856f9d0a:curious<\/code><\/p>\n<\/li>\n<\/ol>\n

      We could go with the most basic kind of Redis value known as\u00a0Strings<\/u><\/a>. But we\u2019ll go with\u00a0hashes<\/u><\/a>\u00a0because we want to store objects as value and it is advisable to\u00a0use hashes when possible<\/u><\/a>.<\/p>\n

      This is how we do it for a given post ID:<\/p>\n