Realtime Notification App Using React and Socket.io

hello my friends today we are gonna create a small notification app using react and socket io we are gonna be using two different users and when we like comment or share any post it's gonna send an instant notification to the owner of the post it's super efficient no db no data consuming it's a real time tcp connection between the client and server ok i hope you will like it if you are ready let's get started this video is sponsored by stream stream helps you to build scalable chat or activity feeds for your application stream takes care of the security hosting and scaling so you can focus on functionality and build high quality apps you can create a fully customizable chat for your application using stream sdks check out their sdks for react react native flutter and native android and ios so check the link in the description below for more information and a demo ok guys i created a folder here which is client and inside i just created my react app i'm not gonna do this from scratch what we have here let's see we have only fjs as you can see it says only hello world and i added here our images we have some svg files here comments heart which is like button and other notification icons okay let's open the application as you can see we have only this text so what we are gonna do is creating here a container and it's gonna include our posts each post will have username avatar and post image but i'm not gonna copy and paste anything i just wanna do this from scratch that because when you watch any tutorials it's hard to follow when the instructor copy and paste codes so let's do this from scratch it's not that complex so what i'm gonna do is giving here a class name it's gonna be container and inside before creating our postcards let's create login page of course you can create here pages folder but as i said it's just a small application we don't need that i'm just going to create here let's say login div it's going to be on the input and button let's say placeholder username and a button and i will say login so let's give some styles to do that i'm going to create a css file so let's say new file and app.css okay we can use this file i will say import and app.css so let's see first what we have as you can see we have input and login button we don't need any password input that because we are not going to connect any db it's just a demonstration okay firstly i'm gonna center everything to do that we can use bodytag and let's say height 100 vh is going to be full screen body and i'm going to center everything align item center and justify content center like that what about logincontainer let's write here login and let's say height 50vh again i'm going to use displayflex but this time flex correction will be column i want this login button here so let's say display flex flex direction column like that and i can center everything again align item center and justify content center like that okay awesome so let's take care of this input quickly with 50 percent i will give some padding and i will give margin between this input and button so it's going to be 20 pixels something like that let's take care of our button with 50 percent again maybe around 60. it's not that important so let's say background color maybe maybe this color it looks nice of course i'm gonna change text color white okay let's delete this border none and i will give some border radius let's say five pixels okay nice but i forgot cursor pointer okay it's really minimal we don't need anything else so we can handle our username firstly i'm gonna create a new statehook for this input when we write here something it's going to change our state and i'm going to create one more state and it's going to update our user when i click this button it's going to update the actual user so let's do that i will say const username set user name and it's going to be use statehook and at the beginning it's going to be just empty string and i'm gonna create one more it's gonna be my user let's say set user and it will be empty string kk so what i'm gonna do is writing here on change event and whenever we change this input it's gonna update our username to do that we can use event here and i will say set state sorry set user name and it's gonna be event target and value like that i can close here by the way and when i click this button i will say on click it's going to update our user set user and it's going to be username whatever we enter inside this username let's try i'm gonna write here console.log and user i forgot here function i think yes it should be a function of course like that let's see again okay perfect i'm gonna open my console and let's write here something and i will login as you can see john is here and here is empty that because it's an empty string at the beginning okay perfect so after this login process i can display something else instead of login so we are going to have postcards which includes username avatar and post image and additionally we are gonna have a number it's gonna include our logo and notification icons let's do that i'm going to create here components folder components first one will be nabarro let's create one more it's going to be cart or postcard anyway let's create here our function first jsx file and css file bar css okay let's create function first and i'm gonna write here just number nothing else let's give some class name and let's import our css file import number.css okay i will do the same thing for cards quickly card.js or jsx and cut those css let's create function it's going to be cart and i will just write here cut let's import css file okay right now i can use these two components here what i'm gonna do is write in here a condition i will say if there is a user show me now bar and card component if there is no show me login page so i can cover here like that and here firstly i'm gonna open react fragments here and close again and inside i will see now bar component as you can see it's here and card component and it's here again okay as you can see it shows number and cut that because we have user but if i refresh we are gonna see this login page first if i write here something and login it's the same thing but when we use socket io we are gonna split this browser we are gonna open up new one so it might be a little bit confusing that because we are not going to able to know which user we are using to prevent this let's write here after cut maybe username spam i will say username and it's gonna be our username which is user let's take care of this app.css i can right here i will say font-weight bold and color will be again this green color c green and i will say position absolute that because i want to see this around here so if i say top 15 maybe and write 15 or 20 it's gonna be like that before these number end cards firstly let's take care of our container due here i'm gonna open app css again and after body i can say container it's gonna be 50 vh for example i know it's weird but it's not important don't worry about that it's just an example so i will give some border it's gonna be this color again i will say 0.5 pixels and solid it really doesn't matter okay something like that you can change the width so i can close this app and css file and i will close this card also i'm just gonna open my network okay firstly we are gonna have two main items first one will be our logo here and second one will be icons container so let's do that i can directly create here my logo and it's gonna be just spam i'm not gonna add any image i'll just say logo and llama app and after that let's create icons container and each icon is gonna include one icon and one notification counter here to do that i will create one more container and let's write here our first svg i will say class name icon image we are going to add our image later but first i will write here counter and let's say two it's just an example okay let's add our first image import notification from i'm gonna choose image folder here and notification svg if i remember correctly yes it's here svg okay let's use it here like that and let's see okay we can see that because it's white also but as you can see it's somewhere here i will come here height will be 50 pixels and background color will be light c green let's change this image size and we can see properly with 20 high 20 let's see okay it's here perfect but i wanna see all elements horizontal it's really easy you already know i think as you can see it's here i can center them align item center but i will say justify content space around so basically it's gonna give some space here at the beginning and ending let's change this text color it's gonna be white so what about this logo font weight bolts font size 20 okay so if i create one more icon here actually two more it's gonna be message and it's gonna be settings let's import them also actually i can copy and paste right now there is nothing important and it's going to be like that as you can see it's not horizontal let's change it icons and display flex of course we are going to change these counters they are going to be position absolute so we can see them around here top right of each icons let's write here icon and margin have 10 pixels so we can separate them a little bit and i will say cursor pointer like that okay so let's take care of this counter counter i'm going to give some width and height it's going to be 5 pixels because i'm going to give some background color and it's going to be red let's make it circle and i'm going to give some padding let's say 5 again okay like that i can center this number and i can maybe decrease font size let's do that font size 12 and display flags align item center just like content center like that i have so so let's change this position position absolute and remember if you are using absolute positioning the parent should be position relative okay top will be minus five right will be minus five like that maybe more space here okay it's better i think okay right now we can create our postcards i will close them and open up card css and jsx like that i can split them okay as i said we are gonna have two cards so we can use dummy data here i will say data and inside this data i'm gonna create two posts as you can see it has id username full name user avatar and post image we are gonna have just two of course you can increase them also it's not the important part so i can use that we are going to take them as props so it's going to be post and inside firstly let's create info container it's going to include avatar let's say user image and it's going to be pause dot user image and after that it's going to be span and i will say pause dot full name and after this div post image post image and pause dot post image and finally we are going to add our icons so i will say maybe interaction will have four icons image and card icon this time we can use our svgs actually i can just copy and paste them i don't want to waste time i just imported them from image folder let's use them first one will be hard here and comment share and info comment share info okay by the way let's close here let's try but of course we should pass our props first so i'm gonna go to app.js and i'm gonna pass my data items so let's import that import data from source and data remember what we have yeah okay it's not data it's posts it's gonna be posts from data so we can use those cards i can map through these posts and show my cards so i can write here posts dot map and for each post show me this card of course we should indicate here our key it's gonna be a unique key which is post dot id and i'm gonna pass my prop post equals post let's see i will log in and they are here awesome it's post image our icons monica's 10 and there is one more but we can't see that because our images are really big so we can give some styles i can close here and open up card component sorry css i can split here and firstly i'm gonna give some height for this card component 280 and for the info it's going to be display flex that because we are going to see this avatar and username in the same row here and i can center them align item center i will give some padding maybe font weight will be a little bit bolder and font size will be a little bit smaller i should change user image and post image first user image is going to be 30 percent it's going to be circle and i will say object with core so we can see our image better and finally i'm going gonna give some margin between this image and username like that so i will say pause image it will be a hundred percent it's gonna include all container and height will be 200 pixels like that if i say object fits and cover as you can see it's covering this container by the way why it's not circle ah it's gonna be height of course okay perfect let's change this container it was interaction of course display flags align item center and now i'm going to give some padding 5 pixels pixels from top and bottom but from left and right it's going to be 10 pixels for card icons with 16 height 16 and i'll say cursor pointer and finally give some space between each other margin rights time pixels oops what i don't margin right time okay nice but i can split this icon it can be here so let's give one more class here it's gonna be info icon so i can use it here and i will say position absolute and right will be zero it's gonna be here but i didn't save here okay as you can see it's not here it's here that because we didn't give position reality for parent let's come here and position relative and right now it's here maybe i can decrease this width and heights okay perfect so what i'm gonna do is sending notification for users for example i'm john and when i like monica's post she's gonna receive a notification here this counter will be one of course at the beginning they are going to be zero when i like this post is gonna be one and when she clicks this button she is gonna see some notification here john keller liked your post but before let's make it fancier when i click this button i wanna see it read to do that i can close here and i'm gonna create use statehook it's gonna be const liked and set liked and it's going to be you state hook at the beginning it will be false and i'm going to write here a condition for this heart icon i will say if light show me different image if it's not show me this image so i can copy this and paste here but this time it's going to be hard filled as you can see it's still same if i make this true as you can see it's filled so i can make this dynamic let's make this false again and let's create here an on click event it's gonna be handle notification maybe let's create this function const handle notification and i'm gonna set this light and it will be true i'm clicking as you can see it's red right now okay perfect so everything is ready to send our notifications let's create socket io server so let's go to socket.io we are going to be using the last version of this socket arrow so let's open up documentation as you can see socket io is a library that enables real time bi-directional that means we can create our socket server and we can send data to client site which is our react app and also we can send data from react app to socket server an event-based communication between the browser and server this library is awesome that because we are not actually fetching any data from any db any server we are just using web sockets and it's just like sending pings it's not consuming your server sources or client sources it's really lightweight and you are gonna see how easy to use it so basically we are gonna have one server and client side firstly let's create our socket server i will click installation and as you can see we should install this package first i'm going to create new folder let's close here and i will say socket and let's open up terminal and i will say cd sockets and firstly i'm going to initiate my node application to do that i will say npm and init dash y and it's gonna create our package.json here as you can see it's empty we are gonna have main.js file here and if i say yarn add or npm install socket io as you can see it adds our dependency here awesome so what else we are gonna need we can install nodemon that because when we make any changes inside our index.js it's going to automatically restart our application so i can write here start and nodemon and index.js comma here of course we don't have any index.js let's create index.js so if i write here for example console.log hello and i will save if i write here yarn starts or npm start it runs node mode here and it says hello if i change here and save again as you can see nodemon restarts our application again so we don't have to start this manually okay perfect so what i'm gonna do let's come here and we are gonna be using s modules or command.js you can use require or import whatever you want let's do that i will just copy this and paste here and if i save it's going to give me an error that because we are using as modules but our application is not supporting this to prevent this you can come here and say type module i will save and as you can see we don't have anymore this error as you can see it says we can write here a new option let's write one and it's gonna be course and we can write here any url with origin and it's gonna be http localhost and 3000. why i am doing this that because we can reach this server inside only our react application which is localhost 3000. remember our application here runs on 3000 so even someone tried to reach our socket server it's just gonna fail that because we let only this url and as you can see we have a function here when we connect our socket server we can do anything inside this function let's console lock this socket and let's see what we have console lock and socket or let's write here someone has connected and i can write this connect function inside to do that i will use socket dot on and it's going to be disconnect this name is important you cannot change it and whenever a user disconnects we are gonna write console.log someone has left okay right now we can use it inside our react application i'm gonna create one more terminal here and this time i'm gonna open react application cd client and we are gonna add one more package let's come back our documentation it was our server site and let's open up client site and installation and here we can use any cdn we can drag the fetch this socket library but we are not going to do that we will just add it to our application so we need this package i will copy and here i will say yam add and socket io client let's see how we are gonna use it i'm gonna click here and we are gonna import our package and after that as you can see we can initiate our socket let's do that by the way as you remember it's listening port number 3000 by default let's change it we already use that it's going to be 5000 for example so we can use this port number in our client site it's not going to be cart let's say app and let's create our function i will say import io from socket io client and i'm gonna initiate this like here of course we are gonna use our own server socket server localhost m5000 so let's create here use effect hook that because we are going to connect just once so i will say count socket and io it's gonna be localhost and 5000 http and my dependency will be an empty array that's because it's gonna run just once and as you can see someone has connected if i come here and open second tab localhost 3000 and as you can see someone has connected again if i close this page someone has left let's see what we have inside this socket console.log it's gonna be socket i'm gonna open my console here and as you can see we have an object here and it has an id it's really important we are gonna use this and connect it disconnected and other things here which are not important for now so what i'm gonna do we are gonna work with socket events what i mean by that for example when i click this button we are gonna send an event to our server we will say hey i like this post please let him know this is gonna be an event and our server is gonna take this event and it's gonna send this event to this user i know it sounds confusing but when we create our events you're gonna see how easy to use it so how we are gonna create and send events well there are some rules for that for example inside our socket server by the way if you watch my messenger tutorial you already know this slide i've explained before but i'm gonna explain again we are gonna have basically two servers socket server and client side which is our react app and for example in socket server if we want to send an event to client we are gonna use io key this function allows us to send any event to client site and if you want to send this event every online user we are gonna use emit and if you want to send this to one client one specific client we are gonna use two and inside socket id which belongs this specific client and emit again again we are using our function here and if you want to send everyone emit if you want to send just one client to an inside socket id and image remember we have socket id we console.log this and if we are taking event from client side from our react application we are gonna use socket.on it looks confusing if you don't know anything about socket io but after couple usage after just one application you're gonna see how easy to use so don't worry about that and you don't have to memorize anything when you need just come here and check and write your functions and after couple example you're gonna already memorize everything but for now you should follow this table okay and what about client side in our react application in any case we are gonna use socket function and if we want to send event to server we are gonna use emit if you want to take event from socket server we are gonna use on okay let's try first event after the demonstration you are gonna understand better so what i want is creating new events i can delete them and i'm gonna create new event here i will see let's check here we are in our circuit server and we are gonna send event to every client for example so we are going to use io and imit after connection i will say io dot imit and i'm going to write here my event name you can write here whatever you want first events for example and let's say hello this is test so how we are gonna take this event inside our react app let's check our table again so i'm gonna open up client site and we are gonna take event from our server so it means we are gonna use socket on and our event let's do that i will say socket dot on and what was the event name first event and here we can read our message and we can just console log message oops let's see i'm gonna refresh my page and open my console and as you can see hello this is test and it goes every single user as you can see it's really easy only thing you should do is writing here event name and your function or message whatever you want and remember if you want to send this to any specific user it's gonna be io and two and it's gonna be socket id i will just made up here something like that and emits and our event ak so how we are gonna know this socket id because if you check here as you can see it's just a random string it's not possible to know this id so what can i do let's delete here basically i can create online users array here let's say online users it's gonna be an empty array and whenever any user connects our server we can update it for example it was empty after one connection we can create any user here we can say user id for example one and socket id it's some gibberish string like that so in this case if we write here any user id it's really easy to find any specific user we don't have to know socket id when we like any specific user's post for example monica we can use her user id and we can find her socket id using this array it's going to be john for example and it's going to be monica something like that we can use this user id because we already know or it can be drake the username it can be easier i think monica and it's gonna be john yeah it's a better idea i don't want to confuse you anymore so we can filter our online users array we can choose this user once we have user it means we have socket id also and basically we can send our messages or notifications or whatever any event to this specific user i hope you understood so let's add our users i can create my functions here i will say const add new user and remember what we are gonna take we are gonna have user name and socket id it's gonna come from our client site and i'm gonna write here a condition if online users doesn't have any user like that we can add this unique user if user and username equals this username online users and push and i'm gonna add this user it's gonna be user name and socket id okay again if we already have this user inside our online users array we are not gonna add if i log in again as john it's not gonna create any other user that's because we are already in the array so i can do the same thing for this conduct method so whenever we leave our application we are going to delete this user let's say delayed user or remove user and we can just take shortcut id and we can just filter our array i'll say online user equals onlineuser.filter and i'm gonna filter this user if user dot socket id is not equal our socket id here double like that and we can take any specific user as i demonstrate you we can choose monica or john we are gonna take those users i will say get one user or get just user we can use username and we can find this user using find methods so i will say return online users dot find if its username equals our username here okay you are gonna understand better soon i will close here firstly let's add our function here when we connect to our server we are gonna add the user we are going to take events from client so we will use socket.on so i will say socket.on and let's write here event name maybe new user and we are going to take user name from client and basically we can run this function add new user function and remember we are passing our username and socket id i'll say user name and remember we have socket here so it's easy to find our socket id it's gonna be just socket dot id so what about here when we disconnect i'm just gonna remove my user socket.id it's not an event be careful because we are not taking anything from client site it's just gonna close the browser and we will remove that user okay so if i come here and delete here and send my user to server let's open up table again right now we are in the client site and only thing we should do is using sockets and we are sending event to server it means we are going to use socket.emit so let's write here after connection actually i can use here maybe use statehook it's gonna be now at the beginning and i'm gonna set my socket here set socket like that that's because we are gonna use socket in our nav bar also so we should pass this as prop here anyway we are going to do this later so i can create one more use effect here use effect and this time i'm gonna send my user to server in this case i will say socket dot imit and my event name which is add new user what was name okay just new user and i'm gonna pass my username which is user and my dependency will be socket and user in this case okay so we created our first event and let's create other ones to do that we are going to use this socket in our nail bar socket equals socket and also inside our carts that because we are gonna like or comment or share our posts we are gonna need this socket to send our events and also we are gonna need our user here that because when we send notification to other user it's gonna know our username okay what else here i'm checking i hope everything is okay so let's open up card component here we have post here and it's going to be socat and user so basically i'm going to create new socket event here remember we have handle notification function we are just setting like state but additionally i'm gonna say socket dot image and i will create new event and it's gonna be send notification so what we are going to send to socket server first one will be sender name and it's going to be our username remember we are taking from app.js it's our name second will be receiver name and it's inside our post remember i will say data and we have username full name you can send whatever you want but i'm gonna use this username you can use full name also post dot username and finally i'm gonna write here a type and i'm gonna take this as a parameter here type comma here why i'm using type that because when we click on like button it's gonna be type one let's write here function and i'm gonna copy this and for comment it's gonna be type two and finally for share button it's going to be type 3. let's see okay there is an error ok we are running this use effect when socket and user changes but at the beginning it's null that means there is no socket so basically you can write your air condition if there is a socket just send this event let's try again okay it works let's say john when i click this button it's gonna send this event and our server is gonna take this and send to monica only monica let's do that let's check our event name it's gonna be send notification so i can use it here and i want to check my table again we are in the socket server and we are going to take event from client so i will come here and again socket dot on it's gonna be event name and remember what we have here sender name receiver name and finally type i'm gonna cover them and use function and i'm gonna send this event to a specific user remember we are using io and two and socket id here and how i'm gonna take this socket id we have get user function so basically i can say const receiver and i can use this function it's gonna be receiver name and it's gonna give us the actual receiver right now i can use its socket id so i will say receiver dot socket id and image we are going to send our event and let's say get notification for example i'm just going to send sender name and type okay so let's use it in our client site this time it's not going to be app it's not going to be cut it's going to be navbar remember we are passing our prop i will say socket and i'm gonna create a use effect hook here use effect it's gonna be sockets here our dependency and let's check here we are in the client side we are taking event from server socket.on and event name here now we are going to take our data which includes standard name and type oops data and i'm going to create my function here so what i'm gonna do i can create new state here notifications and set notifications and each time we receive any notification i can just update that so let's do that notification sorry notifications and set notifications and it's gonna be you state at the beginning it's gonna be an empty array and here let's set notifications and i can set my data like that spread operator and notifications and data basically it takes every object inside this array but if i do that we have to write here one more dependency and it's gonna cause an infinite loop to prevent this what i can do i can delete here i can take previous object inside notifications and i can spread that so if you want to let's check our notifications will say console.log and notifications localhost 3000 and i will take this here like that i'm gonna refresh here and i'm gonna login john and monica okay i'm monica right now and i'm gonna like this post of course i should open console first as you can see there is nothing i will like and as you can see it updates sender monica type 2 if i click on comments there is one more monica type 2 and if i share there is one more type 3. and it's that easy so however i'm gonna show those notifications i can create one more div here so i'm gonna come here after those icons i'm gonna create new div it's gonna be notifications and i can map through my array which is notifications and it's gonna be a map and for each notification i'm gonna show different div but i'm not gonna write this here instead i'm gonna create somewhere here that because for each type we are gonna return different value for one we are gonna say monica like your post four two monika shaved your post something like that so let's create our function display notification and we are gonna have sender name and type and let's create here an action and i can write here my condition i will say if type equals one action will be liked as if type equals two action will be what was that commented and as if it's 3 action will be shared of course you can write here switch case block or you can just use ifs without else and finally i'm gonna return something and it's gonna be s pen and let's give class name maybe it's gonna be notification and i'm gonna write here sender name and action and your post oops backtick is here end of the text okay monica liked your post monica shared your post it's gonna be like that so we can use it here i will save and i can change their styles i will come here and for notifications remember it's our container i will say position absolute and top will be 50 pixels that because our number is 50 pixels remember here and it's gonna start from after 50 pixels here and i can say right zero and background color white and text color will be black font weight will be 300. okay it's not here something is wrong oh i forgot sending this notification okay it's here it's gonna be display flex and flex direction will be column like that and i will give some padding maybe okay as you can see we forgot again position relative for the parents okay awesome for each notification it's gonna be padding five and font size will be a little bit smaller like that i have some what we can do here we can hide this notification still and when we click this button we can open up again to do that we can create one more use state and it's gonna be open set open like that at the beginning it's gonna be false and when i click those buttons they are gonna open so basically i can create my condition here if it's open just show me these notifications when i click this icon i can set my state again let's say on click oops call the brackets first my function and i'm gonna say set open and opposite of open if it's false it's going to be true if it's true it's going to be false and for others this icon and this one you don't need for them but anyway i will click and as you can see they are here it shows twice when we refresh our apps john and monica i will like this post and comment and they are here nerves so what else i can do i can delete those counters for message and settings and for these notifications i can write here one more condition and it's gonna be notifications and length and one more thing i can do after this notifications i can create here a button and it's going to be mark as thread and i will give class name it's going to be notification button something like that let's change it here but first let's see of course i should say first okay it's here but i can change this a little bit with 80 percent i'll give some padding and margin top 10 pixels like that is enough item and when i click this button basically i'm just gonna remove all our notifications so i'll say on click it's gonna be handle read function const handle read and i will say set notifications again empty array and set open it's gonna be false we are gonna close our model by the way i can write here a condition i'm gonna say if notifications dot length bigger than zero that because if i don't do that even if it's zero let me do that john as you can see it shows zero but if i save this it's not gonna show up i have some let's try again i'm gonna refresh monica right way each time you should refresh your application otherwise it's gonna show up twice or three times maybe so i'm gonna like and comment as you can see it's here i'm gonna mark as red and we just removed all notifications awesome as you can see it's really easy we are not gonna do this for messages but you have already learned there is nothing complex only thing you should do is creating new notification sorry event and it's gonna be send text maybe and this time it's not going to be type it's going to be text and we are going to send this text to specific user and that's all seriously if you come here and say let's delete them and let's make this text for example and i'm gonna write here sender name and here let's write our message i'll say text and of course we should change our notification it's gonna be get text what was the name send text and get text it's going to be get text okay and if i go to cut and instead of send notification i'm gonna say send text and our text will be let's say hello this is chat message and that's all let's try refresh and here i'm gonna click and let's see as you can see monica hello this is chat and awesome it works like that of course you can create your inputs and chat ui and you can send your messages like that i will click here as you can see right now it's here hello this is chat message yes it works by the way i clicked here but we set light to prevent this i can say here if type is one in this case if it's like button we are gonna set our like and that's all i hope you liked it it's that easy if you want to learn more complex application you can check my messenger tutorial also and i saw many comments about these notifications and i just wanted to make something minimal like this application and in the future we are gonna create an independent chat application and it's gonna have all our zoom features okay that's all if you learned something new today please like the video and subscribe to the channel and you can support me using the join button or the link in the description below don't forget following lamadev social media icons i hope i will see you in the next tutorial goodbye you

Channel: Lama Dev

Views: 23,365

Keywords: react, socket.io, react notification, push notification, socket.io notification, react socket.io, react tutorial, react app, react project, realtime, instant notification, lama dev, react hooks, react.js, social media notification, tutorial

Id: 7vVqMR96T5o

Length: 66min 19sec (3979 seconds)

Published: Wed Oct 20 2021

Reddit Comments

[u/lpisme]

Lama Dev has walked me through a number of projects at this point and I'd say they're among my favorites for just getting to the damn point and coding.

This seems intriguing, thanks for sharing.

[u/-domi-]

I love working with socket. I think i'm a little too dumb for most server-client comms, but socket just makes it so easy to understand what the hell is actually going on. Thanks for posting this!

[u/corner]

Saving