How to Design a Notification System for your Application

so on this other side project I'm working on I added the ability to follow other content creators and now I just recently added a feature where when these content creators who you follow were to publish a new thumbnail you'll automatically get a notification up here where you can go and you can view the thumbnail if feedback and vote on your favorite thumbnail so I figured this would be a good video to just kind of walk you through how I set this up how I designed this in case you also have a social media type of application where you need to notify people when their friends or their followers do stuff in your system so I'm going to create a thumbnail test I have a title set up here and I uploaded three very similar but subtly different thumbnails just go ahead and upload this test and when I do this that should notify everyone who's following me that there's a new thumbnail that people can comment on okay so I logged out and I logged back in as a different user who is following my other account and notice here we have this Bell icon and we also have a red dot so if you click on this you'll see that we have a notification that showed up for this user because this user follows my webd Cod user right now the message is in an unread State and when you click on the read button it's actually going to mark it as red and it's going to navigate you to the thumbnail so let's just go and click it that'll take us to the thumbnail I can go ahead and vote on which one I think is the best I can leave a comment but if I already go back to my notifications notice that this red dot is gone and also this changes to a view okay so that's what I'm going to walk you through how I implemented this feature in my application and uh if you want to do it for yourself in your app I think this approach worked pretty well so I figured using ER diagram might be the easiest way to explain this in my system I have a users table and those users can follow multiple other users right so there's a follows table which kind of links users to other users notice that there's a user ID in the follows table and a Target user so this is basically saying if user a follows user B then we'd have a here and then they would follow Target user B the third table over here is called the notifications table so this is basically when someone creates a thumbnail or someone leaves a comment on your thumbnail I create a entry in this notifications table I put the user ID of who that notification belongs to I put the user ID of who that notification was created from I also put a resource ID so for example a thumbnail ID so when you click on the read button it knows to take you to that thumbnail and then also a type right so this is related to is it a comment is it a like or is it someone who created a new thumbnail that is asking for you to review so using these three tables alone is enough to create a notification system um which you saw in my little demo that I did here notice that in this notification we have the name of who notified you of this so Cody uploaded a new thumbnail test and again that's because we store the from here in this example type is probably set the thumbnail because someone just created a thumbnail and I use type to show a different icon here I use it to change the title and then resource ID is when you click this view button it takes you to that thumbnail ID and then something else I totally forgot to add in here is is red which is a Boolean okay and that's to keep track of if someone has opened that notification yet if they've clicked on this link that I showed you and I set that the true to know if you viewed it or not so now that we have that if you look at the code I'm using convex for my database but this applies the same as if you're using postgress or if you're using basically you have a table that has those properties you have the types here I have thumbnail you have vote and a comment you got the from user you got the who owns the notification user is red and then the resource ID is actually called thumbnail ID in this example so let's look at how this kind of works I had this create thumbnail method and this is called when me as a user I log in I want to upload a thumbnail Tesla like I did on my demo and we should have access to the user ID who's trying to create the test okay so what we do is we first look at that following table that follows table and we need to get all of the entries who are currently following me as a user right so look up all the target user IDs using that resource user ID and that'll get back everyone who follows me and then I just Loop through and for every single one I create a notification and store that inside that table okay and so now after I upload my thumbnail test I should notify everyone who follows me that's how basically it works it's super simple to um get set up I also have it on comments so when someone leaves a comment mment on a thumbnail same idea I basically say if the person who's leaving the comment isn't the same user ID of the thumbnail then go ahead and create a notification make sure that the from user is from the user who actually invoked this back in uh inpoint and then make sure the user it belongs to is the person who owns that thumbnail that might have been kind of confusing but basically if I were to go in and explore any of these that is going to notify the person who owns this thumb thumnail and it's going to create a notification for them as you can see right here and now this is going to be a type comment so it's going to change the way it looks in their notifications page so this is kind of the approach that you take anywhere in your system that you want to create some type of notification when someone you follow creates a resource or does something you can just create a entry in the notifications table and that'll show up on their notifications page so the last thing I do want to show is on the notifications page I have this button that says read okay so that was basically up here you saw that this used to say read and now it says view when someone has not read the notification so if notification red is false when they click on this button we're going to go ahead and Mark it as red and then we're going to redirect to the resource ID or the thumbnail ID and then also we toggle the message and the styling of the button based on if the notification has been read or not that's basically how this page works when it first loads it's going to grab all the notifications that belong to me as the authen indicated user and then I Loop over all those and just create some notification components here which shows those buttons that will say read or view depending on the state of the isre so that's basically the application and how I set up notifications again if you want to log in to thumbnail critique.com and follow my account you can do that and it really helps me when I make my thumbnails you can go through here and you can vote on them from what I've seen there's other services out there that kind of do this but a lot of the time it's after the fact so after you've already published your video it kind of rotates through your thumbnails and tell you tells you which one's the best I'm kind of doing a different approach where I want that feedback before I go live because honestly you only have a couple of hours to maybe a day to make sure your thumbnail and title's good before your video just kind of dies off in the YouTube algorithm so I think it's better to get that feedback way before you publish the video um versus after anyway hope you guys enjoyed this overview if you did give me a thumbs up leave a comment if there's a different way that you like to set up notifications in your systems and like always have a Discord Channel you guys are welcome to join if you want to find a place to kind of hang out and talk to some of the developers the links to this application and my Discord are in the description below have a good day and happy coding

Channel: Web Dev Cody

Views: 17,170

Keywords: web development, programming, coding, code, learn to code, tutorial, software engineering

Id: DrCQeI3WqF0

Length: 7min 9sec (429 seconds)

Published: Fri Feb 09 2024