The Power of Simple Code: Unlocking Complex Functionality with Firebase and React Hooks

One of the most rewarding feelings as a developer is seeing a seemingly complex problem solved with just a few lines of code. This was exactly what happened when we utilized Firebase and React hooks to create a powerful and efficient application. The simplicity of our approach was astonishing, with only three lines of code required to achieve functionality that would normally require managing sockets, I/O, and headaches. It's truly amazing to see how such a straightforward solution can work so well.

Layout Adjustments

Unfortunately, the layout of our screen is not ideal, as it seems to be frozen on one side. To rectify this, let us switch to a new layout where Firebase takes center stage on the left-hand side, while we continue with the rest of the application on the right. This will allow us to seamlessly display the database updates in real-time without requiring any refreshes.

Adding Data to the Database

With our layout adjustments in place, it's now time to add some data to our Firebase database. We'll start by adding a new document containing an avatar source that we've received from Instagram. The handle, channel name, and other relevant details will be filled in as well. Once this is done, we can move on to the next step of creating a social media post.

Creating a Social Media Post

We're now going to create a new document that represents a social media post. This will contain information such as likes, shares, and a song that was used in the post. The likes and shares will be represented by numbers, which we'll need to ensure are accurate. We've also received a URL for this post, which is quite long.

Real-Time Updates

To keep our users informed, we want to display these updates on the screen in real-time without requiring any refreshes. This means that when new data is added to the database, it should appear immediately on the right-hand side of the screen. Let's test this functionality by hitting save and then scrolling through the updated content.

Stress Testing

To ensure our application is working as expected, let's put it through a stress test by refreshing the page multiple times. This will allow us to verify that our data is being displayed correctly in real-time without any issues. And indeed, everything seems to be working smoothly!

A Break from Development: Watching Soccer

After completing our Firebase database setup and testing, we can now take a break and enjoy some soccer. Specifically, we're going to watch the Bayern Munich vs Barcelona match, which is already underway. It's always exciting to watch live sports, and this match promises to be an intense one.

Deployment Time!

Now that we've completed all the necessary steps, it's time to deploy our application to a production environment. We'll need to ensure that everything is working as expected before making any further changes or additions. With careful planning and execution, we can bring our app to life and share it with the world.

"WEBVTTKind: captionsLanguage: enpop that up so we'll we'll do that so now we're on firebase we're going to hit create database and here make sure you choose start in test mode hit done and then just choose done it doesn't matter what location it picks it's going to be a good location by default damn i see it's our stream is like starting to peak again and we're getting more viewers and thank you guys so much we are currently at 330 and we broke 16 000 views so thank you guys and if you're enjoying this so far make sure you hit the like button so it goes out to more people exactly guys we ask you smash that thumbs up nice so with that said now we're inside the database so the database follows a collection document collection document and repeating structure right a collection is simply a list it's like an array right so let's go ahead and start that um with that collection by going ahead and creating a collection of rules right so let's go ahead and say rules yep so this is going to be where the videos are so reels and we'll hit next auto id yeah so this is actually going to be the first rule so in order to understand what fields we need what we're going to do is we're actually going to yeah let's go to app.js let's go to apps and let's use the app.js props that we actually we just use video card props and i'm just gonna i'm i i will show that in just a second but the things that we're gonna be using here for the video um the fields what fields are we gonna need so i can visually show it here and then we can show it through props so i imagine go ahead okay so channel of so the channel that's right here yep that channel sanger got it what else and then we're gonna have the avatar source so the avatar image and that's the image yep yep we have the song that's playing okay so that's what brings the ticker yeah exactly and we have the url of the actual video itself okay otherwise the video would not be here at all yep got it and then we have the number of likes and the number of shares in the bottom right okay so those are all the things that we're going to need to feed our database when we create a dummy we're going to basically create this through the database got it and then props let's look at app.js quickly before we do that so okay yes there we go and you can see here guys we have the props right so here we're manually passing in those props we've got the channel so when you say okay i got it yeah i was just gonna say if you could just say what the props are but here the channel is a prop the avatar source is a prop and video card is the component yes exactly so rather than hard coding these values like we're doing here we want to be able to pull them from the database so let's go ahead and add a document which fits this structure so for the first field let's go ahead and do a field of channel got it okay so yeah so basically we're gonna go channel and boom and i will also post the same values avatar source and all of this is string because i actually see that he has a string data type there so i'm just gonna keep it as a string uh song this is also a string uh url is going to be actually let's go so this is going to be a url which is the video url right yep cool so i'm going to paste that here likes are going to be a number so i'm going to say likes we're going to make it a number we're going to give it just 950 likes and then shares is also going to be a number so i'm going to go ahead boom boom boom uh whoops and i'm going to just copy this and paste it awesome so that record is now made and i just want to show you guys when sunny was talking about how the structure is so here you got your you got your uh collections inside of the collections you have documents so for example hey basically in english i'm saying hey this this is where all my reels are this is a folder that has all my reels then when you go inside of that folder that literally has like all of your reels right and then it's like so in your actual local computer you would have a folder called photos and then inside of there you might have like all your photos so just like that we have all the reels here now once we go inside of a particular reel all the data associated with that is right over here so what does that data mean for example hey here's the url for that so i'm going to copy this url we're going to open a new tab press and type it in and then boom this is what actually comes up yeah yeah so this is you know the data that's part of it exactly so a really nice explanation there guys and like you can now see the exact way that we've mapped the uh sort of the props that we were previously passing as hard-coded values into the database so that we have the same structure right now with that said we now need to pull that information from the database so we're going to show you a really nice way of doing this and also the added bonus here is that you actually go ahead and get a real-time function you get real-time functionality here as well so the first step to this is we need a sort of variable to keep track of all of the real all of the rails right so let's go ahead and create one so remember in react to create a variable we use use state so we're gonna we're gonna go ahead and say const and we say rules and we're gonna say set rules right and then we say use state and then the initial value here is going to be an empty array because we're going to assume that we have zero rules by default when we begin this process yeah so we're going to do this and we need to import use state at the top okay so like this now what we're going to do is we are going to go ahead and actually add a use effect now i will explain what a use effect is and it's basically going to allow us to run a piece of code when the app component loads and we want to run this once because we just need to set up a listener to the database one time and we don't want it to keep firing off we just want it to happen once all right so we've gone ahead and imported it and in order to write a use effect we write it over here so we say use effect right and then what happens is it takes a function so it takes a function and then it takes a second argument which is the dependencies so by default by passing empty dependencies like this what this is saying is that the app component will run once when it loads and never again right so it won't run once when it loads and it won't run again but if i had like for example a con a variable inside of it like name or like age or something like that whenever these it will run once when they when it loads they'll also run when name and age change which is why it's known as a dependency okay so if we by default right now we just want to run once when it loads so we're going to basically go ahead and do this so what we now need to do is import that db from our local firebase file so here we do import db from our local firebase not the module firebase and then we're going to go ahead and do db dot collection because remember that collection that we created on firebase was reals okay so we actually had a collection called rules and then what we say is on snapshot so this is the magic right here so on snapshot is saying go ahead and give me like imagine you've got a camera and you pretty much take a picture of that rails collection so that that list of remember kazi said it was like a a folder right with all the rules inside of it so imagine we could take a picture of that folder at that exact point in time so that's the snapshot right that's the snapshot now the the beautiful thing here is that the snapshot whenever something is added whenever something is changed whenever something is removed the snapshot is refired off and we get a fresh snapshot right so we get a fresh snapshot and then that goes ahead and gives us the most up-to-date value of what the rules folder or collection looks like okay yep so with it and i just wanna and i'll keep visually adding like more technically what he's accessing so when he's saying hey give me the reels folder i mean that's how i think in english you know if you like give me the reels folder boom that's what's giving him and then on snapshot is just a fancy way of getting everything in real time yeah exactly exactly that guys it's fancy way of getting everything in row time so now what we're going to do is go ahead and actually um set the rules so we're going to set the rules to a value right and what value are we going to set the rows to i basically want to go through all of the rows inside the database so here set rows i'm going to go through all of them so i'm going to say snapshot.docs so that's going to go ahead and go through that list of rules right snapshot.docs and then i'm going to say map so it's right through every single one so snapshot.docs returns like this returns an array yep okay so this guys is basically everything inside of here exactly and then the dot map thing will allow you to actually like loop through one by one so like if this is the first item and this will be the second reel and the third reel and a fourth reel all that exactly that we want to basically map through them and basically return it in a structure that is good for us right so in this case what i'm going to say is map through every single document and basically go ahead and get the doc dot data right and the doctor data is all of the properties associated to that one document so the app was okay got it yeah couldn't see some of it so now we could see it yeah okay so basic go ahead go ahead finish your thing uh so all of these so if you have doctor data so the avatar source the channel like share song url anything associated with that document that we're mapping through or iterating through it uh we're gonna get that information back so i'm just gonna again visualize everything he's saying because this is where it gets really dense and i just want to empathize for everybody who's watching because it always would kill me when i would be going through this so reels gets you this all right then when we do snapshot.docs that gets us everything here yep then when we do dot map then each dock here allows us to loop through it okay and then when we do doc.data it gets you so when you're looping through it gets you this particular dock in the first loop and then all the data here and then this data here is actually uh at object yes it's just filled with key value pairs yeah exactly so you end up getting as it maps through everything you end up getting an array of objects and then that goes inside of our rails variable yep so the the final thing that you're going to get is an array of objects so for example here's your first reel and this is going to have does this this also has an id right uh no so we're just pulling the data not the ids yeah okay so we're not pulling okay cool so the first reel is essentially gonna have for example you know channel i'll just put channel for now as clever quasi okay yeah and then a bunch of other stuff um yeah and then the second one doesn't exist yet so this entire thing right now would look like this for you know again this is just an example but this is what it would look like an array with one item exactly and then as you add the second third document you would get an array with two items three items etc all right so nice awesome logan just dropped by he goes hey guys in office today just wanted to stop in and support you thank you so much and then he says the drawing is helpful hopefully this is helpful for you guys nice awesome um right so now what we're going to do is reels we'll now actually if we've done everything correctly we'll have all of the information that we want right so this is the moment of truth now so what we're going to do is we're going to go down here we're going to delete this line and what i'm going to do is rather than having this hard coded out like this right so rather than having all of this stuff hard-coded at the bottom so we have like all of these uh video cards so let's go ahead and remove these we have everyone this video called this video kind of when you get rid of that get rid of that instead of doing this what we have right now what i'm going to do is i'm going to say so i'm going to do some java jsx so i'm going to go ahead and do this i'm going to say reals.map right and for every single reel i want to return a video card right so i want to return a video card so i want to return a video card like this right but look what we do here that's different right so i don't want these values to be hard-coded i actually want to pull the values from it so here we can destructure the real so i can actually go ahead and pull the rail apart and say get me the channel the avatar the song the url the likes etc from that row so i can go ahead and do this i can actually pull it apart and i can do that all right now what i can say is rose dot map uh yep so i don't know why it's freaking out yep so rose i'm in the video card component like this now here i can actually go ahead and say this should be the channel that we're getting back from the db this should be the avatar source the avatar source this should be the song and these are mapping to the database this should be the url from the database so it should be the url this should be the likes and this should be the shares like that and what i can do now is i can get rid of our hard coded value so i can actually go ahead and highlight a hardcore value and delete a hard-coded one so at this point in time guys we have no hard-coded stuff here so you can actually see for yourself there is no hard-coded stuff saying that this me like this is the channel name of blah blah we're mapping it from the db okay and what we can actually do to prove this is we can go ahead and save and we can go back to our app and we can if everything was done correctly this should map to the database it should listen it should get all that information and it should render out the video card correctly on the screen and if it does i think we deserve a thumbs up so let's go back to localhost all right let's check it out and i'll find out if you're bullshitting us sonny i'll find out and hey wait here we go hold on hold on first we got to put it through the stress test guys could be bullshitting us so we got to find out let's see here okay so it says 950 here yeah yep now if it's true what you're saying if i change this it should change here in real time without me refreshing or doing anything right which is insane but let's try it yep okay so let's give it a try i'm going to change this to 154 and i'm going to hit update holy crap dude real time guys real real time okay let me try let me try this clever quasi to um pop up python bro wow this is real time i love this you know that it's always satisfying whenever i see that react like firebase connect with react and then work in real time it's just always like one of the best feelings yeah it's crazy and it's just insane like how little code it was to get that powerful functionality like there was no managing sockets there was no socket i o there was no headache or anything we just did a simple like three lines of code with the on snapshot and it just worked right everything worked and then it was paired beautifully with the react hooks everything worked really really nice that's amazing what we're going to do now is if you can see on the right we can't actually scroll right so let's go back to having that layout yeah i can't scroll i'm trying to scroll i can't yeah so now let's have firebase on the left and let's go ahead and add a another um document into firebase so i'm going to go ahead and i'm actually going to drop you some content so i'm going to go ahead and drop you an avatar source so i will drop it inside of where should i drop it i could drop it inside of app.js sure go for it yeah so i'll drop this one into app.json boom that's the source um and add it you want me to add this to the database yes yeah okay there's avatar source i wish it would just allow me to duplicate a record you know that'd be nice i know yeah so that's avatar source this is the handle so and the channel name is uh sanga right yep cool and then avatar uh okay url you gave me the video url right no that's actually the avatar a source i gave you the instagram long the first thing that you gave me was the avatar source yeah okay got it what else and then likes on like we just do likes at 9 50 or something uh-huh and then do shares around like 40 or something okay i'm gonna do 47. and then a song let's do this this was the song that i used this one here i'm gonna use don't rush hey there it is oh nice you actually oh that's funny dude why why don't you ever put um apostrophes like do you don't like them or to piss you off or what for what bit like don't you never put a pasta i notice you don't put it in don't you don't put it in let's is it like a british thing or is it just like a you personal thing i don't know i mean i do it for the s's but for everything else i get lazy yeah okay okay i see i got it and then for the url we have this huge one so this so this is going to be a number right likes and shares are going to be a number so yeah let me actually fix those real quick all right go for it now what url this is the big one so this is the most important one all right got it now before you hit save before you hit save let's get that on the left hand side of the screen oh so they can see it in real time yeah yeah so we'll show them in real time without a refresh so imagine now somebody just shot a reel and then they posted it right as soon as we hit save notice how the right side of the screen is not it's not going to refresh okay so hold on hold on let me just refresh right now because everything was white and blown out so now i'm i'm trying to scroll and it's not scrolling okay so i don't know if you guys can hear my sound of me trying to scroll but it's not doing it but once i hit save right over here and then i scroll it should scroll right yes yeah okay let's give it a try let's put it through that stress test so i'm gonna hit save it added it i see it on the left hand side it added that boom sango oh crap bro that's nice all right let me actually play it now love that when it works like that it's so satisfying it's crazy dude it is so clean bro it is so clean nice wow okay love leah is just super satisfying to watch it work that is beautiful yeah yo barcelona versus baron is going on that is a big boy match um i'm always i'm always team baron i'm i'm bayern all the way germany for me you know uh it's a german german league but uh i know go ahead i'm on the other side i'm on the other side yeah yeah yeah all right okay nice so i think with that said we just finished up with the firebase hey bayern is beating barcelona five to two let's go yo i would watch that match look at that uh dude let's watch let's watch soccer on this tv after that is nice okay nice okay so with that said guys we just finished up on the firebase database stuff so everything everything is done with that now so with that said we actually are ready for the deployment oh wow deploypop that up so we'll we'll do that so now we're on firebase we're going to hit create database and here make sure you choose start in test mode hit done and then just choose done it doesn't matter what location it picks it's going to be a good location by default damn i see it's our stream is like starting to peak again and we're getting more viewers and thank you guys so much we are currently at 330 and we broke 16 000 views so thank you guys and if you're enjoying this so far make sure you hit the like button so it goes out to more people exactly guys we ask you smash that thumbs up nice so with that said now we're inside the database so the database follows a collection document collection document and repeating structure right a collection is simply a list it's like an array right so let's go ahead and start that um with that collection by going ahead and creating a collection of rules right so let's go ahead and say rules yep so this is going to be where the videos are so reels and we'll hit next auto id yeah so this is actually going to be the first rule so in order to understand what fields we need what we're going to do is we're actually going to yeah let's go to app.js let's go to apps and let's use the app.js props that we actually we just use video card props and i'm just gonna i'm i i will show that in just a second but the things that we're gonna be using here for the video um the fields what fields are we gonna need so i can visually show it here and then we can show it through props so i imagine go ahead okay so channel of so the channel that's right here yep that channel sanger got it what else and then we're gonna have the avatar source so the avatar image and that's the image yep yep we have the song that's playing okay so that's what brings the ticker yeah exactly and we have the url of the actual video itself okay otherwise the video would not be here at all yep got it and then we have the number of likes and the number of shares in the bottom right okay so those are all the things that we're going to need to feed our database when we create a dummy we're going to basically create this through the database got it and then props let's look at app.js quickly before we do that so okay yes there we go and you can see here guys we have the props right so here we're manually passing in those props we've got the channel so when you say okay i got it yeah i was just gonna say if you could just say what the props are but here the channel is a prop the avatar source is a prop and video card is the component yes exactly so rather than hard coding these values like we're doing here we want to be able to pull them from the database so let's go ahead and add a document which fits this structure so for the first field let's go ahead and do a field of channel got it okay so yeah so basically we're gonna go channel and boom and i will also post the same values avatar source and all of this is string because i actually see that he has a string data type there so i'm just gonna keep it as a string uh song this is also a string uh url is going to be actually let's go so this is going to be a url which is the video url right yep cool so i'm going to paste that here likes are going to be a number so i'm going to say likes we're going to make it a number we're going to give it just 950 likes and then shares is also going to be a number so i'm going to go ahead boom boom boom uh whoops and i'm going to just copy this and paste it awesome so that record is now made and i just want to show you guys when sunny was talking about how the structure is so here you got your you got your uh collections inside of the collections you have documents so for example hey basically in english i'm saying hey this this is where all my reels are this is a folder that has all my reels then when you go inside of that folder that literally has like all of your reels right and then it's like so in your actual local computer you would have a folder called photos and then inside of there you might have like all your photos so just like that we have all the reels here now once we go inside of a particular reel all the data associated with that is right over here so what does that data mean for example hey here's the url for that so i'm going to copy this url we're going to open a new tab press and type it in and then boom this is what actually comes up yeah yeah so this is you know the data that's part of it exactly so a really nice explanation there guys and like you can now see the exact way that we've mapped the uh sort of the props that we were previously passing as hard-coded values into the database so that we have the same structure right now with that said we now need to pull that information from the database so we're going to show you a really nice way of doing this and also the added bonus here is that you actually go ahead and get a real-time function you get real-time functionality here as well so the first step to this is we need a sort of variable to keep track of all of the real all of the rails right so let's go ahead and create one so remember in react to create a variable we use use state so we're gonna we're gonna go ahead and say const and we say rules and we're gonna say set rules right and then we say use state and then the initial value here is going to be an empty array because we're going to assume that we have zero rules by default when we begin this process yeah so we're going to do this and we need to import use state at the top okay so like this now what we're going to do is we are going to go ahead and actually add a use effect now i will explain what a use effect is and it's basically going to allow us to run a piece of code when the app component loads and we want to run this once because we just need to set up a listener to the database one time and we don't want it to keep firing off we just want it to happen once all right so we've gone ahead and imported it and in order to write a use effect we write it over here so we say use effect right and then what happens is it takes a function so it takes a function and then it takes a second argument which is the dependencies so by default by passing empty dependencies like this what this is saying is that the app component will run once when it loads and never again right so it won't run once when it loads and it won't run again but if i had like for example a con a variable inside of it like name or like age or something like that whenever these it will run once when they when it loads they'll also run when name and age change which is why it's known as a dependency okay so if we by default right now we just want to run once when it loads so we're going to basically go ahead and do this so what we now need to do is import that db from our local firebase file so here we do import db from our local firebase not the module firebase and then we're going to go ahead and do db dot collection because remember that collection that we created on firebase was reals okay so we actually had a collection called rules and then what we say is on snapshot so this is the magic right here so on snapshot is saying go ahead and give me like imagine you've got a camera and you pretty much take a picture of that rails collection so that that list of remember kazi said it was like a a folder right with all the rules inside of it so imagine we could take a picture of that folder at that exact point in time so that's the snapshot right that's the snapshot now the the beautiful thing here is that the snapshot whenever something is added whenever something is changed whenever something is removed the snapshot is refired off and we get a fresh snapshot right so we get a fresh snapshot and then that goes ahead and gives us the most up-to-date value of what the rules folder or collection looks like okay yep so with it and i just wanna and i'll keep visually adding like more technically what he's accessing so when he's saying hey give me the reels folder i mean that's how i think in english you know if you like give me the reels folder boom that's what's giving him and then on snapshot is just a fancy way of getting everything in real time yeah exactly exactly that guys it's fancy way of getting everything in row time so now what we're going to do is go ahead and actually um set the rules so we're going to set the rules to a value right and what value are we going to set the rows to i basically want to go through all of the rows inside the database so here set rows i'm going to go through all of them so i'm going to say snapshot.docs so that's going to go ahead and go through that list of rules right snapshot.docs and then i'm going to say map so it's right through every single one so snapshot.docs returns like this returns an array yep okay so this guys is basically everything inside of here exactly and then the dot map thing will allow you to actually like loop through one by one so like if this is the first item and this will be the second reel and the third reel and a fourth reel all that exactly that we want to basically map through them and basically return it in a structure that is good for us right so in this case what i'm going to say is map through every single document and basically go ahead and get the doc dot data right and the doctor data is all of the properties associated to that one document so the app was okay got it yeah couldn't see some of it so now we could see it yeah okay so basic go ahead go ahead finish your thing uh so all of these so if you have doctor data so the avatar source the channel like share song url anything associated with that document that we're mapping through or iterating through it uh we're gonna get that information back so i'm just gonna again visualize everything he's saying because this is where it gets really dense and i just want to empathize for everybody who's watching because it always would kill me when i would be going through this so reels gets you this all right then when we do snapshot.docs that gets us everything here yep then when we do dot map then each dock here allows us to loop through it okay and then when we do doc.data it gets you so when you're looping through it gets you this particular dock in the first loop and then all the data here and then this data here is actually uh at object yes it's just filled with key value pairs yeah exactly so you end up getting as it maps through everything you end up getting an array of objects and then that goes inside of our rails variable yep so the the final thing that you're going to get is an array of objects so for example here's your first reel and this is going to have does this this also has an id right uh no so we're just pulling the data not the ids yeah okay so we're not pulling okay cool so the first reel is essentially gonna have for example you know channel i'll just put channel for now as clever quasi okay yeah and then a bunch of other stuff um yeah and then the second one doesn't exist yet so this entire thing right now would look like this for you know again this is just an example but this is what it would look like an array with one item exactly and then as you add the second third document you would get an array with two items three items etc all right so nice awesome logan just dropped by he goes hey guys in office today just wanted to stop in and support you thank you so much and then he says the drawing is helpful hopefully this is helpful for you guys nice awesome um right so now what we're going to do is reels we'll now actually if we've done everything correctly we'll have all of the information that we want right so this is the moment of truth now so what we're going to do is we're going to go down here we're going to delete this line and what i'm going to do is rather than having this hard coded out like this right so rather than having all of this stuff hard-coded at the bottom so we have like all of these uh video cards so let's go ahead and remove these we have everyone this video called this video kind of when you get rid of that get rid of that instead of doing this what we have right now what i'm going to do is i'm going to say so i'm going to do some java jsx so i'm going to go ahead and do this i'm going to say reals.map right and for every single reel i want to return a video card right so i want to return a video card so i want to return a video card like this right but look what we do here that's different right so i don't want these values to be hard-coded i actually want to pull the values from it so here we can destructure the real so i can actually go ahead and pull the rail apart and say get me the channel the avatar the song the url the likes etc from that row so i can go ahead and do this i can actually pull it apart and i can do that all right now what i can say is rose dot map uh yep so i don't know why it's freaking out yep so rose i'm in the video card component like this now here i can actually go ahead and say this should be the channel that we're getting back from the db this should be the avatar source the avatar source this should be the song and these are mapping to the database this should be the url from the database so it should be the url this should be the likes and this should be the shares like that and what i can do now is i can get rid of our hard coded value so i can actually go ahead and highlight a hardcore value and delete a hard-coded one so at this point in time guys we have no hard-coded stuff here so you can actually see for yourself there is no hard-coded stuff saying that this me like this is the channel name of blah blah we're mapping it from the db okay and what we can actually do to prove this is we can go ahead and save and we can go back to our app and we can if everything was done correctly this should map to the database it should listen it should get all that information and it should render out the video card correctly on the screen and if it does i think we deserve a thumbs up so let's go back to localhost all right let's check it out and i'll find out if you're bullshitting us sonny i'll find out and hey wait here we go hold on hold on first we got to put it through the stress test guys could be bullshitting us so we got to find out let's see here okay so it says 950 here yeah yep now if it's true what you're saying if i change this it should change here in real time without me refreshing or doing anything right which is insane but let's try it yep okay so let's give it a try i'm going to change this to 154 and i'm going to hit update holy crap dude real time guys real real time okay let me try let me try this clever quasi to um pop up python bro wow this is real time i love this you know that it's always satisfying whenever i see that react like firebase connect with react and then work in real time it's just always like one of the best feelings yeah it's crazy and it's just insane like how little code it was to get that powerful functionality like there was no managing sockets there was no socket i o there was no headache or anything we just did a simple like three lines of code with the on snapshot and it just worked right everything worked and then it was paired beautifully with the react hooks everything worked really really nice that's amazing what we're going to do now is if you can see on the right we can't actually scroll right so let's go back to having that layout yeah i can't scroll i'm trying to scroll i can't yeah so now let's have firebase on the left and let's go ahead and add a another um document into firebase so i'm going to go ahead and i'm actually going to drop you some content so i'm going to go ahead and drop you an avatar source so i will drop it inside of where should i drop it i could drop it inside of app.js sure go for it yeah so i'll drop this one into app.json boom that's the source um and add it you want me to add this to the database yes yeah okay there's avatar source i wish it would just allow me to duplicate a record you know that'd be nice i know yeah so that's avatar source this is the handle so and the channel name is uh sanga right yep cool and then avatar uh okay url you gave me the video url right no that's actually the avatar a source i gave you the instagram long the first thing that you gave me was the avatar source yeah okay got it what else and then likes on like we just do likes at 9 50 or something uh-huh and then do shares around like 40 or something okay i'm gonna do 47. and then a song let's do this this was the song that i used this one here i'm gonna use don't rush hey there it is oh nice you actually oh that's funny dude why why don't you ever put um apostrophes like do you don't like them or to piss you off or what for what bit like don't you never put a pasta i notice you don't put it in don't you don't put it in let's is it like a british thing or is it just like a you personal thing i don't know i mean i do it for the s's but for everything else i get lazy yeah okay okay i see i got it and then for the url we have this huge one so this so this is going to be a number right likes and shares are going to be a number so yeah let me actually fix those real quick all right go for it now what url this is the big one so this is the most important one all right got it now before you hit save before you hit save let's get that on the left hand side of the screen oh so they can see it in real time yeah yeah so we'll show them in real time without a refresh so imagine now somebody just shot a reel and then they posted it right as soon as we hit save notice how the right side of the screen is not it's not going to refresh okay so hold on hold on let me just refresh right now because everything was white and blown out so now i'm i'm trying to scroll and it's not scrolling okay so i don't know if you guys can hear my sound of me trying to scroll but it's not doing it but once i hit save right over here and then i scroll it should scroll right yes yeah okay let's give it a try let's put it through that stress test so i'm gonna hit save it added it i see it on the left hand side it added that boom sango oh crap bro that's nice all right let me actually play it now love that when it works like that it's so satisfying it's crazy dude it is so clean bro it is so clean nice wow okay love leah is just super satisfying to watch it work that is beautiful yeah yo barcelona versus baron is going on that is a big boy match um i'm always i'm always team baron i'm i'm bayern all the way germany for me you know uh it's a german german league but uh i know go ahead i'm on the other side i'm on the other side yeah yeah yeah all right okay nice so i think with that said we just finished up with the firebase hey bayern is beating barcelona five to two let's go yo i would watch that match look at that uh dude let's watch let's watch soccer on this tv after that is nice okay nice okay so with that said guys we just finished up on the firebase database stuff so everything everything is done with that now so with that said we actually are ready for the deployment oh wow deploy\n"