Devlog #3: Comments and Notifications

Over the last two weeks I kept working on the social network I'm building as my final project for The Odin Project. In the previous devlog I added editing and deleting posts, and likes.

This time it's two things that go together: comments, so people can reply to a post, and notifications, so you know when someone interacts with what you posted.

Note

If the player doesn't load, you can watch it on YouTube, or the vertical version as a Short.

What's new

  • Writing a comment: every post has a comment box.
  • Editing your comments: in place, with your text already filled in.
  • Deleting your comments: with a confirmation, same as posts.
  • Like notifications: when someone likes your post.
  • Comment notifications: when someone comments on your post.

Comments

Every post has a comment box under it now. You write your comment, send it, and it shows up right away with your name and the time.

Your own comments have an edit option. It opens the same box, already filled with what you wrote: change it, save, and it updates in place.

Delete works like it does for posts: it asks you to confirm first, and then the comment is gone.

Notifications

Now the other half. You get a notification when someone likes your post, and when someone comments on it. Each one tells you who it was and which post it was about, and clicking it takes you to that post.

How it works underneath

A notification sounds simple, but it points at three things at the same time: the person who receives it, the person who caused it, and the post it's about.

So in the database, the notification table points at the users table twice: once for the person receiving it, once for the person who caused it. Same table, two different roles. That's the part that took me a moment to get right.

Then there's the type column, which says whether it was a like or a comment. That's what lets one table cover both, instead of needing a separate table for each.

Three rules

One decision I like: saving the notification can never break the action. If it fails, your like still goes through. The notification is a side effect, not part of the deal.

And two small ones: you never get notified about your own likes, and liking the same post twice doesn't send a second notification.

Stack

LayerTechnologies
FrontendReact, React Router, React Query, CSS Modules
BackendExpress, Prisma, PostgreSQL (hosted on Neon)

Follow the project

This project was made with React and Tailwind.

© 2023 Pablo Pérez. All rights reserved.