How to Design a Notification System for your Application

My Courses
📘 T3 Stack Tutorial: 1017897100294.gumroad.com/l/j...
My Products
📖 ProjectPlannerAI: projectplannerai.com
🤖 IconGeneratorAI: icongeneratorai.com
📝 ThumbnailCritique: thumbnailcritique.com
Useful Links
💬 Discord: / discord
🔔 Newsletter: newsletter.webdevcody.com/
📁 GitHub: github.com/webdevcody
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody

[@7doors847]

Very insightful as always.

[@ultrahash]

Straight to the point😊

[@SeibertSwirl]

Good job babe!!

[@codinginflow]

Do big apps create notifications in the same process that creates the post/like/whatever or do they have some kind of background process for that?

[@WebDevCody]

They probably send off events to a queue or message broker like Kafka, then they process those events as they come in to send out websocket events to users and persist the event into a database somewhere for the user. Usually as a system becomes larger, to deal with scale you make a lot of things async and put it in queues

[@codinginflow]

Just signed up. Do you think it would make sense to make the Explore page the front page? Would make it feel more lively. And maybe "create test" button in the nav bar.

[@WebDevCody]

Yeah I could do that, that’s the second recommendation I’ve gotten for the home page.

[@premdasv8]

I've used this method in few of my projects at work. I was wondering how would you approach this on a huge scale system ?

[@roach_iam]

Mostly the same but with a queue

[@goncaloshred]

@@roach_iam how do you setup the queue? can you explain in simple terms? thanks

[@pablom2274]

@@goncaloshred making the notification table an array inside the user

[@elhadjbabacarcisse2868]

Always useful as usual. By the way, i think that the primary key in follows table should be a composite pk with both userId and targetUser, therefore it will be unique for every follow. If not, you might have multiple same pk if for example a user follows multiple other ones 😊

[@WebDevCody]

Yeah for sure

[@codinginflow]

I love these insights! Is there any type-safety for the "type" value?

[@WebDevCody]

Yea you can define the union type in the convex schema and then you’ll get ts types you can use throughout your code

[@fortunethedev]

this is great as always! when i use nosql i try to make the userId field an array of strings if i want to send that particular notification to multiple users (all followers) at once

[@ifeodubela7097]

Hahaha i just searched this exact title yesterday but could find a good video 😂

[@okadz7037]

ty so much u saved me

[@Omarwaqar-pt7wf]

How do you implement the rate limit to your server actions ?

[@AB-md4kt]

Great video as always Cody ! I have a question at 4:20 with the usage of Promise.all is it actually sending inserts one by one or does it do a bulk insert ?

[@WebDevCody]

Bulk insert

[@piyushsharma1518]

How will the notifications gets updated on the receiver's end whenever a new notification is added. Do we need to setup a socket for that?

[@ashishkumawat6110]

How does it update the client side about a new notification?

[@xixixao]

With Convex the useQuery is automatically a subscription, and the database tracks which queries need to be updated when a mutation happens, and automatically pushes updates to clients over websockets!

[@buzz1ebee]

Ah perfect. Another feature I'm just about to build! I've already set up a similar structure but just with dummy data for now. What are you building next? A tagging system for comments?

[@norbertaspapirtis2002]

how can you learn these system design decisions ? can you recommend a good resource ? great video btw.

[@prateektiwari4116]

I am good with the schema design but I find myself confused about how to transmit notifications to other users. Do u use sockets or polling or what.

[@WebDevCody]

I’d just use web sockets and send them. I’m using a real-time database so my users get notified when I update the data

[@bowaller6892]

Great video as always. Im not React/Next guy (I learn from your videos) and I want and try to use convex with Nuxt but fail. I really hope convex to had some example or docs about using with Nuxt.

[@roach_iam]

How would You handle localisation?

[@naughtiousmaximus7853]

Hey Cody, do you think NestJS offers a decent structure to learn OOP/ Dependency Injection through Typescript?

[@WebDevCody]

Last time I checked it seemed like a good framework to use if you want a predefined structure to your api

[@naughtiousmaximus7853]

@@WebDevCody thanks, love the videos btw, extremely helpful channel

[@Lemon-zg1lu]

thanks

[@theinappropriateguy5806]

How did you implemented the realtime?

[@shakapaker]

Would be nice to see how would you implement referral system

[@WebDevCody]

That sounds interesting, do you just mean a way to send an email to invite others, or do you get perks for the members joining

[@shakapaker]

​@@WebDevCody I meant a perks for member joining. For example, referral link to the home page and then when the user opens it, the "ref" is saved to cookies, additionally, we can save the referrer in user db on registration. So then we can give a bonus/perks, for example, upon purchasing or implementing smth more interesting...

[@alexmg404]

How do you deal with user uploads? I made a post on reddit about a recipe app I built that allowed a single image upload for each users recipe through my S3 bucket. Everyone was saying it was a bad idea to allow user uploads because the app would likely be defaced and abused. Has this been an issue for any of your projects that allow user uploads? Do you find you have to moderate content or deal with bad actors?

[@WebDevCody]

With my almost 200k subs I’ve never had a malicious actor yet, and not at my work either. Usually you’d use presigned urls so that only certain users can upload directly to your bucket. If you just have a completely public bucket where anyone can upload, yes then someone could just fill your bucket up with bogus files and cost you money. Then you wouldn’t have metadata to associate the user with the uploaded file. Anyway, I see no issue uploading directly to your bucket, but I’m not sure I fully understand your use case

[@alexmg404]

@@WebDevCody Thanks, that is really good to know. I believe I've implemented it securely. Authenticated users (via nextauth oauth) can upload a single image limited to 4mb to a recipe they've created. I am using presigned urls with checksum and userid in the metadata. It isn't an app I expect anyone to use, more of a portfolio project, but given my limited experience with AWS I was worried I may be missing something and end up with a huge AWS bill. When I posed this question on reddit the consensus seemed to be that I would risk having illegal images uploaded and I shouldn't bother allowing uploads in a portfolio project. I was surprised by the response, I figured who is going to make a github account just to sign in to my little app and upload such content, but it got me worried maybe they were right. I may need to stop seeking web dev advice on reddit. Anyway I appreciate you sharing your experience.

[@armeono]

I love it! I'm just wondering how to approach huge scale notifications? Say I have a system where 10k users have to receive a notification, using this methods I would need to create 10k rows in the notifications table, so how would you approach this?

[@JuMi896]

Topic of writing any highly scalable system is complex so it's not really easy to answer this fully. You always need to keep data about which which notification is for who and what user read what notification, that's unavoidable. As for handling higher loads you need to do scaling techniques. Indexes in db, sharding and replication, maybe separate read model optimized for read, or separate database optimized for reads. There are also considerations on how your notifications will be delivered to your clients and how will you scale that. Maybe there are system design questions on KZbin which can answer this in-depth for you

[@WebDevCody]

Adding 10k rows into a table shouldn’t be too hard for a batch insert sql query to handle in under a second. Now, if you need to send out websocket notifications for every single online user, then you may want to chunk those up into batches and process them concurrently with an external system

[@user-rj1eu6kp3u]

it would be awesome if you could also make a video on a comment system a bit more advanced with nested comments, likes, replies and so on

[@WebDevCody]

That might be cool

[@godkid.]

What stack are you using for your app ?

[@WebDevCody]

Next + convex

[@radimhof]

Ideally you would create the notifications in some background job after the thumbnail was created.

[@WebDevCody]

Why when I can create both the thumbnail record and notification record within milliseconds apart? What will a background job achieve other than added complexity?

[@durgeshpandey9456]

I built something similar in one of my last workplaces. I am Lead Backed Dev at my current workplace. In my case, I wanted the notification to also pop up when published, which I was able to achieve fairly easily because of an open websocket connection when someone was on the application. I don't know if it was the best approach but I simply published an event on the socket and the user then followed the same flow as yours for viewing. Cheers man. You've been doing great work.

[@iUmerFarooq]

Is this real time? And what are you using for notification WebSocket?

[@WebDevCody]

Convex

[@iUmerFarooq]

@@WebDevCody will you make one using WebSocket please.

[@cas818028]

Love the bell icon notifications, did I inspire you? ;)

[@WebDevCody]

I honestly don’t remember if you left a previous comment; I think most apps I’ve used have the bell icon

[@gorkemeldeniz9579]

its kinda you built your own web hook system?

[@WebDevCody]

I’m not sure how you got that from the video; nothing webhook related in this video

[@anonanon7368]

Wouldn't this be better if you used a 1-to-many relationship instead of a 1-to-1?

[@WebDevCody]

Possibly, but how would I track of a user read the message? That would involve adding another table anyway

[@testnet1029]

Big thanks Cody! I want ask a question at kzbin.info/www/bejne/eqOmgph_aLykfJI, how was api.notification.getNotifications work? are you setInterval for it?

[@ifeodubela7097]

This doesn’t appear to be a realtime update

[@WebDevCody]

It is because of the real time database I use

[@ifeodubela7097]

@@WebDevCody ahh I see! This is the reason why I’m enjoying Supabase at the moment; realtime updates.

[@WebDevCody]

@@ifeodubela7097 sorry I mean I have real time updates in my ui. I use convex which is a real time database which sends websocket events when data updates

[@theinappropriateguy5806]

.