Vue & Firebase Real-time Chat (Preview) #1 - Intro

alright guys just a quick update because quite a few people have been asking me for a little sample of what I've uploaded to you to me so what I've done here is just attached about eight or nine lectures from one of the projects that we'll be creating and this one is going to be the real-time chat using view and firebase so I've uploaded these 89 lessons from this chapter so you can see what the course is like at a glance again there will be two other projects that we build in the course as well and if you do enjoy these at any point feel free to sign up the link is always going to be down below in the description to sign up for the course as well as the coupon ninja whitey 18 to get the course for $9.99 so enjoy and if you like it feel free to buy all right then gaming so far we've been using the firestore to store our data in and then when we've wanted to retrieve or change that data we've reached out to it manually to grab that data what we've not done yet is explore the real-time capabilities of the firestore and this is a huge huge part of it that's really really good but what does that even mean real-time capabilities well we can create an application on the front end in view and hook that up to a fire store instance much like we did in the last chapter in the last project then we can set up a listener in our front-end view application which is actively listening for changes in the database such as a document being added deleted or changed and when one of those changes occurs our app knows about it because we've set up that listener and it pulls down the updated data automatically and this happens without always having to make any additional requests for data or reloading the page so we'll be using this whole idea and technique of real-time data in this chapter to create this real-time chat application so let's just have a quick demo I've got two windows open here two different browsers both at the same address up here so let's just enter a name for each one Mario and Luigi and when we add something in this chat window over here it's going to update in both of them so if I say hey dude and then press ENTER it's going to appear here and also in a second here so he sees it as well so Luigi can say something back yo and Mario will see it as well and then Mario can say can't see a game of Mario karts and then Luigi can answer anytime anyplace so this is real-time data updates in action we're adding data to firestore in one window and it's automatically updating in the other a second later so this is what we'll be creating in this chapter so let's just get the project up and running by starting a fresh project with the view CLI so I'll open up my text editor and then I mean the view - firebase directory completely empty because I've deleted all of the old files then we'll create a new view project by saying view init webpack which is the template name and we'll call this project ninja - chat press enter and it's going to walk us through the steps of creating this project okay so the project name is ninja chats vue.js project that's fine Earth is fine run time plus compiler install the view router yes we'll need that yes link nope unit test no and Nightwatch no we will use NPM and that's going to install our project for us okay then so that's the project created and if we open up this folder on the Left we should see all of those different files inside so now we have that sorted in the next video what we'll do is just take a couple of minutes to talk about how we're going to tackle creating this application and discuss the project structure