Add Like Post Feature

[aaronmbos]

Overview

The goal of this PR is to provide blog readers the ability to like a post. The implementation of this feature was constrained by the following requirements.

• Allow users to like "anonymously"
• Limit duplicate likes to the extent possible
• Spend as little on the API and database as possible (ideally free)

Implementation Details

Client

The notable change from the client perspective is the introduction of a new row of buttons to like, share or subscribe. The share and subscribe we're previously anchor tags in the footer paragraph. Moving them to buttons provides a better experience.

The request functionality is managed with the SWR library, which handles much of the complexity with data fetching and mutating.

API

Since this is a NextJS app hosted on Vercel, it seemed logical to use the serverside API functionality of NextJS. This involved creating a new file to handle API requests for reacting to posts. I left the implementation relatively open to adding more reaction types in the future.

The API required three possible methods GET, POST, and DELETE which are used to manage all of the functionality for showing reaction count, determining if the "user" has liked the post already, and reacting.

Database

The database was where cost could have come into play. After doing a bit of research, I decided to go with CockroachDB. There were a few main factors that played into this decision.

• Serverless option with generous free tier
• Postgres compatible (I can use existing local Postgres database for local dev)
• Great documentation
• Option to scale up if needed (I don't expect to early on)

The database requirements were pretty light for this feature. I needed a single table to store the post slug, reaction type, and client IP address. With this information, I can determine if the requesting IP address has liked a post before along with like counts for a particular post. The primary key is a composite key of all three columns.

post.reaction
slug	varchar(128)
ip_address	varchar(64)
reaction_type	varchar(64)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
personal-site	✅ Ready (Inspect)	Visit Preview	Jul 31, 2022 at 11:16AM (UTC)