Vue & Firebase Real-time Chat (Preview) #2 - Project Structure

okay so we know what we're building now but how are we going to build it well there's only going to be three components apart from the root component in this application and they will look something like this we have our root component sitting at the top then we have a welcome screen which will be shown to the user when they go to just forward slash and that will be where they insert their username for the chat then when they go into the chat at forward slash chat we'll show them this chat component right here and this will show them the whole chat window with the different messages inside that chat window nested inside that will be a new message component down here and this will be a form that a user fills in when they want to add a new chat so just an import file and a bottom also this chat component over here we'll be listening to the database for new messages being added to the collection over here so when that happens when we get a new message this component will receive that message and it will output that to the browser so that's it it's a pretty simple setup at a glance and we'll get started by setting up our fire store in the next video