Build and Deploy a Group Video Chat Application with Messaging, Polls & More

Key Takeaways

hi there and welcome to a project video where you'll build and deploy a group video chat application this is not a video chat like any other rather it's a conference video chat app that supports multiple people at the same time with screen sharing capabilities private and group messaging admin controls polls and much more this agora video chat application is the best group video conference chat app that you can currently find on youtube and on the entire internet in this video you'll learn how to use agora's chat builder to quickly build a scalable video chat application you're also going to learn how to work in large code bases of code that you didn't write it's important to be able to add new features to all the existing apps before we dive into the project i have an important announcement for you for quite some time now i have been working on something big i'm creating a custom platform where you'll be able to learn by creating even better and more professional projects it'll take a long time to turn this into a reality but i want you to make the most important decisions during the process so click the mailing list link down in the description so that you can stay up to date and choose which projects will be built first big news coming soon with that said let's dive straight into the video [Music] to start creating our project you can click the link down in the description it's going to lead you to agora's app builder agora built an entire builder for live video chat and streaming applications they say no coding required but we can get their entire code base and add external features on top of it if you know how to code and i know you do so i'm going to teach you how to take all of the agora's amazing features that they give you right out of the box and how to add new functionalities on top of them in our case i'm going to teach you how to add a polling system but you can add anything you want any feature you can think of you can code it and add it to their code base so let's get started we can start by clicking the try it now button in here you'll have to sign up or log in in my case i already have an account so i'm going to click login and once you log in you'll be redirected to their create a project page in here you can see that you can create a project of some templates like video meetings or coming soon online classes and virtual events and you can see that i already have one project built but in this case i want to teach you everything from scratch so i'm going to create a new project with you let's give it a product name i'm going to say jsm chat app and this is going to be a video meeting application let's click next and once you're here it's going to show you how your application looks like and you can change some general information so let's see what changes can you make we can go to product information change the name and the product id you can also change the description right here so i'm simply going to give it a more meaningful name something like javascript mastery community and under description we can say the real time engagement platform for meaningful and let's say developer connections great now let's go back let's change the theme you have a lot of predefined options i'm going to go for this one let's pick a dark theme you can also change some primary and secondary colors or even add a background image now let's go back and let's go to logos in here you can enter your primary logo i'm going to click remove image and then select my file there we go i've entered my javascript mastery logo at the top and that looks much better now i'm going to click back and let's check what authentication offers in here you can enable google oauth microsoft oauth slack and even apple for now i'm going to leave these off and let's see what we have on the conferencing screen you can enable more advanced things like psd and dial in pre-call screen chat cloud recording screen sharing and even video encryption i'm going to leave these settings as they are and that's going to be it for all the settings we can also see how the app looks like on mobile and that's going to be it now instead of deploying our app we simply want to download the source code because we want to modify it ourselves so let's go ahead and first click save it's going to say error in following field product id is a required field so let's simply go back to product information and let's enter a product id in this case let's do something like jsm chat app great let's click save and now we're good it took a few seconds but now we are ready to deploy our app and then we're going to download the source code so you have to click deploy your app and then as you can see i already tried it out but i'm going to do it one more time to show you so the first and the main step we have to do right now is to deploy our backend to heroku so to do that you can simply click deploy backhand in my case i'm going to redeploy a pop-up is going to appear you will have to either log in or sign up to heroku and everything else should be instantaneous it's going to say pending for a few minutes so let's wait for it to be done and then we'll be right here and there we go our back end is deployed and that's the only thing we had to deploy for now because now we're going to add new code to our front end that's why we don't need to deploy it right now so what you can do is simply close this window and then we are ready to download the source code so let's click it and a zip folder was immediately downloaded i've just opened it with my zip application and i'm simply going to extract it to my desktop once you've extracted it you can locate it on your desktop open an empty visual studio code window or any other code editor of choice and then you can simply drag and drop that folder into your code editor there we go it opened it up i'm going to make this just a bit bigger and as you can see there aren't a lot of things there right off the bat we simply have some configs backgrounds and most importantly a package package.json in here you can see that we have a start script but we also have a readme with all the steps so let's go to view and then go to terminal let's clear it and now let's follow the steps open a terminal the second step says to run mpmi and then npm start you have to have nodejs version 14 installed so if you don't already just make sure to go to nodes download page simply google node and click download on version 14 or later great let's go ahead and type npm install our application has been installed and now we can simply type npm start the agora app builder just ran and it asked us a question do we want to install or build well first of all we want to install so now it's going to check for node and create all of the project directories it's going to take some time to download the entire frontend code for this application and to install all of the front-end dependencies so it might take a few minutes just give it some time and we'll be right back everything successfully got installed and we are ready to press enter to continue that's it we can simply leave the process of reinstalling by pressing ctrl and then c there we go what we have to do now is re-navigate to jsm chat app or whatever name you gave it so we can do cd jsm chat app and let's see what do we have in that folder this is going to be a huge folder because what agora allows you is not only to build a fronted application at the same time you're building front-end for web devices and also android and ios so there's quite a lot of folders but don't worry it's all written in react so let's visit the package.json to know which commands can we run right there you can run android ios and then web web is what we should be focused on so to run web we're simply going to run npm run web again to run this make sure that you're not in the root directory you need to cd into your directory name and then run npm run web after you do that it's going to compile and it should open up in the browser for you and there we go localhost 9000 forward slash create javascript mastery community with our logo and the real engagement platform for meaningful developer connections in here we can name our meeting let's do something like community meeting and we are ready to create a meeting there we go our meeting has been created we got the attendee url as well as the host url in this case i'm going to copy the attendee url and i'm going to start the meeting as a host there we go it's looking for video input and it's looking for the microphone let's set jsm as my name and let's join the room just like that we are inside of the room and we are waiting for participants so if i open up another tab and go to this url we should be able to join as a guest as well there we go i'm going to disable the video and let's call this one a guest we've joined the room and we can immediately see an abundance of features that agora offers here is the name of the meeting we can copy the url we can enable or disable audio video and we can even turn on the screen share in here we can see the list of participants we can copy the meeting invite and we can disable or enable both video or audio for each participant individually if we are the host then we have group messages so if i type something here something like test it should appear right here you see we even got a notification but we can also send private messages for example jsm is going to message our guest so if you type hello there we go there is one private message from jsm this works wonderfully then we can also open up different views for example see just one main video or see multiple people like this and finally we have our controls if you're not a host you can only see the input device but if you are the host and go to settings you can mute all audios mute all videos and do all kinds of other things which we're going to implement in this video so this was just a short preview of what this app can do already in just a few minutes but now we're going to go into the code and i'm going to teach you how you can add your own features to it and make it completely your own so without any further ado let's see how we can do that first we can close this terminal and now we can get to our own feature the feature that we are going to implement is going to be a polling system the host of the group chat will be able to create a poll have a question and four different answers and then in real time all participants of the conversation will be able to vote and everybody will be able to see the results in the real time so we can head to a file called host control view and here's a great tip there are a lot of files and folders here so just so you don't have to search use the control p and then simply search for host control view this is a great tip that i use for bigger applications because you can easily traverse your entire project host control view done we can go to chat that's done join phrase that's done as well so now let's go to host control view each file in agora's application is going to have this copyright right there but we can ignore that for now the second thing that you can also notice is that this is written in typescript you can notice that by the tsx extension but don't worry about that as you can see it's mainly just plain javascript so inside of our host control view we can add some inputs and we can do that just below this last view by doing text and then inside of that text we can simply say create a ball we can also give it a style and that style is simply going to say style dot heading that style has already been declared so you don't have to worry about writing it out now let's see where this create a poll is going to pop up in our application our host control view is visible if you are a host and then you can go to settings right here you can see we have host controls and there's also create a ball so let's add the settings for our poll just below that text and you can notice that we are using some components like view and text from react native this is not a react native application right now we are only running it on web but what agora allows you to do is to have this application running on react native as well meaning native android and ios applications but in this case we'll simply use the web version so now that we have this view inside of there we are going to have a text input this text input is going to be a self-closing tag and inside of there we can have a value as we always do with inputs we are also going to have the on change text property which we're going to leave empty for now and we're also going to have a placeholder our placeholder is simply going to say something like poll question great now you might notice that this text input is not important yet and we can import it from something called atoms agora created a lot of different components you can reuse and one of these components is going to be the text input if you use the tip that i've showed you earlier ctrl b and then that's going to be text input you can immediately notice that under src and atoms there is a text input component so this is a really handy tip to traversing the application now what we can do is simply say import text input from dot slash atoms text input great so what is going to be the value and the unchanged text of this input well we could declare them right here as the state fields but we will need to use the values and the change text across our entire application not just in this file that's why we have to create a context that's correct you're also going to learn how to create a react context in this video so before we continue with creating this input i'm simply going to comment it out for now and we can go ahead and create a custom context to create our paul context we're going to go to components and then straight in here we're going to create a new file and that file is going to be called poll context dot jsx inside of there we're going to import create context and that is going to be imported from react and then we also need to import react itself as a default import and alongside create context we're also going to use state so we can import use state now with every react context we first have to export the context itself so we can say export const poll context and that is going to be equal to to a simple function call of create context now we also need a context provider so we can say const paul provider is going to be equal to in there we get the props but more importantly we want to get the children out of the props children is a prop that every single react functional component has now inside of there we want to declare everything more specifically we want to declare a state of this question we wanted to use here so to do that we can say const question and set question is equal to and that's simply going to be use state where at the start the question is going to be an empty string let's say that that's all we need for now so once you have that you simply want to have a return and then inside of there you want to call the poll context dot provider and then you want to give it value whatever you pass into this value you'll be able to access across your entire application so let's simply close this component for now and then inside of the value we are simply going to pass an object that's going to contain the question as well as the set question so we will be able to access this entire state across our entire application now we're going to wrap our entire application with the poll provider so we have to return everything that's inside of it and that's exactly what the children prop does whatever you wrap with this poll provider it's going to be returned inside of it great we created our poll provider and we can simply call export default poll provider to export it now we have to go to our app.dsx to use this bowl provider again we're going to use that trick with ctrl p and we're going to open our app.tsx inside of here just below all of the imports we're also going to import poll context provider and that will be coming from dot slash components and it's going to be all context the only thing you have to do with this is you have to wrap your entire application with it so just below the return we're going to open up a new component and have the poll context provider there i'm going to copy the ending tag and simply put it at the end just before the closing parentheses there we go now our entire application has access to our context state now you might be wondering how can we actually use that state so let's go into our host control view and let's make use of that question state we created in the context inside of here we can first import our context so we can say import that's going to be poll context as a named import in curly braces from and then we can simply say dot slash all context great of course we also need to use context from react and we are already importing that so just below we can say const we can this structure question and also set question and that's going to be coming from use context and in there we simply pass the poll context great now we have access to the question as well as the set question the only thing we have to do with this text input now is simply pass the question as the value as well as the set question as the on change text let's save it and take a look we're going to rejoin the room and go to our settings there we go create a poll and in here we have our call question where we can type now we need to have four different answers so let's create the state for that and then let's create different fields we can start by creating the state for our answers more specifically what we can do is say const that's going to be a state so we need to destructure it in an array and then we can say answers and also set answers that's going to be plural because we have more and that's going to be use state and then inside of there we're going to put an empty array but we're going to spread it to multiple lines and now we want to create different options each option is going to be an object more specifically an object that's going to have the option property set to an empty string at the start and also the number of votes which is going to be a simple votes property inside of that object at the start set to zero and then you can duplicate this as many times as you want however many answers you want to have in my case i'm going to go for four now you already know the drill we want to pass those values to our call context provider value so inside of here i'm gonna say answers as well as the set answers just by doing that we can now use this state inside of our host control view so at the top just alongside questions and set questions we can just import answers and set answers as well what we can do right now is just below this text input we can add a break tag to have some space and we want to map over the answers we can do that by opening a logical block and then simply saying answers dot map now there are going to be four answers and we don't want to have curly braces here we want to have simple parentheses because we want to instantly return something for each answer now as parameters to the map we are going to get the answer itself so we can say answer here and also the index of a specific answer we're currently looping on and also the index of the specific answer we won't be needing this answer variable so a good practice is to simply put an underscore there because that's a parameter we don't need to use now what do we want to return for each answer and the answer is going to be a simple div that's going to have a key equal to i and also a break tag at the top and just below that an actual input so we can say text input that text input is going to be a self-closing tag and it's going to have a few properties first of all it's going to have a value and the value is going to be equal to answer dot option and now that i'm looking at it we actually do need the answer so i don't know what was i thinking that's great we actually do need the answer we're looping over great then we're also going to need the on change text and we can create that as a function where we get the value of a specific text and then we want to call the set answers but now this is going to be just a bit tougher because we are not simply setting one individual answer we need to update the entire array of answers but only update the one we're currently changing so first we put an empty array there but we don't want that to be empty what we want to do is we want to spread answers dot slice more specifically from slice to the i element so we want to spread all of the answers from 0 to i and then we only want to update the one we're currently changing so just next to that answers that slice we can add the new changed element by saying option is equal to value that's where we're actually changing the option the number of votes is still going to be zero and then after the option we changed we also need to spread all of the elements that came after the option we're changing and that's going to be dot answers dot slice and now we're slicing from i plus one until the end if you're going until the end you don't have to pass a second parameter i know this might be a bit hard to understand so let me try spreading it into multiple rows so we have one array that we want to update our answers with and you can see that it is array just by doing this there we go one array now inside of there we are first spreading all of the elements that come before the element we want to change so we do slice from zero to the element we want to change then we have that famous element we want to change so what we're doing we're creating a new option and we are simply updating the value of that option and finally after we change it we just want to spread all of the elements that came after the element we want to spread and that is our array now i'm going to bring this back to one line and we're going to need just one more property on this text input and that's going to be a place holder so we can put a placeholder here and the placeholder is going to be a dynamic string so we can use template strings and say pull answer and that's going to be i plus one because we start from zero in this case we don't want to say zero one two three we're gonna say one two three four great i'm missing an e here and that is going to be it now since we are working in typescript our linter is complaining that our parameter answer implicitly has a type of any since this is not a typescript course we're going to leave that b but usually you do want to assign a type to each specific variable for example an answer should be a string but for now again this is not a typescript course if you don't want me to make one like that definitely let me know typescript videos coming in the future with that said we mapped over the inputs now so let's see if we can see that in the browser i'm going to enter my display name join the room and we're going to open the options and would you look at that create a poll poll question and four different answers now if we've done the logic correctly we should be able to add values for each thing and they should be able to change normally again it might be weird that i'm saying that but if we didn't code that set answers part correctly all of these answers would be messed up while changing the first one some other things might change and so on but looks like we set up the logic correctly now that we have the question and the answers we need a button that's going to trigger a poll that's going to appear at the center of the screen so let's do that right now we can give some space to this view because i've noticed that there wasn't a lot of space between this text create a poll and our answers so we can simply give a style here we can do it in line by saying margin top which is going to be equal to 20 pixels great now below this view we're going to create one final view and this view is going to have a style equal to style dot btn container inside of there as you might notice we are going to have a primary button this button is going to be a self-closing component which we also have to import this primary button is similar to the secondary button so we can simply duplicate the line and change the text to primary button great now let's add some parameters to it more specifically it's going to have an on press function like this and that's simply going to be a callback function where we're going to do something on click also it's going to have a text property and that text is simply going to say start poll so the main question is what do we want to do on press well first of all we're going to open up our modal so we can say set is modal open and that's going to be set to true now as you might notice we still haven't created this set is modal open variable or state setter so what we can simply do is go ahead and create it that's also going to be coming from poll context and i'm going to add it just below our question by saying const is modal open as well as the set is modal open that's going to be equal to use state and at the start it's going to be set to false now we also have to take these two variables and simply pass it to our poll context provider great now back in our host control view now inside of here we can use our set is modal open great and we are setting that to true but that itself is simply a state a switch on and off it's not doing anything by itself so let's go ahead and create an entire poll component that's going to be our next step and we can do that by creating a new component so inside of here we can create a new file and i'm going to name it paul.jsx inside of here we can import a few things more specifically we can import react and then in curly braces use state use effect and also use context so as you can see we're using a lot of react hooks we can say from and that's coming from react and then we're going to need two things from external packages most importantly we're going to need a modal from react-model which is a package we haven't yet installed and also import in curly braces line from rc progress that's going to be a progress showing a percentage of how many people voted for one specific option now as you might have figured out we haven't yet installed these packages so what you can do is go to view terminal press ctrl c to stop it from running then yes and then clear it now we can simply run mpmi and we can install react-model as well as the rc-progress great this is going to take just a minute and then we'll be right back once your package is installed you can simply run again npm run web let's check our application in the browser i'm going to type a name and let's join the room let's check our host options and everything seems to be fine we are ready to start creating a poll i'm going to close my terminal so we have more space to code and i'm going to create a const ball component so const ball is going to be our functional react component and just so we don't forget we can instantly export it export default poll inside of here we want to actually use and show the data the questions and the answers that users post so we also have to import react context we can do that right here import call context in curly braces from and that's going to be dot slash ball context now as we already learned we can use that context by saying const in curly braces and then we take the things that we need we're going to take question also set questions we're going to also need answers in this case we're going to rename answers to vote data you can do that by using the column we're also going to use the variable set answers as well as the is modal open and set is modal open quite a lot of things and this is going to be equal to use context and we simply pass in the all context and close it quite a long line but we have everything that we need in here we will also have to create a few states that are going to be only in the poll more specifically const and that's going to be the total votes which is the number of total votes so that's going to be total votes set total votes and at the start they're going to be set to zero and then we also have to have a boolean state field which is going to say has the user voted or no so we can say voted and set voted that's going to be equal to the use state and at the start it's going to be set to false now is the time that we start creating the jsx for our poll and we can do that by returning of course and inside of there we're first going to have a model the model we are importing from react model that model is going to have a few properties so i'm going to expand this more specifically is going to have the is open property which is going to be equal to is modal open coming from the context we're also going to have on request close and in here we simply want to call the close model function right now we don't yet have it but let's code it out that's going to be const close modal just a function and in here we want to reset all the states more specifically set the is model open to false also set the number of total votes to be zero also set the voted thing to be false we also want to set the question to be equal to an empty string same as it was in the start and also set the answers we need to set them to be an array of four empty options so i'm going to go back to our context and i'm going to copy these four options and paste them inside of the array which is the answers with that we have our close modal function and simply it's simply resetting all the states then we want to have a content of the model which is going to be simply pull model and finally we want to have some styles so we can say style is equal to styles dot custom styles now these custom styles haven't yet been created there aren't a lot of styles just a few for the actual model itself so what we can do is we can create a new styles file more specifically i'm going to create a new file in the components called poll styles.js and again there aren't going to be many styles in this case they all fit on the same screen 33 lines again just some custom styles for the modal for the button and some flex positioning the code for this entire file is going to be linked in the description so just make sure to copy it come back paste it and we should be good to go let's go back to the modal and we of course have to import those styles we can do that by simply saying import styles from dot slash poll styles great our model seems to be done and now might actually be a good time to test it out so for now i'm simply going to create a div inside of here and we're going to create an h1 that's going to contain our question if we can see the modal and if we can see the question that means that our context variables are correctly transferring the data from our host control view to our poll but of course we are never actually rendering the poll so the question is where are we going to render this call component we want to render our poll just where our video is so we're going to use that same trick one more time to go to video call dot dsx inside of here we want to import our poll component by saying import poll from dot slash components and forward slash poll great this file is quite long it has about 500 lines so this might now be a good opportunity to show you another tip if you type ctrl g you can enter the line number you want to go to in this case we want to go to 323. this is where we want to put our poll so one more time ctrl g and then the number of the line you want to go to just below the opening tag of this view we can simply render our self-closing call component that is all that you need to do great we have our poll rendered in our video call we also have our host control view with a button that sets the is model open to true once we click it and we can also set the poll question then that's going to trigger the context the context is going to send the is model open information all the way to our poll and then our module is going to know if it is open or closed and then we're going to render our question now let's see if all of this actually works or am i just talking nonsense before testing it out just to make sure our code was actually applied i'm going to press ctrl r to reload the page and it looks like our application crashed let's go back to the code i'm going to open up the terminal by going to view and then terminal and it looks like it says can't resolve sentry browser in javascript mastery community i've noticed this before but the application seemed to be working this error came just after we installed our mpm packages and more specifically it's saying resource busy or locked dump stack so as we usually do in javascript mastery i wasn't simply going to skip through this error and pretend nothing happened we're actually going to solve it together see what this is about and hopefully that's going to help you solve future errors that happen to you usually when i get these weird errors i simply stop the terminal from running and clear the console and what we're going to do is completely delete the node modules and try to install them one more time so just right click them click delete and it is going to take a bit of time because there are a lot of packages so wait until this line stops moving and then we're going to install our packages again the air we've gotten just now usually happens for me when i'm using mpm so now i'm going to try to install the packages by simply running yarn yarn is going to install all of our packages and if you don't have yarn already just make sure to google yarn download and the process should be incredibly simple while this is going i can simply tell you a bit more about yarn yarn is basically the mpm alternative and some people prefer it nowadays it seems to be a lot faster than mpm so if this actually works it might be a good idea to switch the yarn entirely the packages have been installed and let's simply try running yarn run web and it's compiling and let's wait to see if we fixed our issue and there we go the app actually compiled this might be a great sign to switch to yarn entirely so if you see me using yarn in the future this is the reason why now that we got that figured out i'm simply going to close my terminal and let's continue where we left off and that was testing our poll we are back in the browser i'm going to name our meeting jsm meeting create a new meeting and simply start the meeting as a host now i'm going to add a display name of jsm and join the room we can go to our host settings create a question which is going to be something like where are you from and then answers right now don't matter because we are showing only the question so i'm going to type one two three four and click start poll and would you look at that a modal showed up which means that our is modal open is working and also we have our question here which means that we are correctly transferring the data from our host control view to our poll model now is the time that we implement the actual voting capabilities so let's go ahead and do that and we can do that inside of our poll component right now we only have a question but we're also going to add a div below that question that div is going to have a style equal to styles dot flex column and inside of there we want to open a new dynamic block of code where we want to say if we have vote data in that case we want to loop over it so we can say vote data dot map inside of here we're going to have each individual answer so in here we can simply say answer and we're also going to get the index of that answer instead of the curly braces we want to have a condition so we're going to say if no voted so if the person hasn't voted in that case we want to return the following block of code that's going to be a button but we have a question mark here we also need an else let's say we also need a ternary else so just after this we can add another column and the parentheses and inside of here we are going to have a div so if we haven't voted yet we want to vote so we need a button let's render it right here that button is going to have the style equal to styles dot button it's going to have a key equal to i and it's also going to have an onclick property where we get an event and then we want to call the submit vote function that submit vote is going to get the event and also the answer we want to submit our vote to inside of the button we can simply say answer dot option and now if we have voted we want to show the results so i'm going to add a style here and say styles dot flex center and inside of there we're going to have an h2 that h2 is going to have a style equal to styles.mr20 which is going to be margin right 20 pixels and it's simply going to say item dot option now below each option we want to have a line so right here i'm going to render a line with uppercase l and that is going to be a self-closing component this line is going to represent how many people have voted for that specific answer so inside of here we can simply say percent is going to be equal to in parentheses item dot votes divided by total votes and then we close the parentheses and then multiply that by a hundred to get a percent then the stroke width is going to be equal to a string of five and then the trail width is going to be equal to the string of three these are just some settings to make our line look better finally below this line we want to have a p tag that's going to have a style equal to styles.ml20 margin left 20 and in there we're simply going to show the number of votes that each answer has so item that votes also we are mapping over these divs so i'm going to add a key equal to i here as well usually it's not the best practice to add the key equal to i as the number of the element in the array but in this case we are not deleting the items so that's completely fine and finally below this entire div we're going to have an h3 that's going to say total votes is equal to total votes great let's save it and see this in the browser i'll try to immediately start a new poll and there we go you can see we have four buttons where are you from and one two three four of course we still haven't implemented the submit vote function so if we click on one nothing is going to happen therefore that's going to be our next step we already have the submit vote function here the last thing we have to do is simply implement it so just above our close model function we're going to have const submit vote is going to be equal to an arrow function in that arrow function we're passing two things first thing is going to be the event and the second thing is going to be the answer we want to submit our vote to and we only want to run that if we haven't already voted so we can say if haven't voted like this in that case we want to open a code block and we want to change our answers so we can see const new answers is equal to vote data dot map in there we get an answer and if answer dot option is triple equal to answer dot option you can immediately see that this is not the best practice we are naming this parameter the same as well as this one of course we have to change it so i'm going to rename the top one to chosen answer so if the chosen answer that option is equal to answer that option in that case we want to return a new object where we spread the answer and simply set the votes to be equal to answer.votes plus one so basically we're just returning that same object where we added one to the number of votes and then else what do we do for every other answer that we hasn't clicked on we are simply going to return that answer unchanged and that's going to give us access to this new variable of new answers and what do we want to do with that new answers well we want to set our answers in the context to be equal to new answers we also want to update the number of total votes so we can say set total votes and that's going to be equal to when in react you're updating the state you have to do it like this with a callback function where we get the previous number of total votes so we can add prev total votes and then private total loads plus one and finally we also want to do the same thing for set voted that's going to be prev voted and that's going to be not prev voted great so we are updating all of the states we need to update and just before we go ahead and test this part out i've noticed that i have an issue right here on line 57 to 61. instead of referencing the answer here from the map i've been specifying item item item that item doesn't really exist so really it had to be an answer hopefully you caught that and now we are ready to test this out this should now be fully working let's go ahead and save it and test it out in the browser let's do jsm again you can do something else let's open the host control view and say something like how old are you and let's do one two three and four start pull that part works and let's click one and there we go this is the line i was telling you about this is the answer here this is the total number of votes and this is the percentage of the people that voted we currently have only one vote and that one went to the answer one that's it this actually looks great but now what is the main problem here we've just created the poll for one user for the host himself but how do we enable devoting functionality for all of the other participants in this chat that's going to be our next step before we go ahead and implement the multiple people polling option i just wanted to show you what the problem was in action so i'm going to stop this poll and as you can see i've joined as another person and now we can see two different people on the screen i'm going to click the start poll from the host's point of view and when i do as you can see the poll started just on his screen the goal is to show this poll to all of the people that are currently in this meeting and then of course we want to see their results in real time so let's go ahead and stop this from running and let's get back to our code to implement this we're going to go into chatcontext.ts again i've used that ctrl p and then in here we have control message enum these are some options that one user can do and they're going to trigger something else on somebody else's pc for example the host can mute the audio or video of a different person so our goal is going to be a similar action to those what we can do is we can simply say initiate poll that initiate poll is going to be the action number eight and finally we want to go to rtm configure rtm configure is going to be the file that deals with these messages that are not only happening on one person's screen but rather on everybody else's at the top we can import our context by saying import poll context in curly braces from dot slash pull context then we can scroll a bit down and we can use a few things from that context more specifically const set questions set answers and also set is modal open that is equal to use context and then we pass in our poll context great now we can make use of these variables in this file finally we can use ctrl g to go to line 215. as you can see in here we have some actions mute video mute audio and so on now the only thing we have to do is add one more elsif right here right there that's going to be else if and we want to check if text 1 is triple equal to control message enum dot initiate poll that is how we're going to initiate the poll on all other devices and then in here we want to do some logic but first we want to see what this text actually is and where is it coming from and that's going to be in our host control view right here once we click that start poll button we don't simply want to set his model open true to one person we want to open it for everybody so we can use a special agora function called send control message inside of there we can pass the control message enum dot initiate poll that means that the message we're sending is about initiating the poll and then as the second parameter we can simply pass in our question and our answers inside of the object we also need to copy this line and also go inside of our poll file right here and alongside setting the answers we also want to send another control message to update our poll on each new vote and in here we're not going to have answers rather it's going to be new answers that we're updating right here great also notice how we don't have access to the control message enum that's something that we have to import and we can do that right here import chat context and we also need control message enum from dot slash chat context and now from that chat context just at the top we can say const send control message and that's going to be equal to use context and that's going to be chat context great we have the send control message we have control message enum and we are ready to initiate the poll in here to update it and also to really initiate it once we click the start ball button so let me show you behind the scenes what this send control message is actually doing i'm going to go to rtm configure file and i'm going to search for send control message again we're looking at the code that somebody else wrote but we as javascript developers should be able to read it so we are declaring a function more specifically an asynchronous function called send control message that control message is accepting one parameter the message itself as a string in there we are awaiting now this might be a bit hard to understand but this message is really meaningful send message by channel id then we get the channel and we append the message to it that's basically all that we are doing but now we also need to pass the data through that message we don't simply want to mute the call or mute the audio or video we need to do something in a shady poll and then also send some data through it to other users so to do that we can first add a new if we're going to say if message msg is triple equal to 8. now you might be wondering why a string of 8 and if you remember correctly if we go to chat context in here you can see that initiate poll indeed is a string of 8. so here if the message is 8 then we want to do something else we're simply going to do what we have been doing so far so i'm going to pull this away block inside of here now if the message is eight i'm going to copy this entire part a wait but now we don't simply want to append the message we also want to plus and then json.stringify what are we stringifying well the object because now in send control message we're not simply sending the message we're also sending the object as data and we can prove that by going here and take a look send control message a string of a and then an object so going back here we definitely do have an object as well as the string and we're stringifying that json and then appending it to the string that way we'll be able to use it later on great now that we know that we can press ctrl g and go to line 216. there we go here we set if text one is equal to initiate ball we're basically checking if the second character of our string is eight and if that is equal to eight of course these need to be strings so if that is the case that means that we want to initiate our poll so let's extract our data by saying const question and answers and that is going to be equal to json.parse we get the text and we want to slice from the second character onwards because first we have 0 8 and then we have an actual object containing the entire data so object answers is equal to an array and all of that stuff we previously stringified it so that we can pass it over here now we want to read from that data so we're doing json.parse finally we can use our context to say set question is equal to question and also set answers is equal to answers i notice that i have a typo here i don't have set questions so let's scroll up and looks like i mistyped it this was supposed to be set question and the last thing we want to do is set is modal open to be equal to true great now if we've done everything correctly this code should trigger the modal on everybody's screen everybody who is participant in our meeting should be able to see and vote and we should be able to see the results live just before we go ahead and test it out let's do one final change to our poll we have to add one use effect so in here i'm gonna say use effect it accepts a callback function and also a dependency array and we want to re-execute this use effect whenever the vote data changes meaning whenever another person votes so i'm going to say if vote data dot length is greater than one meaning if somebody voted and inside of there we're simply going to say set total votes to be equal to and we want to map over the vote data so vote data.map in there we get one item basically one vote and we want to take the item dot number of votes for each item then we're going to call the dot reduce on that map dot reduce and then you want to get the prev and the next element of that reduce and you simply want to return prev plus next so this is a complex line but let me explain what is happening here we have our array of answers that looks like this it's an object that has an option that is something and most importantly it has the number of votes for example one and then we can add the second one which is going to be two and then let's say the third has three votes there's a total of six votes so how do we calculate that well first we're mapping over the vote data which is this array we look into each option right there and we only return the votes that's simply going to leave us with an array that only has numbers that's going to make it so much easier to calculate and then we call the reduce where we get the previous which is one and also the next which is two and we keep it going while incrementing all of the elements so that's going to be one plus two is three and then we do 3 plus 3 is 6. and finally once we get all of that we want to set the number of total votes to be equal to 6. that's it now that we've done all of that let's go ahead and actually test it out i have my two windows opened our host is on the left and let's say something like where are you from i'm going to type something like los angeles let's do mumbai new york and let's also do new delhi let's go ahead and start the poll the poll appeared only on the left side which is still not ideal let's go ahead and check what that is about after i reloaded the page only a white screen appeared so let's go back to our code and check it out i'm going to open up our terminal by going to view terminal and looks like it failed to compile it says seems like the error is on line 75 of host controls so let's go here and looks like there is an issue oh more specifically this part got copied so we want to definitely remove that that's not necessary there we go let's see if that's going to fix it that seems to be fine to me let's open up the terminal compiled with warnings which is fine and let's go ahead and give it one final test to properly test it out i reloaded all of the browsers we are right here where we have to choose our display name i'm going to remove video and audio and i'm simply going to type our display name i'm going to do jsm here join the room and let's do guest on the right side in this view we cannot yet see the settings so i'm going to increase it a bit open up the settings and let's type our original question where are you from let's do again los angeles new york mumbai and new delhi let's go ahead and start the poll and there we go the poll appeared on the right screen there's some serious technology happening right there so it's great that we managed to do it using only agora's built-in function and some basic modifications there we go let's go ahead and try to vote to see if we'll be able to see the votes in real time i'm first going to vote from the guest's point of view let's go for new york total number of votes won and let's go for new delhi there we go total vaults 2 new york new delhi and everybody can see the results great this can be incredibly helpful with online schooling such as universities or schools where teachers have to ask different questions and also in work related settings like the meetings and so far where somebody needs to get everybody's opinion on a topic there we go this part is successfully coded out but again this is just one extra feature on top of all the features that agora gives you right out of the box in this video i didn't have a webcam to show you how videos worked and you can hear my audio through the microphone so that wasn't necessary but trust me everything works beautifully the final step is to deploy this application and share it with everybody that way you don't have to use zoom google me or some other platform you can really communicate through something that you've built so let's go ahead and deploy this application the process of deploying our application is going to be a lot easier than you might have anticipated so first we're going to close all the files and folders and simply go to view and then terminal we're going to press ctrl c and then y clear it and then do cd dot dot to get back into the root of our folder then simply type npm start this is going to run the cli and then simply type build and then choose which platform you want to build for as you can see agora allows you to build the same application on web android ios windows mac and even linux so let's go for web this is going to be a production build so let's choose it and there we go with just a few presses of the enter key we are already building our app and we'll be ready to deploy it in a matter of seconds let's press enter to continue and that's it you can press ctrl c to leave clear it go to jsm chat app and then now you have a dist folder this is where your entire application is inside of there we're going to create a new file underscore redirects netlify and other hosting platforms need this we're going to type forward slash asterisk space forward slash index.html and then 200. great now you can simply right-click this folder and reveal in file explorer then you can go to the browser and visit netlify.com and log in or sign up you can go to sites and then simply drag and drop the disk folder in here it took just a second to deploy and before we go ahead and take a look at it let's go to the main settings and change the name right here to something like jsm chat app there we go of course you can use your own name there we go i'm going to go to that url and as you can see javascript mastery community is now live on the web we can create a meeting let's just type meeting for now and you get live deployed links for attendees and hosts that you can send around so i'm going to copy this attend the url and start the meeting as a host it's going to ask me to allow the microphone and camera and i'm going to add jsm as the display name there we go we are inside of our meeting and i've just opened a new window with that url i copied in here we're going to join as a guest and as you can see you can freely chat with your friends and colleagues and finally let's test out the polling functionality we're going to go back to our host and ask a new question let's do something like what is your favorite programming language let's do something like javascript python c and then let's do c plus plus as well let's start the poll of course we're going to vote for javascript and the second person can vote for something like python there we go one one javascript python that works great with that said we've come to the end of this video close to the start of the video we already had an amazing video chat platform where you can speak with multiple people the same time and share the screen as well as chat with each other through this video i've showed you how you can access the code base and then modify it to add your own things and make it completely your own in this video we've added the polling functionality but then again feel free to add any feature that you want and finally huge thanks to agora not only for sponsoring this video but also for making such an amazing software that allows you to quickly and easily build scalable video chat and video sharing applications that was it for this video thank you so much for watching and i'll see you in the next one [Music] you