Create a Twitter Clone with Vue.js, Quasar Framework & Firebase for iOS, Android, Mac & Windows

in this video i'm going to show you how to create this beautiful responsive cross-platform twitter app from scratch and get it running and working on five different platforms so we're going to create an ios app that you see here going to create an android app we're going to create a mac version of our app a windows version and we're going to get this running in a web browser as well as a responsive single page application using viewjs quasar framework and firebase this course requires a basic understanding of html css and javascript and knowledge of vue.js would be beneficial and before we get started i just want to give a huge shout out to free code camp for hosting this video my name is danny i'm an indie app developer and creator of a popular cross-platform app called budget and i teach vue.js web development and cross-platform app development on my youtube channel which you can find at danny's dot link slash youtube and the link will be in the description what we're going to do here is create this simple beautiful and responsive twitter clone using vue.js quasar and firebase and it's going to have a simple twitter style layout with a draw on the left hand side and this drawer can be toggled with this button and we have links to our two pages the about page which is just a simple content page and then the home page we can enter a tweet here with a 280 character limit so if we try and type beyond that then it will stop us so we can enter a tweet and when we click this button it'll be added to the top of our feed here and we can also delete our tweets and they'll disappear with this nice animation and we can like our tweets as well by clicking this button and it's going to be responsive and have a different layout for mobile you can see the draw disappears and can be toggled again with this button i'm going to be using a firebase cloud firestore database to store all of our tweet data once we've got this running and working in the web browser we're going to generate hybrid apps which can be deployed to all of the different app stores for ios android mac and windows and thanks to the firebase cloud firestore database it's going to have live data sync across all of our devices so if i add a tweet here on the web browser version and we look over here on the ios version we can see that new tweet pop up on the ios version as well and likewise if i delete a tweet on the ios version we see that tweet instantly deleted on the web version as well so how is it possible to create this app for all of these different platforms well it's made possible by quasar framework [Music] so what the flip is quasar framework well it's an incredible new framework which allows you to create a view gis app with a single code base and deploy it to many different platforms so we can deploy it to the web as a single page application a progressive web app or a server-side rendered app we can deploy it to a hybrid mobile app which can be deployed to the different app stores using cordova for both ios and android and we can deploy it to a desktop app using electron for mac windows and linux and it also has a huge material design component library with hundreds of different components such as buttons lists and tables and tons of different form components and you can just click on this button for any component and grab the code and just paste it into your app and start using it and it also has tons of different utilities and plugins such as inbuilt date formatting the ability to store and retrieve data using local storage and also dialog loading and notification plugins which make it really easy to create dialogues and notifications and stuff like that it also has hot reloading on all devices so when you change your work you see the change instantly even when you're developing mobile and desktop apps and it also has platform detection built in which means that you can for example display a particular element or component only on desktop and then display a different element only on mobile or you can fire a particular block of javascript code only on mobile and then a different block of javascript on desktop so quasar is one of the most versatile frameworks out there at the moment especially if your goal is to create an app on multiple platforms [Music] let's get started by creating a new quasar project using the quasar cli so you want to go to the quasar site at quasar.dev and then get started i'm just going to stretch this out a bit and you want to go to quasar cli and install quasar cli and you need to have node installed so you can get that at nodejs.org and you might want the one on the left here once that's installed you can then install the quasar cli with this command so i'm just going to copy that and jump to my terminal which is just running within vs code which is the editor i'm going to be using and you just want to run npm install g at quasar cli and if you have any trouble installing that then you might need to add sudo at the start and i already have this installed so i'm not going to install it but once the quasar cli is installed we can then create a new quasar project with the quasar create command so i'm just going to jump back to my terminal in vs code so you want to make sure you're in the folder where you keep all your projects and then just run quasar create and you want to give it a name i'm going to call it quitter it's going to ask us for some options here i'm going to leave the default project name i'm going to change the product name to quitter i'm going to leave the description and i'll just enter my name as the author and i'm going to choose sas with indented syntax for the css preprocessor and it's asking us for our components and directives import strategy and i'm going to choose auto import because this means that whenever we use a new quasar component in our app it will be imported automatically which makes our life a lot easier and for the purposes of this video i'm going to disable eslint although you might want to consider using that in your own projects especially if you're working in teams i'm not going to enable any other options so i'm just going to hit enter here i'm going to choose yes use npm to install the dependencies okay it's finished creating our project and if we scroll up a bit it tells us how to launch it we just need to cd into the folder and run quasar dev and i can see the folder it's created here quitter so i'm just going to drag that into vs code then open up the terminal and just run quasar dev and we can now see our basic quasar starter app running in the browser and so by default we just have a simple app with a simple layout we have a draw along the side which can be toggled with this button we have a header along the top and we just have a simple page with this image and we have some basic responsiveness out of the box so if i scale this down you can see the left draw disappears and again can be toggled with this button let's take a quick look at the folder structure of this quasar project so in the root of our project we have this quasar.com.js file and this is the configuration file for our project and this allows us to do things like install icon libraries and set the view router history mode to hash or history and we can also install animations here and plugins and also configure our different modes such as ssr pwa electron code over etc and the main folder we're concerned with is this source folder so in the root of that we have this index.template.html so this is our html page and we don't typically need to change this much and it just has this one div in the body and this is where our main view component will be loaded which is this app.view file so this is our root view component and this will load the layout component of our app here which brings me to the layouts folder so this is where the layout of our app can be found this main layout.view file and the layout is basically all of the elements that surround the pages of our app so in this case this is the drawer along the side and the header along the top and within our layout we load our pages and right now we just have this one page with this image in the middle and if i scroll down to this q page container component we have this root of view component here and that's where our pages will be loaded which brings me to the pages folder so we'll place all of our pages in here and right now we just have an error page and this index.view page which is this page here with just this one image on it and we also have this public folder where we can place images and css files and things like that and when we build our app anything in this folder will be available at the root so for example this favicon will be available at slash favicon.ico and then back to our source folder we also have an assets folder where we can also place images and stuff like that however everything in this folder will be processed by webpack so you might find that images are converted to base64 and stuff like that then we have this boot folder where we place boot files and a boot file basically allows us to initialize a plugin or a package before our app starts up and we will be adding a boot file later on for firebase then we have a components folder where we can place all of our view components and a css folder where we have a global css file or sas file and we also have this quasar.variables.sas file as well which we can use to customize the colours of our theme and we will change our theme a little bit later on finally we have a router folder where we configure our router and if we open up this routes.js we can see this routes array where we're configuring all of our routes so you can see it loads our layout file at the root and we configure all of our pages within this children array and right now we just have one path to our index.view file which is this page that we see here with just this one image on it [Music] let's work on the layout of our app and if we look at the twitter site it has this two draw kind of layout with one on the left and one on the right and all of our tweaks and stuff in the middle and quasar has a layout builder that we can use to generate a layout so let's see if we can use that to generate a layout that's similar to the twitter site so i'm going to jump to the quasar site and then layout and grid and then layout builder and it opens up this layout builder for us and we basically just have to choose all of the options we want so we do want a cue header so we're going to leave that enabled we don't need a footer so i'll disable that we want a left side drawer and we want a right side drawer and we don't need these navigation tabs so i'll disable this option and i'll click on continue and if we look at the twitter site the header doesn't go all the way along the top it's just at the top of this middle content column so if i jump back to layout builder we can play around with these options here to generate a similar layout so these options on the left are related to the left draw and the options on the right for the right draw so if i click on this l option here we can see that the left drawer now goes all the way up to the top just like the twitter site and if we choose this little r option on the right we see the right draw do the same thing so this is the kind of layout we want with our header just at the top of the middle column and i don't really like this drop shadow on the header so under this header bit i'm going to change this separator type to bordered so we just have a bordered header then i'm just going to scroll down and click on continue i'm just going to disable this visible footer option because we're not going to have footer then we can just click on export layout and it gives us an entire layout file so i'm just going to copy this and i'm going to jump to our layout file which is in source layouts and main layout.view i'm just going to select everything here and paste over our new layout and if we hit save we can see our app now has the kind of layout that we're looking for [Music] let's make our header look a bit more like the twitter header and the first thing i'm going to do is change our primary color to the twitter blue color and our current primary color is this blue color we see in the background of the header here so i'm going to jump to source css and quasar.variables.sas and we can use this file to customize our theme colors and we can see our primary color here so i'm going to paste in the twitter color which i have in my clipboard which is just 1da 1 f2 and i'll save that and we now see our header change to the twitter blue color uh let's work on this header a little bit so i'm going to jump back to main layout.view um we can see our header here it's this cue header component and i'm going to remove this quasar image which is this q avatar component so i'll get rid of that and i'm going to change this title which is in this queue toolbar title component to quitter save that and i don't want this right hand sidebar to be toggleable so i'm going to remove this button here which is this cue button component here so i'll get rid of that and save that and i want this header to have a white background with black text like the twitter header and if we jump to the quasar site and then style on identity and then color palette then we have all of these different colors that we can use in our app and so if we want to set our text or our foreground to a particular color then we can just use a class such as text dash and then the name of the color up here or if you want to set a background color we can just use a class such as bg dash and then the name of the color and we see all of these different colors and we don't see them here but we also have equivalent classes for black and white as well and if we look at our cue header component here this currently has a class of bg-primary which is giving this header a background colour of our primary colour which we set in our theme file before and a class of text dash white which is giving it this white text color so i'm going to change this background class to bg dash white to give it a white background color and i'll change this other class to text black to give the text a black color and i also want to make this title bold because it's bold in the twitter header and if we jump to the quasar site and then style an identity and typography then we have all of these different classes we can use to style our text and if we want to make our text bold we can use this text weight bold class so i'm going to jump to this q toolbar title component which has our title i'll add a class of text dash weight dash bold and save that and our heading is now bold so this header is now looking pretty similar to the twitter header let's make this left draw look like the twitter left draw with a nice logo at the top and then links to all of our pages so let's add a logo to the top first and there's an icon component that we can use for that so i'm going to jump to the quasar site and then a few components and icon and so we can use this icon component so i'm just going to click on view source and grab the first one and we'll add it to this left draw and this is our left draw here this q draw component so i'll get rid of this comment and just paste in that icon save that and we can now see that icon on the page and if i jump back to this icon page on quasar we can use all of these different icon libraries material icons font awesome ionicons and all of the rest and we can use the material icons out of the box so if i click on this link takes us to the material icons page and so we can use any of these icons and all we need to do is replace this name prop with the icon name that we see here so if we want to use this accessibility icon we can just change this name prop to accessibility and save that and we can see the icon update so we can use all of the material icons out of the box but the other icon libraries need to be enabled in our config file and i want to use font awesome for our logo so i'm going to jump to our config file and this is just in the root of our project it says quasar.com.js and i'm just going to search for icons and we can see in this extras array here all of these different icon libraries so to add the font awesome icon library we just need to uncomment this line and save it and we can now use the font awesome icons as well so i'm going to jump to the font awesome page i'm going to search for bird and scroll down and this dove icon looks pretty good so i'm going to click on that and if we look at this example markup here these classes that we see here are what we need to use in this name prop so i'm just going to copy this jump back to our app and i'm just going to paste in that markup i just copied underneath this icon then i'm going to copy these two classes and paste them into this name prop and then just get rid of this i tag and save that and we can now see our dove icon on the page however i want this icon to be much bigger and i want it to be our primary blue color as well and if we jump back to the icon page on quasar and we jump down to this q icon api all of the components in quasar have this api section which tells us which props slots and events we can add to each component so if i jump to style then we have this size prop and we can set this to a pixel value or a rem value or a generic name such as xs for extra small or md for medium so let's use this size prop on our icon i'm going to split the attributes on this icon by using the split html attributes extension which you can get from the extensions page in vs code i'm going to add this size prop and i'm going to set it to lg for large and if i save that our icon is now nice and large and i also want it to be our primary color so i'll jump back to the api section here and we have this color prop and we can just set it to any of the colors which i showed you before on the color palette page we want to set it to our primary color so i'm going to add this color prop i'll just set that to primary and save that and the icon now has our primary color okay let's add some padding around this icon because it's currently squished up into the corner and if we go to the quasar site and style on identity and spacing then we have these really handy classes that we can use to add padding and margin to our elements and we have some examples down below so if we wanted to add a small amount of padding in all directions we could just add q dash p for padding a for all directions dash sm for small or if we just wanted to add padding on the left we could add q dash p l for padding left and then dash sm or dash lg so i'm just going to add a medium amount of padding around this icon so our icon is here so i'll add a class of q p for padding a for all directions dash md for medium and i'll save that and that's looking a lot better and we also have equivalent classes for margin so if we wanted to add margin all around we would just change this p to an m but i'm going to leave this as padding okay let's add some navigation items so i'm going to jump back to the quasar site uh view components and list and list items i'm going to scroll down a bit and i want our navigation items to look something like this this top item here with an icon on the left and some text because this is what the navigation links on twitter kind of look like so i'm going to click on view source here and i'm just going to copy all of this cue list component i'm going to paste it under our icon here i'll just fix the indentation and i'll save that and we now see this list on the page so each of these list items is in a queue item component and i'm only interested in this top one here this one here so i'm just going to remove all of the other cue item components and also all of these cue separators as well so i'll get rid of all of those and save that and we now just have this one item and this list currently has a border around it and that's being added by this bordered prop on the cue list so i'll get rid of that prop save that and we see the border disappear and i'm going to change the label on this item to home because i'm going to make this a link to our home page so i'll change this text here icon as avatar to home save that and i want to change this icon to a little house icon or something so i'm going to jump to the material icons page we opened before search for home and this icon looks pretty good so we just need to use the class home and if we look inside this cue item here we have this cue icon with the name set to bluetooth so i'm just going to change that to home and save that and this is looking pretty good i just want to increase the size of this icon a little bit so again i'll add a size prop uh let's try setting this to medium so md save that and that looks pretty good and i also want to make this text here big and bold just like the navigation items on the twitter site so i'm going to jump back to the typography page in style and identity and typography let's try this h6 class so we just need to add a class of text h6 to use this style so we'll add that to this cue item section here where our text is so just add class text h6 and i'll save that and that's looking pretty good and i also want it to be a bit bolder so we can just use the class we used before text dash weight dash bold save that and this is looking pretty nice now pretty similar to the twitter navigation items so i want this to link to our home page so i'm going to jump back to the list and list items component page and jump down to the queue item api and in this behavior section we can add this to prop to give our item a link so i'm going to add that to this cue item here i'm going to split the attributes again and add this to prop i'm just going to set this to forward slash which is the root of our app the home page so i'll save that and this should now link to our home page and the text has changed to blue because this is now currently the active link because we're on the home page so let's duplicate this cue item and create a link for our about page which we're going to create later on so i'm just going to duplicate this cue item and i'll set the path to slash about and i'll change the text here to about and save that and i want to use a different icon here so i'll jump to the material icons page let's just search for help and we can just use this icon here so we just need to use the name help so this cue icon here i'm going to change the name to help and save that and that's looking pretty decent and now that these queue items are links because of this to prop we should now be able to remove this color prop from our icons and they should be colored automatically because i'd like the icon to be black when it's not currently the active link just like the text is black when it's not the current active link so i'm going to remove both of these color props from both of these cue icons and save that and this inactive icon now changes to black later on when we create the about page and we jump to the about page we should see this icon and this text changed to blue and this home icon and text change to black and finally let's make this draw a little bit less wide because it's quite a bit wider than the left draw on the twitter site and if we jump to the quasar site and layout and grid and layout draw and jump down to the draw api and then jump to style then we have this width prop that we can use to set the width of the draw so let's add this to our draw i'm just going to split the attributes on this q drawer and add this with prop and this is expecting a number not a string so i'm going to bind to this width prop by adding a colon at the start and i'm going to set this to 283 and i'll save that and our draw is now a little bit narrower [Music] let's put some stuff in this right drawer now because it's looking a little bit sad so if you look at the twitter site over on the right here we have a search bar and then a kind of a news feed so let's add a search bar first so i'm going to jump to the quasar site view components and form components and input text field i'm going to scroll down and i'd like something like this with an icon over on the left although we're going to use a search icon so i'm going to click on view source and just grab this first queue input component copy that and we'll paste it to the top of our right drawer and the right drawer is here this q draw component so i'll paste that q input there and save that and i'm going to add a bit of margin around this so i'm going to split the attributes on this q input and i'll remove this v model because we're not going to connect this to anything and a lot of class of q dash m a for margin all dash md for medium we now have a little bit of margin around it and i would like this to be rounded and outlined instead of square and filled and if we jump back to the quasar site and jump down to the api section and style scroll down a bit so we have an outline prop we can use for an outline design and a rounded prop we can use to give our input a bit of border radius so i'm going to replace these filled and square props with outlined and rounded save that and that's looking pretty good i'm going to add a placeholder to this which just says search quitter save that and i'd like this to be a little bit smaller and if we jump back to the api then we have this dense prop which we can use which makes certain components a little bit smaller so i'll add this dense prop as well and it's now a little bit smaller and we need to replace this icon and the icon is here so i'll change this name to search which is a material icon we can use and this is looking pretty good now so let's add a little news feed here so i'll jump back to the quasar site and list and list items and i'll scroll down and look for something that looks like a news feed so this looks pretty good this top item here so i'm going to click on view source and i'll just copy this first queue item and this opening cue list tag and we'll paste that under our input fix the indentation we need to add the closing cue list tag so i'll add that down here save that and i don't want this border on the list so let's remove this bordered prop uh let's change the text of these headings here this first line could be like a category such as politics so i'll change the text in there to let's say education and this second item i'll just put some text in there something amazing happened save that and i'd like this education text to be kind of a gray color like we see here so a lot of class to this education label of text gray which is one of those colors you can find on the color palette page we looked at before save that and i want this second heading to be bold so a lot of class to that as well of text weight dash bold same one we used before okay this is looking pretty good so i'll duplicate this cue item a couple of times so we have a few items save that and i'd like to have a little line between each item and if we jump back to the list and list items page and down to the cue list api and style no it's in content actually we have this separator prop we can use to add a separator between each item so we want to add that to the cue list component so i'll add that here separator save that and we now see a little line between each item and i'd like to have a little bit more padding within each of these cue items so i'm going to select each of these queue items do a multiple selection and add a class to each one of q pa for padding all dash md for medium and we now have a little bit more space within each of these items okay i'm pretty happy with this layout for now let's see how it looks on mobile i'll scale this down and yeah it's looking pretty good however on the twitter mobile app we actually see the twitter logo here at the top in the middle instead of some text here so let's do the same thing on our app so on desktop we'll see some text here and on mobile we'll hide the text and display our logo at the top instead [Music] okay let's make this title here in our header only appear on larger displays and quasar has some responsive classes that we can use to show our hide different elements on different screen sizes so i'll jump to the quasar site and style an identity and visibility and i'll scroll down to window width related so in quasar we have five different breakpoints xs sm md lg and xl and it tells you the width thresholds of these break points here and you can override these default thresholds and it tells you how to do that on this sas scss variables page well anyway we have some classes that we can use with these break points so if we want something to only display on extra small windows then we can just add this xs class to the element and the same for all the other breakpoints and if we scroll down a little bit says here you can also show some dom element or component if it's lower than one of these sizes same for greater than one of these sizes just attach lt dash or gt prefixes so if we use a class such as lt-md to an element then that element will only be displayed on windows which are smaller than the medium breakpoint so only on xs and sm screen sizes so i'm going to jump back to our app let's find this title that's in our header so our q header is here and here's our title so i'm going to wrap this text in a span and i'll add a class of gt-sm i only want this text to appear if the window is greater than the small break point so in other words only show this text on medium large and extra large displays so i'll save that and if we scale down our browser then we see that text disappear scale it back up and it reappears again okay so let's add our logo up here but only on mobile devices so i'm going to grab the icon that's already in our left drawer up here and that icon is here so i'll copy that and i'll paste it after this span indent that i'll add a visibility class here so we only want to show this on screen sizes that are less than medium so i'm going to add lt-md and save that and if we scale this down yeah we can see that logo appear scale it back up and it disappears again so i'll just scale this back down again i want this to be a little bit smaller up here so this size prop i'm going to set that to sm for small and i also want this to be in the center of the header quasar does have some positioning classes that we can use stretch this out a bit if we go to style and identity positioning so we have classes such as this absolute center class which we could use so i'll just add that to this icon absolute dash center save that and this looks great here however for devices such as the iphone 10 11 and 12 the header is actually a lot taller than this because it adds extra space for the notches on those devices and if we use this class it will also put this icon in the vertical center as well so it ends up being up in the middle of the header somewhere up here so instead of using this class i'm gonna add a custom class to this icon we could call it header dash icon and we'll just add some custom css to put this in the center so i'm going to jump down to the bottom of this file and add a style section with the line set to sas and we'll target this header icon class and i'm going to set the position to absolute i'm going to set the bottom to zero to put it right at the bottom then i'm going to set the left to 50 percent and then to pull it back into the center i'm going to use transform and i'm going to set translate x to minus 50 and save that and the icon is now in the middle so we now have a different header for mobile and desktop okay so i'm pretty happy with this layout now so we're almost ready to start working on our pages but before we do that let's set up some pages and routes [Music] let's set up some pages and routes for our home and about pages because right now if we look at our two items in our left draw here this home item is linking to the path slash which is working well this about item is linking to the path slash about and we haven't set up a route for that yet so if we click on about we just get this error page which by the way is just this error 404.view file in the pages folder and this isn't much fun and first of all i'm just going to open up this page we see here which is in source pages index.view and i'm going to remove these flex classes here because i don't want everything to be in the center on this page and then i'm just going to remove this image as well and for now i'm just going to put h5 in here which says home and i'll change the name of this component as well to page home to make it a bit more clear what this is and i'll save that and i'll also rename this page so i'll change it from index.view to pagehome.view to make it a bit more clear what it is and this now breaks our app because if we go to our roots file in source router roots.js we can see our root here and it's currently looking for a component called index.view so we need to change this to page home.view because we just renamed it save that and that's now working again and let's duplicate this route and set up a route for our about page so the path is going to be slash about uh let's point this to a page called pageabout.view so i'll change this to page about.view and save that and this breaks our app again because this page doesn't exist yet so i'm going to duplicate pagehome.view and if you don't see this option here this duplicate file or directory option this is being added by the duplicate action extension which you can find in the extension store and i'm going to duplicate this and call it page about dot view i'll open that up and change the text in here to about and i'll change the component name to page about and save that let's see if this is working yep we can now navigate between both of our pages however we have a little issue with our active classes on these navigation items here when we're on the home page the home link is active which is okay but if we jump to the about page the about link becomes active but the home link stays active as well and we can't fix this if we go to the quasar site view components and list and list items and jump down to the queue item api then we have this exact prop which we can add to our queue items which is an equivalent to view routers exact property which means that the active classes will only be added to these links when we're on the exact route that they refer to so i'll jump to main layout.view and add this exact prop to both of these queue items and i'll save that and this seems to be fixed now okay our pages are set up however on the twitter site if we look at the header it doesn't actually display twitter up here it displays the name of the current page so if we're on the homepage it says home and if we're on the notifications page it says notifications so let's do the same thing here instead of displaying quitter and what we can do is we can jump to our roots file and in fact i'm just going to split this up onto multiple lines so it doesn't get too messy and what we can do is add a name property to each of these like this and we can set the homepage route to home on the about page root we can set this name property to about i'll save that and we can now access these properties anywhere within our app by using the dollar root object so if we now jump to main layout.view and our header which is here and here's where we're spitting out that quitter text what we can do is replace this with double curly braces and then dollar root and then doc name so i'll save that and we now see home in the header and if we jump to the about page we see about okay so we're ready to start working on our pages now uh let's work on the about page first because this is going to be nice and easy [Music] okay let's set up our about page so we want to go to source pages and page about.view i'm just going to add a heading and some text so i'm going to get rid of this h5 and i'm going to add a h4 with the text about quitter and then i'm just going to add a paragraph with some lorem ipsum and i'll duplicate that paragraph so we've got two and we could do is some padding on this page so we can use the same classes we used before so i'll add a class to the q page component and set this to q p a dash l g so we have a large padding on this page i'm going to remove the top margin from this heading because we have quite a lot of space up here so this h4 i'll add a class of q mt for margin top dash none for zero margin and i'll also reduce the bottom margin a little bit so i'll add a class of q dash m b for margin bottom dash md for medium and i also want this heading to be bold so i'll add a class of text dash weight dash bold save that and i'd like this paragraph text to be a little bit bigger so i'm going to jump to the quasar site and style an identity and typography and this text body one class should do the job so i'll copy that class and i'll surround these paragraphs in a div with that class and i'll just move those in there and save that okay this is looking pretty good we're now ready to start working on our homepage and start adding the real guts of our app [Music] let's start working on our home page so we need some kind of input at the top here where we can add a tweet and if we look at the twitter site we have an input here with a placeholder that says what's happening we have an avatar over on the left and we have a character counter thing which stops us typing too many characters and we have a submit button here as well so let's see if we can find something similar on the quasar site so i'm going to go to view components form components and input text field and i'm going to scroll down and see if i can find something nice so this is kind of what we want this input has an avatar on the left it has a character counter here which stops us typing too many characters and it has a submit button over on the right here so this is number one two three four five six seven eight nine ten the tenth one down so i'll click on view source and grab the tenth one down so one two three four five six seven eight nine and ten so i'll grab this q input here copy that and paste it to the top of our home page which is in source pages page home.view and i'll just paste it over this h5 fix the indentation and save that we could do with a bit of space around this so i'm going to surround this cue input in a div and i'll add some padding classes to this and we can actually specify vertical padding and horizontal padding independently so i'd like quite a lot of vertical padding and a little bit less horizontal padding and so to add vertical padding we can just add q dash p for padding and then y for padding on the y axis then a dash and then i'll add lg for large save that and we need to put this q input inside that div so i'll just move that up save that and then to add some padding on the x axis i'll add q dash p x for padding on the x axis dash md for a medium padding save that let's customize this input a little bit i'm going to split the attributes on this q input i'm going to remove this dense prop and i'll set this label to what's happening like on the twitter site and if we use this label prop then when we click into the field we see the label pop up to the top there but i prefer using a placeholder where the text just disappears when you click into the field so i'll change this label to a placeholder save that and that text now disappears um we want the maximum length of this field to be 280 characters and not 12. so i'll set this max length to 280 and save that and we can see that update there let's see if that's working i'll just paste loads of text in there and that doesn't seem to be working and that's because we need to bind this to a data property so this v model here i'll change this to new quit content and i'll set up a data property for that so in our script section i'll add our data method that returns an object and add this property new tweet content and i'll just set it to an empty string and save that let's see if this character counter is working now yeah we can see the characters counting up and when we get to 280 it stops us from typing anymore and i'll remove this clear button on this clock button which is in this template tag here so i'll get rid of that i'll get rid of this field hint slot as well save that and i'm going to replace this avatar image with my image and that's this image tag here and i have the link in my clipboard but you can use your own avatar if you want i'll save that and i want to increase the size of this avatar and this cute avatar component like the q icon component has a size prop that we can use so i'll set the size to excel for extra large and i'm going to replace this submit button here with a text style button like this one here so i'll jump to quasar site view components buttons button scroll down and i'd like something like this a rounded solid button and this is on the fourth line so i'll click on view source so one two three four and i think it's this one here with the rounded prop so i'll copy that paste it over this send button here and save that let's customize this button i'm going to split the attributes on that and change the label to quit save that and i don't want the text on this button to be capitalized and if we jump back to the button page and the api section and style maybe i'll scroll down no it's not in there maybe general maybe content we have this no caps prop that we can use to disable those uppercase characters so i'll add that prop to this q button no caps and if we look at the twitter site if we have nothing in this field then this button is disabled so let's do the same thing with r button and if we jump back to the button page and behavior or maybe it's general no maybe style or it could be in state we have this disable prop that we can use to disable a button so we'll bind to the disable prop and we want to disable this button if there's nothing in this new quick content property so we can just set this disable prop to not new quick content and save that and the button is now disabled but if we type something it's now enabled again now i want this input to automatically grow vertically as we add more content because right now it just goes from left to right like that but if we look at the twitter site we can actually add new lines here and the input keeps on growing so i'm going to jump back to the quasar site and back to form components and input text field jump down to the queue input api and if we jump to the content section and scroll down we have this auto grow prop which will make this field grow automatically so let's add this prop as well auto grow save that and now if we add tons of content in here it's not working because i added it to the button instead of this input so i'll cut that auto grow prop uh we'll add it to this q input instead save that let's try that again yep it's now auto growing and all the content is added to new lines and i'd like the font size in this input to be quite a bit bigger i'm actually zoomed out of the twitter page here but if i set the zoom to normal then you can see the text in this field is quite a lot bigger and unfortunately there's no size prop or text size prop available for the queue input so what we'll do is add a class to our queue input and add some custom styles so i'll add a class to this q input of new dash quit save that jump down to the style section which doesn't exist yet so we'll add that style with sass and we'll target this new quit class we'll set the font size to the same as it is on the twitter page which i think is 19 pixels and save that and the text is now nice and big however we could do with a bit more line height here so allow the line height property as well and set that to 1.4 that doesn't seem to be working let's try adding important save that just reload the page and that line height is still not working i'm just going to inspect this let's drag this out a bit and i'll just drag this down so our class is being added on this label element here you can see it there new quick but we're trying to style this text area and the line height writing isn't cascading down so let's make this more specific instead of just targeting this new quick class we'll target the text area within that so i'll add text area and indent these styles close the inspector and see if that works yeah it seems to have worked i'll just reload that yeah we now have a nice amount of line height on this field so as this input grows down vertically this quick button stays right up here and i think it'd be better if it stayed docked down here next to the bottom of this input and quasar has a grid system that we can use to have more control over how things are laid out so if we go to the quasar site then layout and grid then flex grid and introduction to flexbox then it tells us all about this grid system that we can use and if we jump to grid row so we can set up rows with columns inside and if i just click on view source to create a row we can just use the class row and then inside that we can add some divs with a class of call to create columns so what we could do is put all of this inside a row and then put the input and the avatar in a column inside the row and then put the button inside another column because when we use the grid system and these rows and columns we have more control over the positions of things within the columns so for example we can tell everything to force itself down to the bottom of the column so i'm going to jump to this input and we already have a div around this input so we could just make this a row by adding a class of row and i'll save that and then inside this row i'm going to add two columns so i'll add a div with the class of call and then another div with a class of call i'll just break these up i'm going to select the input and cut that and paste it inside this first column and then our button which is currently in this after slot i'll cut that and get rid of this slot and paste this button in this second column let's fix the indentation and save that i'll just reload the page and currently these columns are 50 50 they're both the same width because by default columns will just take up an equal amount of space so if there's two columns they take up 50 each or if there are three columns they take up a third of the available width but we can add a class to this second column to force it to shrink so we can just add a class of call dash shrink and all of these classes are explained in this flex grid section on the quasar site so we'll save that and this column is now shrinking but we still want this button to be pushed down to the bottom of the column and if we jump back to this grid row page and scroll down to alignment there's some classes we can use here so for vertical alignment we can use this items end class on the row to force the content of the columns down to the bottom of the column so let's add this items n class to our row so our row is here so we'll just add items dash end and save that and this button is now right at the bottom however this button is now touching the input and we need a bit of space between these columns so we need a gutter so if we jump back to the quasar site and grid gutter and if we scroll down we can use these cue call gutter classes to add a gutter between our columns so we just need to add a class to the row such as cue call gutter sm so i'll copy this class we'll add it to our row here and i'll save that and i'd like a little bit more space than that so i'll change this to cue call gutter dash md for medium and that's looking pretty good now and this button is a little bit too low down at the moment i'd like it to be sort of in line with this line here so i'm just gonna add a bit of bottom margin to that button so a lot of class to this button of q dash and b for margin bottom dash let's try md save that maybe a little bit more i'll change this to lg and yeah that looks pretty good let's see if it follows the input down the page and yeah it does so i think that's much better now and there's one more thing i want to do here if we look at the twitter site after this input section we have this little divider here with a gray background and a little gray top and bottom border so let's add something similar under our input maybe we could use the q separator component so i'm going to jump to the quasar site and then view components and separator scroll down and by default this is just a single line but maybe we can customize it a little bit so i'm just going to click on view source and grab one of these cue separators and we'll paste it after our div with the row class so i'll paste that here and save that right now it's just a single line not quite like the twitter one but if we jump to the separator api and style then we have a size prop we can use to set the thickness of it in pixels or rems so i'll add a size prop to this cue separator and i think the one on twitter is about 10 pixels so i'll set this to 10 pixels and that's looking pretty good however it's a little bit dark compared to this twitter one and if we jump back to the api section we also have a color prop we can use to set the color so i'll add that as well and then i'm going to jump to the color palette page so styling identity and color palette uh let's look for some grays uh maybe this gray two color will work so i'll set this color prop to gray dash two i'll save that um we're almost there with this separator but the one on twitter has these little top and bottom borders and i don't think there's a border prop for the cue separator so what we can do is add a class to this in fact i'll split the attributes here add a class of let's say divider we'll add some custom css to add a top and bottom border so we'll target this divider class and i'll set the border top to one pixel solid and the border bottom to one pixel solid and then we'll set the border color and if i jump back to the color palette page maybe we could use a darker color here because we can actually use these colors in our css because we have css variables for all of these colors so maybe something like gray-5 so what we can do here is set this border color to dollar and then gray dash five and i'll save that and they look a little bit too dark let's try gray four so i'll change this to grade four and yeah that's looking pretty decent now okay so i think we're done with our new quit form let's move on to our list of quiz [Music] let's add a list of tweets down here and tweets have the avatar over on the left then they have the user's name and then the handle and then the date the tweet was posted and then we have the tweet underneath and some buttons underneath that so let's see if we can find something we can use on the quasar site so i'll go to list and list items and i'm going to jump down to more involved examples and scroll down a bit and these email list items look pretty good we've got the avatar title at the top and then a time over on the right so i'll click on view source and i'll just copy all of this cue list and paste it after our cue separator and i'll get rid of all except the first queue item so i'll get rid of this cue separator and this cue item here and save that and let's customize this a bit so i'll split the attributes on the cue list i'll remove this style property which is restricting the width and i'll remove this rounded borders class and i'll remove this bordered prop as well and i'll remove this friends label at the top and i'll replace this avatar with the avatar that's next to our input so i'll scroll up and grab this q avatar copy that and paste it over this q avatar save that and these lines props on these labels here are restricting the number of lines that can be displayed and i don't want this to be restricted so i'll remove this lines prop from both of these cue item labels and i'll remove this caption prop which i think is making the text a bit smaller and i'll change the text in here so i'll put my name in here this first cue item label and i'll just split this up actually i'll save that and i want this to be bold so i'll wrap this in a strong tag and i want to display my handle next to this in gray so i'll add a spam and i'll use one of quasars color classes i'm going to use text gray dash 7 and i'll put my handle in there save that and on the queue item here this clickable prop and this be ripple prop uh making this clickable um adding this ripple effect and i don't want those so i'll remove these props and i think we need a bit more vertical padding on these items so a lot of class to this cue item of q dash p y dash md save that and i'll replace the text in this second cue item label where our tweet is going to go so i'll just select everything inside this cue item label and put some laura mipsum and we want to make sure this can handle new lines so i'll stick a new line in here and save that and we can't see the new lines being added so what i'm going to do i'll add a class to this queue item label of queat content we'll add some css at the bottom so we'll target the queet content class and to make sure those new lines are preserved and shown we can just set the white space property to pre dash line save that and we can now see those lines and this avatar is currently vertically centered but i want it to be always at the top and if we scroll up here this q avatar is inside a q item section so let's see if we can find the api for that and it's down here cue item section api so i'll jump to that and we have this top prop that we can add which will align content to the top so we'll add that to this cue item section here save that and i want the text to be a little bit bigger both here at the top and the content text as well so i'm going to jump to the typography page so styling identity typography maybe we could use this subtitle one on the heading of the tweet so text subtitle one so i'll add that to this first cue item label with the username and handle in it so text dash subtitle one save that and i want this body text to be a bit bigger as well so maybe we could use this body one style with the class text dash body one so i'll add that class to the second cue item label text dash body one save that and this is looking pretty good now pretty similar to the way tweets appear on twitter and now we just need this action bar at the bottom with some buttons uh let's add these to the bottom of this cue item section underneath our tweet so after this q item label i'll add a row and we'll stick some buttons in here so i'll jump to the quasar site go to view components buttons button and scroll down and we just want some icon buttons something like this a bit like these buttons on twitter so i'll grab the code for that which is this one here copy that paste it into this row and i'll split the attributes and save that and i don't want this to be blue i want it to be gray so i'm going to change this color prop to gray save that i want it to be a bit smaller so i'll add a size prop as well set that to sm for small and i want to use some font awesome icons here so i'll jump to the font awesome page and i'm going to search for comment because we'll add a button for comments and this one looks pretty good so i'll click on that and copy this example here i'll just paste it after this q button for now so i'll replace this icon prop here with these classes here so i'll copy that paste that in there i'll get rid of this save that uh let's add three more buttons so i'll duplicate this three times i'm going to use some other font awesome buttons which i found on the font awesome page here so i'm going to use a retweet icon with the classes fas and then fa retweet and then i'm going to use the heart icon with the classes f a r and then f a dash heart and then i'm going to use a delete icon with the classes f a s f a dash trash save that and we can see all of those icons and i want these icons to spread out and there's a bunch of flex classes we can use and they're all on the flex pages on the quasar site so i'm going to add a class to this row with our buttons of justify between to add space between all of our items here and i'll also add a top margin to this button to make a bit of space at the top so i'll add q mt sm save that and lastly i just want to nudge these icons back over to the left a bit because if you look at the twitter tweets this left icon aligns perfectly with the text over on the left so i'm going to add a class to this row of queet icons and then in the style section we'll target this class quite icons and we'll add a negative left margin so i'll set margin left to minus 5 pixels save that and this icon is now lined up with this text okay i'm pretty happy with the design of this tweet now [Music] let's set up some data for our quiz so i'm going to jump down to the data section and i'm going to add an array called queets and we'll stick each queen inside an object so we'll add a content property and i'll just put some lorem ipsum in there and we'll add a date property and i'm just going to use the timestamp format for this so i'm going to jump to the console in chrome just run date.now to get the current date i'll copy that and paste that here i'll duplicate this object and just change the date so i'll just run date dot now again copy this date uh paste that in there i'll save that and we'll spit these out on the page using a v4 loop so i'll jump up to this quee which is here this q item i'll split the attributes and add a v4 and we want to loop through this quits array so i'll do v4 quit in quits and we also need a key property and for now i'm just going to use the date as a key although later on when we set up firebase we will add some ids to our quits which we'll also use as the key later on but for now i'm just going to set the key to quit date and save that and we now see two quits on the page so let's hook up the content and the date so i'm going to select everything inside this cue item label and instead output quet dot content and save that i'll do the same for the date which is here so double curly braces and quits dot date and i'll save that and i want to have a separator between each tweet so we can use the separator prop on the cue list which we used over here so i'll add separator and save that and this date doesn't look too hot so let's format this using the date fns package so i'm going to search for date fns in fact i'm just going to go straight to date fns.org i'm going to jump to documentation and getting started and i'll jump down to installation so we can install this with npm install date fns so i'm going to copy that jump to my terminal and kill the dev process and just run that command and that's installed so i'm going to launch the dev process again with quasar dev and that's running again so i'm going to jump back to date fns and if we look down at the bottom here we can use this format distance method to output a date in a relative format such as three days ago like this so i'm going to copy this import line and add it to the top of our script section so i'll paste that here and we don't need this sub days method so i'll get rid of that let's set up a filter which will use this method to format the date so it's going to collapse the data object out of filters object and we'll create a filter called relative date and this is going to expect a value and we need to return a value so i'm just going to copy this line from this example i'll paste that there and i'll just stretch this out a sec so this is going to expect two dates two parameters and it's going to return the distance between those two dates in a relative form such as three days ago so in the second parameter here we have the current date and this first parameter we want to pass in our date so i'm going to replace all of this with value and save that and now let's use this filter on our date here so i want to scroll up to our date which is here and then just add a pipe and the name of our filter relative date save that and we can now see some nice relative dates here after the user types in some text here and clicks on the quit button then we want to add the new quick to our quits array so that it's displayed here so i'm going to add a click handler to this quick button which is here so i'll add a click and we'll trigger a method called add new quit i'll jump down to the script section and add a methods object and add this method add new quit and for now i'll just log out add new quee and make sure that click handler is working so i'll clear the console click on the button and we see that being logged out so what do we want to do here well we want to set up an object such as this and we want to set the content to the content that the user entered and we want to set the date to the current date then we just want to push that object to this quits array so we'll set up that object first so we'll call this new quet set that equal to an object and we need a content property which we're going to grab from this new quick content property which is hooked up to this input so we'll set this to this dot new quick content and then we need a date property with the current date so we can just fire date dot now to get that and now we just want to push this quick to our array of quits so we can just do this.quits dot push and then pass in this you quit object save that let's see if that's working and it's worked it's added our quick to the list and the relative date is working however this is right at the bottom and really we want our new quits to be at the top so instead of pushing it to the quakes array we'll unshift it instead so i'll just change push to on shift save that and reload let's try that again and yeah that's working how we want it to now [Music] let's add the ability to delete a tweet when someone clicks on one of these delete buttons so i'll add a click handler to this button so i'll scroll up to these buttons and this is the delete button so we'll add a click and we'll trigger a method called delete queet and we'll just pass in the whole of the quit object so i'll pass quit in here and we'll set up this method so i'll add that here so delete queet pass in the quit object and for now we'll just log out this quit object and i'll just change this string here to delete queet and save that and i'll open up the console uh click on one of these delete buttons um we can see that log being fired and we can see the data from the queen whose delete button was clicked so now we just want to remove the correct quet from our quits array and i'm just going to do this based on the date for now although later on when we set up firebase we'll do all this stuff based on ids instead but in this deletequick method i'm just going to grab the date to delete from this quit so i'll put this in a variable called date to delete so quite date so we want to delete the quit in the array which has this date here which will be in this variable so we could use the find index method to find the index the position of the q in the array which has this date so we can do let's index and then we can do this.quits dot find index and this is going to loop through each item in our array so we need a placeholder and i'll just use quit as a placeholder then we want to fire a method with our criteria i'm just going to stretch this out a bit and we just want to see if quite date is equal to this date here so equal to date to delete and that should give us the index of the tweet that we want to delete so i'll just log out the index for now save that so click on this first delete button and yeah we see index zero click on the next one you see index one so now we just want to remove the item in the array at the position of this index so we can now just do this dot quits dot splice and pass in the index as the first parameter and then just pass in one as the second parameter so that we only delete one item uh i'll just remove these console logs and save that now let's see if it's working i'll just reload click on delete and yeah it seems to be working and just to make sure it's deleting the right quits because these are both identical i'm just going to put some different text in one of these tweaks and i have this little chrome extension called quotes which will generate a quote so i'm just going to use that just so i don't have to keep typing loads of tweets i'll just paste that in here and i'll just get rid of that single quote and save that okay so i'll try and delete this one yeah it seems to be deleting the correct tweet if you found this video useful so far make sure you smash the like button and leave a comment telling us what you think about quasar [Music] let's add some nice animations for when our tweets disappear or appear in our list here before we do that i just realized that after we add a quick this input remains populated with whatever we just typed so i'm just going to quickly fix that so what we can do in this add new quick method at the end is just set this new quick content property which is bound to this input back to an empty string so we can just do this dot new quick content equals empty string save that let's try that again yep the field is now cleared okay back to animations uh quasar has a built-in animation helper which makes it really easy for us to add animations to our elements and components when they appear or disappear on the page so i want to jump to the quasar site and we want to go to quasar options and helpers and animations so we can use any of the animations from animate.css so i'm just going to click this link and open that so we have all of these different animations we can use and i'm just going to use a nice and simple fade in and fade out animation but feel free to use some of the more fancy animations if you want and we do need to note these class names here fade in and fade out because if we jump back to this animations page on quasar we do need to add these animations to our quasar.conf dot js file to this animations array like this so i'm just going to open up the quasar config file quasar.com.js and i'll search for animations i'm just going to add fade in and fade out to this array and save that and if we scroll down here it shows us how to use these so if you want to add an animation to a single component such as a button then we can just surround it in a transition element with these props and replace this fade in and fade out with whichever animation that we want to use but if we want to wrap multiple elements which we're going to do because we're going to be doing this on a list which is being split out with a v4 loop then we want to use this transition group component instead so i'm just going to copy the opening tag of this transition group component jump back to page home dot view and find our quits this is the queue item here and i'll just collapse that so we want to surround this in this transition group component so i'll paste the opening tag here and indent that and then i'll add the closing tag at the bottom and i'll just indent the cue item and save that and we don't need to change these classes here because i am using the fade in and fade out animations but if you're using a different animation then you need to update these so let's see if that's working i'll just reload the page and add a new quit and yeah it did have a brief fade in animation there and if we delete one we do see it fade out and i'd like to slow this down a little bit and so what we can do is just add another class to each of these props here of slow and you can also use slower as well well that's a bit too slow so i'm just going to use slow and this should slow down the animation a little bit so i'll add a new tweet here and i'm just going to start using this quote generator thing and yeah i think that's a little bit nicer and if we delete it yeah it's looking pretty good and we do have an issue now with our quits can you tell what it is we've lost our separator between each of our tweets so why has that happened well if we just inspect our cue items here and have a look at what's going on here's our cue list and here's our queue item and the reason we've lost that separator is because adding this transition group component has added this span around all of our cue items so if i just temporarily comment out this transition group both the opening and closing tags and save that now we see the separator again and that span that we saw has disappeared so if i click on a cue item and take a look at the styles actually i don't think there's a separator on the first queue item so i'll look at the second cue item and we can see the style here which is adding that border and the reason we lose the style when we add that transition group which adds that span is because this selector is looking for direct children of the containing component so what i'm going to do is copy this border top property here and put this transition group back in then i'm going to add a class to our queue item of queet and we'll just set up some custom css to put the separator back in so i'll scroll down to the style section and i'll add that here so we'll target the quit class and i'll paste in that style rule and get rid of the semicolon because you don't need that in sas save that and we can now see the separator again however it's also added it to the first quit as well which is making this line at the bottom of the divider thing look a bit too thick so what we can do is change this selector here and add a not selector to it so that it ignores the first child so the first cue item within the cue list so we can just add colon not then parentheses and then colon first child and if we save that we now see the separator disappear from the first child but we'll still see it on all of the tweaks which are below the first child [Music] okay we're almost done with the front end for this app but there's a couple of final design tweaks i want to make and the first one is i don't like the fact that this column with our relative date is squishing the tweet content over here and also this column is changing width depending on the text so if we scroll down to this one with two minutes the column is a lot less wide and also these icons are sometimes right over here and sometimes over here so instead i'm going to move this relative date next to the handle which is how it looks on twitter anyway so we just have the name the handle a bullet and then the relative date and the other thing is i don't like the fact that when we have a long list of quits and we scroll down this left draw disappears like that i think it would be better if these navigation links stayed up here which is how it works on the twitter site if we scroll down all of this stuff stays in place so let's do the same thing on our app so let's start by moving this relative date next to this handle so i'm going to jump to our cue item with the queet and our relative date is here so i'm going to cut that and get rid of this cue item section and scroll up to our handle and i'll add a space after that and then a new line then i'll add a bullet by using and b u l l and semicolon and then we'll just spit out the relative date there so i'll save that and that's looking a lot better i'll just add a load of new creates and yeah that's looking a lot better now and let's see if it looks okay on mobile so this relative date is sometimes being spread across multiple lines so what might do is just add a break tag before this relative date that only gets added on mobile so that this relative date gets pushed down to the next line so what i'll do is add a break tag here um we only want this break tag to be displayed on devices which are less than medium so i'm going to add a class of lt-md and save that and on mobile we see the relative date is pushed down to a new line but on desktop we see it side by side with the name and the handle okay now let's fix this issue of the left draw scrolling up the page when we scroll down a longer list of quits and quasar has a scroll area component which we can use to make a particular part of our app scrollable so what we could do is put everything in our home page within a scroll area so that when we scroll down our list of quits we're just scrolling down the scroll area that's surrounding everything on the home page so i'm going to jump to the quasar site and a few components and scroll area we see a basic scroll area here so i'm going to click on view source uh i'll just copy the opening tag for this cue scroll area component and i'll place that at the top of our q page just here i'm just going to collapse everything else for now and put the closing tag at the bottom here and then just indent everything save that and this is working except this scroll area is currently way too small and we do need to specify the width and height of these scroll area components in order for them to work so what we could do is make our page our q page component relatively positioned then we could make this scroll area component absolutely positioned and set its width and height to 100 so it fills up all of the available space on our page and quasar has some positioning classes we can use to do this so i'm going to jump to the quasar site and then style and identity and positioning so we can use this relative position class to make an element relatively positioned so let's add that to our q page so class relative dash position save that and then to make this q scroll area component absolutely position we can use this absolute class so i'm going to remove this style attribute here and add a class of absolute and we also want to give this component 100 width and 100 height uh maybe we could use this full screen class for that which says fixed position covering all window real estate so i'll add that class as well to the cue scroll area and save that let's see how that's looking and yeah it's looking pretty good so now when we scroll down our tweets we only scroll down this scroll area and everything in our layout is staying fixed in place let's just make sure it looks okay on mobile yeah looks okay okay so i think we're done with all of the front end for our app let's set up a simple real-time back-end for our app using a firebase cloud firestore database [Music] let's set up a firebase cloud firestore database to store all of our quit data and give us real-time data sync across all of our devices and everything we're going to be using here from firebase is going to be free for reasonable amounts of use but just bear in mind that if you create an app with a firebase database and millions of people download it then you will be expected to start paying so you might want to check out the pricing page at firebase.google.com pricing where you can see all of the limits that are available on the free plan and then you just want to go to firebase.google.com and click on go to console and if you've not already signed up it'll probably ask you to sign up and sign in with your google account but i'm just going to click on go to console and then i'm just going to click on add project and we need to enter a name and i'll call it quitter click on continue i'm going to disable google analytics i'll click on create project it's finished creating the project so i'm going to click on continue and we're going to be creating a cloud firestore database so i'm going to click on cloud firestore on the left here click on create database and i'm going to click on start in test mode just to make it easy for us to start working with our database but just bear in mind that anybody with your database reference will be able to view edit and delete data in your database when you have it set to test mode and i'll click on next and then it asks us to choose a location i'm not sure what difference this makes but i'm just going to click on enable okay it's created our database and we can see it here and it's empty right now and cloud firestore databases are made up of collections and collections contain documents and each document is basically just a javascript style object so let's start a collection for our quits so i'm going to click on start collection and i'm going to call this quits click on next and it's asking us to add our first document and each document needs to have an id so i'm just going to click on auto id so that firebase will generate an id for us let's add a quick here and our quets have a content field and a date field so let's add a content field and i'm just going to use that quotes extension to paste in a quote here and then i'm going to click on add field and add a date field and this is going to be a number i'm just going to use date dot now in the console to generate a date for us so date dot now then i'm going to copy this paste that in here and click on save so we can see our quits collection here and all of our documents will be displayed here and this is the document id here and if we click on that we can see all of the fields in that document so let's add a few more i'm going to click on add document click on auto id and add a content field and again i'm just going to use this little extension click on add field and we'll set a date set it to type number and again i'll just use the console to generate a timestamp copy that paste it in here click save and we'll add another document auto id content and i'll paste in some content add a date field set it to number and again grab the current date with date dot now and actually for this one i'm gonna set this date to an hour ago so we can make sure uh ordering and stuff like that is working and there are three million six hundred thousand milliseconds in an hour so i'm just gonna copy this and do that timestamp minus three million six hundred thousand and i'll copy this timestamp and add it here and i'll just add one more document add the date and grab the current timestamp date.now paste that in there click save okay so we now have a decent amount of data in our database but to get access to our database we need to set up an app so i'm just going to stretch this out and open up this sidebar we want to go to project overview and here's where we can add it up we want to add a web app so i'm going to click on this web icon give it a name i'm just going to give it the same name quitter and click on register app and it tells us how to initialize our database with some script tags but i'm not going to do it this way because the correct way to initialize a package like this in quasar is to import the modules we need and use a boot file so i'm going to leave this open though because we're going to need this config object later on but i'm just going to click on this get started link down here and open that in a new tab and it tells us how to get started here i'm going to scroll down so we've already created a firebase project and we've already registered our app with firebase so step three add firebase sdks and initialize firebase we want to click on using module bundlers here and so first of all we need to install firebase to our project so i'm going to copy this and jump to our terminal kill the dev process and run that command to install firebase okay that's finished installing we jump back to this firebase page it tells us how to initialize firebase with these two code samples here and we're going to add these to a boot file and again a boot file allows us to run code before our app starts so i'm going to jump to the quasar site on quasar cli and boot files and i'll jump down to when to use boot files so boot files fulfill one special purpose they run code before the apps view root component is instantiated while giving you access to certain variables which is required if you need to initialize a library interfere with view router inject view prototype or inject the root instance of the view app we don't need to do anything with view router or the view prototype or anything but we do want to initialize our connection to firebase before our app starts so that we have immediate access to our database when our app is ready and if we scroll down to usage of boot files it shows us how to generate a boot file we can just run quasar new boot and then the name so i'm going to jump back to the terminal and run quasar new boots and we'll call this firebase and it says it's generated a boot file in the source boot folder and we can see it there and it also says make sure to reference it in quasar.com.js and the boot section so i'm going to open up quasar.com.js and search for boot um we just need to add firebase to this array here and save that and now let's open up this firebase.js boot file and in a boot file we can't access the app the router and the view prototype but we're not going to need any of that stuff here so i'm just going to delete all of this and i'm going to jump back to that firebase page and copy this first example here and paste that in here and i'll get rid of all of these comments and we only need to import the modules that we need and we do need firebase from firebase app but we don't need analytics so i'll get rid of this line and we don't need auth we're not going to be doing any authentication but we do need firestore so i'll leave that there and i'll just get rid of these semicolons because i've not been generally using them and i'll jump back to this firebase page and it tells us how to initialize firebase in our app after we've imported all the modules we need so i'll copy this example and paste it into our boot file and i'll get rid of these comments and that config object that we saw before we need to put that in here so i'm going to jump back to this other page which was displayed after we created the web app i'm going to copy everything inside this config object i'll just paste that in here there's one more thing we need to do if we jump back to that firebase page and scroll down to step five and if we jump to cloud firestore which is what we're going to be using and scroll down to initialize cloud firestore so we just need to fire this firebase.firestore method and assign it to a variable so i'll just copy this line and paste that to the bottom and i'll change var to let and get rid of these semicolons and this db variable will give us access to our firestore database so we want to export that so that we can use it anywhere within our app so i'm just going to add export default and then db and save that and this boot file should be ready to go now and we should now have access to our firestore database with this db variable so i'm just going to launch our app with quasar dev make sure we don't have any errors and it's launched our app and we don't have any errors so let's grab the queets that we created in our database and display them in our app [Music] let's grab our queets from our quits collection in our database and display them within our app so i'm going to jump to the firebase docs page and over on the left here under cloud firestore i'm going to go to read data i'm going to jump to listen for real time updates i'm going to scroll down to view changes between snapshots and this code sample here will allow us to add real-time data sync to our app across our devices because this on snapshot here is a hook and this hook will be fired every time the data in the collection that we specify here changes and we can determine exactly what happened whether a document was added or modified or removed and then we can fire code to update our view accordingly so let's say we're using our app and somebody else say jim is also using our app and they add a new quite well this on snapshot hook will be fired on our device and we can determine that a quit was added and we can then add that quit that was added by jim to our view and likewise if jim modifies or removes a quit this hook will be fired and we can update our view on our device accordingly so it's using hooks like this in firebase which makes real-time data sync across devices possible so i'm going to copy this example and i'm going to jump back to our code and first we need to get access to this db variable in our home page so i'm going to jump to pagehome.view and then at the top of the script section i'm going to import db from and then the path to our boot file which is source slash boot slash firebase and we don't need to put in the dot js and then we want to trigger this hook that we just copied and we could do this in a mounted hook i'm just going to collapse the data and the methods and the filters we'll add a mounted hook at the bottom here before we paste in this hook i'm just going to clear out the hard-coded quets that we added so i'll just comment out these quits here and save that so that we know that any quets that appear here are coming from our database and i'm going to jump back down to this mounted hook and paste in this code sample i'm just going to fix the indentation a bit so this is going to access our database and it's going to grab the collection that we specify here and our collection is called quits so we want to put quits in here i'm just going to change these double quotes into single quotes and this dot where method is going to filter our results by some criteria and we don't need to do that we just want to grab all of our quits so i'll get rid of this where method i'm just going to move this on snapshot up to this line and nudge everything back so we're going to grab our quits collection and then every time that quits collection changes this on snapshot method will be fired which will return a snapshot of all of our data and then we can get an array of all of our changes by firing this dot changes method on the snapshot and then we're basically just looping through each of those changes and each of those changes will be an object which will have a type property which will tell us the type of change so whether a document was added modified or removed and we can also get access to the data which was added modified or removed so i'm just going to do a little bit of formatting here i'm going to select all these double quotes and replace them with single quotes because that's generally what i've been using and i'm going to get rid of any semicolons because i've not been using them i'm going to update the text in these console logs so instead of new city i'm going to put new quit and modified quit and removed queet so let's save this and see what gets logged out so i'll reload the page and open up the console and we can see new quick being logged out four times for each of our tweets because we have four in our database because this if statement here will be fired in real time whenever a document is added to our database but it will also be fired once for each document in our database when we first connect to the database which is why we're seeing these logs here and we have the data for each of our quits so what we can do here in this if statement is just push the data object for each of our quits to our quits array in our data and so our data is in here in change.data so instead of firing this out three times like that i'm going to put that in a variable at the top of this for each so i'll set up a variable called quit change set that equal to this change.data and i'll replace all of these with this variable so quit change and so what we can do now in this added if statement is just add this quick change object to our quits array and we should then see each of the tweets appear on the page so what we can do here is this dot quits on shift and pass in quit change uh let's save that and see if it's working i'll just reload that uh it doesn't seem to be working cannot read property quits of undefined and that's because these functions here are normal javascript functions so when we use the this keyword it will refer to this function here instead of our view instance so we can just change these functions to arrow functions so i'm just going to get rid of function and the first parentheses and get rid of this parentheses and i'll just add an arrow there and i'll do the same on this function as well let's save that and try it again uh we can now see our tweets on the page however these tweets are not in the correct order because this one at the top here is from two hours ago and these other ones are from one hour ago so we want to order these by date and if we jump back to the firebase page and jump to order and limit data we can use this order by method to order our data by a particular field so after db.collection quits i'm going to add dot order by uh we can just pass in date i'll save that and our quits are now in the correct order we see that all this one down at the bottom and this if statement here will now be fired whenever a quit is added to our collection in the database and so just to demonstrate that i'm going to jump to the database and drag it over here and just drag this over a little bit and i'll add a new quit here i'll use auto id add the content field i'll just grab a quote from that extension paste that in there add the date field set that to a number and i'm just going to use date dot now to grab the current date and paste that in here and hopefully when i click save we should see this new quit appear in our list of quits at the top there so i'll click on save and we see that new quit appear [Music] let's add the ability to add a tweet to our database to our quick collection when the user clicks this button because right now it's just adding the quick to our local quits array and so we do see it here but if we refresh the page then that data is gone so i'm going to jump to the add new quick method which is fired when we click this button and that's here so we still want to set up a new object like this and we still want to clear out this new quick content property which clears out this input but we no longer want to add this new object directly to our local quits array here what we want to do instead is add this nucle object straight to our firebase database to our quick collection because when we do that this on snapshot hook will be fired because we made a change to our collection and change.type will be equal to added so this if statement will fire and at that point the new quick will be added to our local quits array and then displayed on the page so we'll jump back up to this add new creep method and i'll comment out this line and what we want to do at this point is add this new quee object straight to our quits collection in the database so i'm going to jump back to the firebase docs page and i'm going to go to add and manage data and add data i'm going to scroll down to add a document and there are two ways we can add a document to a collection we can use this set method but if we use that method then we need to specify the id where that document should be stored but if you want to add a document and let firebase generate the id for us then we can use this add method so i'm just going to copy this code sample here and we'll paste it here in our add new creep method and i'll just fix the indentation i'm going to replace all the double quotes with single quotes and i'm going to remove the semicolons we want to access the quits collection so i'll change this here to quits and the data that we want to add is just this new quit object so we can just select this object in here i'll just paste in new quite and i'm just going to format this a little bit i'm going to move the then block up here then i'm going to move this catch block up here okay so let's save that and see if it's working so i'll add a new quit i'll click the button uh yeah we see it appear on the page uh let's just make sure it's been added to the database and yeah we can see it there uh let's make sure we can still see it if we reload and yeah we do let's add the ability to delete a quick from our quits collection in our database and before we handle actually removing a quick from the database when this delete button is clicked let's handle removing a quick from our local quits array in this on snapshot hook in this if statement here and we want to make all of our local state changes or all of our local data changes inside this hook the reason being again just to remind you this on snapshot hook will be fired every time the database changes so even if somebody on a completely different device adds modifies or deletes equate this on snapshot hook will be fired on our device and so we can add modify or remove the appropriate quet from our local state and update our view accordingly so it's making local state changes in this hook and only in this hook which makes live data sync across devices possible and so if equate is removed from our database then this if statement should be fired and we should see this console log being fired out so let's manually remove a quick from our database and see what we see so i'm going to drag the database over here and open up the console in our app i'll just clear the console uh let's delete one of these quits so we can just click on these buttons here and click on delete document and click on start delete uh we can see that log being fired out and we can see the data for that quick we can see the content property and the date property so now what we want to do at this point here is remove the same quick from our local quits array thus removing it from the view and we could remove it from our local quits array based on the date property however there's always the chance that multiple tweets could have the same date so it would be better if we could delete the tweet based on these ids which have been generated by firebase instead because these ids will always be unique but we don't currently have access to these ids right now we only have access to the content property and the date property however if we jump back to our on snapshot hook then we can actually get access to the id at change.doc.id like this change.id so let's add this id to our quick change object here which currently just contains the content and date properties so what we can do is add a new property to this quick change object and id property and set it to this id so we can just do quit change dot id equals change dot dot dot id so i'll save that and hopefully now when equate is removed from the database we should see the id in this quick change object as well so let's delete a document from our quits collection and see if we can see the id being logged out so i'll click on this and click on delete document and start delete we can see the quit object being logged out and we can now see the id as well in this new id property and we should see the ids in our local quits array as well so if i go to view devtools and try and find this page q page container and page home we can see our quits array here we do have the ids and currently if i jump back to page home dot view on our list of quits we're still using the date property as the key and it would be better to use these ids instead because we know they're always going to be unique so i'm just going to change the key to quit id instead and save that okay so now that we have the id of the quit that was deleted we can use that id to remove the same quet from our local quits array so i'm going to jump back down to uh on snapshot hook and this if statement here uh let's start by finding the index of the same queen in our local array so i'll add let index and then we can do this dot quits dot find index pass in a placeholder and a callback and we want to find the index of the queen where the quit dot id is equal to the id in this quick change object so i'll just put quit change dot id so that should give us the index and we can then just use the splice method to remove the quit at this position from the array so we can just do this.quits dot splice pass in the index and pass in one so that we only remove one item and let's save that and see if it's working i'll just reload the page and then clear the console and open up the firebase console let's delete a tweet so we'll delete this top one here so i'll delete that and hopefully we should see it disappear from the view and now we also want to delete a tweet from our database when this delete button is clicked as well because right now it's just deleting a quick from our local quits array but not from the database so let's jump to our delete quite method which is here and i'm just going to remove everything inside this method and let's find out on the firebase docs page how we can delete a document from our collection so over on the left here i'm going to jump to add and manage data and then delete data and so to delete a document we just need to specify the collection as usual and specify the document that we want to delete so we pass the document id into here and then we just fire this delete method so let's copy this example and paste it into this deletequit method i'm just going to fix the indentation remove the semicolons and replace the double quotes with single quotes and so we want to access the quits collection now we need to pass the document id that we want to delete in here and we're passing in the quit object of the quit that was clicked in here and so we have access to the id of the quick that was clicked at queet.id so we can just pass quit.id in here and so hopefully this should work now so i'll save that reload clear the console and i'll click on this delete button yeah it looks like it worked we saw it removed from the view and we see document successfully deleted which is coming from the then block on this delete method uh let's make sure it was removed from the database and yeah we only have one document in the database now okay so we've almost finished our app now there's just one more thing that i want to do [Music] so we can create read and delete our quits but we can't currently update them so let's complete our crud set up by adding the ability to update a quite one thing we could do is add the ability to like a quet when this heart button is clicked here so first let's just set up the front end for this because if a quit is light then we probably want this heart icon to be filled i'll maybe give it a color as well so i'm going to delete all of the tweets that are on firebase i'm just going to drag this back over here we only have one document left i'm going to delete this quick because we're going to need to add a new field to our quits so i'm going to delete this and jump back to our app and i'm going to uncomment these hard-coded tweets that we added before i'm going to add a new property to each of these called liked and i'll set one of these to false and then the other one to true and we're also going to need to add some id properties now because our v4 loop is now using an id property as the key so let's just add some dummy ids here so i'll just set these to id1 and id2 and i'll save that and so this quit here is the one that's light one where light is set to true so we want this heart icon to look a bit different i would like it to be a filled icon if possible and a different color as well so we got this icon from font awesome so i'm going to jump to the quasar site and then the icon page and then i'll jump through to font awesome search for heart and scroll down so this is the one we're currently using but when a tweet is liked we could use this filled version so i'll click on that and i'll copy this example here let's jump up to this heart icon which is here and for now i'm just going to paste out this html that we copied down here so if the liked property is set to true then we want to set this icon prop to these classes here otherwise we want to set them to these classes so what we could do here is bind to the icon prop and add a ternary if statement here so if quit dot liked is true then we can spit out these classes so i'll paste that in these quotes here otherwise stretch this out a bit we can spit out these classes here and i'll just get rid of this icon prop i'll get rid of this i tag as well let's save that and see if it's working yeah this second one has a filled heart and the other one still has the outline heart and i'd also like to change the color as well so what we could do is bind to this color prop so colon colour and again if quetz.liked is true then we could try out putting pink as the color otherwise we'll just output gray and i'll get rid of this color prop and save that and yeah it seems to be working we now have this lovely pink heart okay so our front end is now ready to display quits which are liked so let's comment out these hard-coded quits in this quick array and save that and when we add a new quit now we're going to have to make sure that tweet object that we pushed to the database has this new light property so i'm going to jump to add new quick this method and when we set up the new quit object here we also need to add this light property and that should be set to false by default so i'll save that and reload uh let's just add some quits here and make sure that the quits in the database have this new light property so i'm just going to use this quotes extension to add a load of quotes uh let's jump to the database you can see our new documents here and yeah they all have this light field so let's change one of them to true and update that and reload the page and yeah we can see this one has our pink and filled heart so before we handle the click event on this button let's just make sure our view gets updated when this on snapshot hook is fired when a quit has been modified so let's first of all grab the index of the tweet that was modified in our local quits array so i'm just going to copy this line here from the removed if statement and paste that here so this will give us the index of the quick that was modified and the modified data will be in this quick change object so what we could do is use object assign to copy the data from this object which has come from the database to the quit object in our local quits array at the position of index thus updating the appropriate quite in the view so what we can do here is object dot assign and first we want to pass in the object that we want to assign to which is the object in our local quits array at the position of index so we can just do this dot quits square brackets index and the second parameter we pass in the data that we want to copy here so we can just pass in quick change i'll save that and reload the page and if we jump to the database let's drag it over here and this document where light is set to true this one here let's change this back to false and we should hopefully see this heart change back to the deactivated version so i'll set this to false then click update and yeah it seems to be working i'll just change it back to true again and yeah that all seems to be working so i'll set this back to false okay so now all we need to do is handle the click on this heart icon so when the user clicks this button then we want to update the appropriate tweet in our quits collection on firebase so i'm going to jump to this heart button which is here and add a click handler so at click and this is going to be a toggle because we're going to be able to toggle between light and not light so we'll trigger a method called toggle light and we'll pass in our qui object so that we have access to the id in this method because we're going to need that to update the appropriate quit on firebase and we'll create this method in our methods object so toggle quet pass in the queet and for now let's just log out toggled actually i've spelt that wrong that should be toggle quick so we'll just log out toggle quit here we'll log out the tweet as well so save that uh reload uh click on one of these heart buttons toggle light is not a function let me just jump back to that click handler uh this should be toggle light so save that i'm still seeing an error here why is that oh this should be toggle lights not toggle queen so i'll just update that okay save that let's reload uh click on one of these like buttons yeah we can see toggle light we can see the tweet that was clicked we have the id there so we can use that to update the appropriate tweet in our quick collection on firebase so i'm going to jump back to the firebase docs i'm going to jump to add data and update a document so again we just do db.collection and the name of the collection then we fire the doc method and pass in the id of the document we want to update let me just fire this update method and pass in an object with the new data so i'm just going to copy all of this and paste it into this toggle light method and instead of having this ref in a variable i'm just going to copy this ref and paste it here get rid of this comment and get rid of that var i'm just going to fix the indentation get rid of these semicolons and replace the double quotes so we want to do db.collection and we want to pass quits in here and then we want to pass the id of the document that we want to update in here and that's going to be our quit dot id so we can just put queen.id in here what do we want to update we want to update the light property and we want to set it to the opposite of this quite's current liked property so if that's currently false we want to set it to true and if it's currently true we want to set it to false so we can just set liked to the opposite of queet.liked okay so let's save that and see if it's working i'm gonna reload the page uh right now none of our tweets are liked let's click on a like button and it seems to have worked we see it change in the view and we see documents successfully updated which means this then block is being fired and let's make sure it worked on firebase so it was this tweet here and yeah light is set to true let's make sure we can toggle it back again oh yeah we saw that change on firebase there okay we're almost ready to start deploying this up to different platforms we just have a couple of tiny little issues that we need to fix okay we just have a couple of final issues to fix and the first one is when we're looking at this in the mobile view when we click on this button our left draw is all messed up and this is being caused by this full screen class which we added to this cue scroll area which is surrounding everything that's on our home page because if we inspect this element and look for this scroll area which is here and we look at this full screen class it's adding a z index of 6000 which is placing this q scroll area above the left draw however there's some other classes that we can use instead of this full screen class if you go to this other css helper classes page on the quasar site we can use this full height class and this full width class instead to make the cue scroll area full width and full height without adding that z index so i'm just going to replace this full screen class on the cue scroll area with full width and full height and save that let's reload the app and that's now fixed let's just make sure this cue scroll area is still okay if we have a load of tweets so i'll just add a load of new and it still looks okay and it looks okay on desktop as well and the other issue we need to fix is to do with our on snapshot hook this hook is currently being initialized every time we hit the home page so if i reload the page we see all these new logs from firebase or if we clear the console and jump to the about page and jump back to the home page we see them all being logged out again and also if i clear the console and click on a like button you can see this modified quit log being logged out twice and that's because we visited this home page twice so this hook has been set up two times and we only want to set this hook up once and never again after that and we can fix this quite easily by just making the pages of our app keep alive in the background so that when we navigate from page to page the page that we just left keeps alive keeps running but we just don't see it and to do this we want to go to main layout.view on this cue page container component and this router view component here is where our pages are rendered and if we want to make this router view keep alive thus making our pages keep alive then we can just surround this in keep alive tags like this so i'll save that and i'll reload the app so we see all of our new create logs and if i jump to the about page i'll just clear the console and then back to the home page then we don't see those logs again and if i click on a like button we only see one log from our on snapshot hook so let's just make sure everything is working in both desktop view and mobile view so we'll do desktop first so i'll reload the app and we can navigate our pages we can toggle the left draw and our quick button is disabled when there's no text in here let's just make sure the character limit is working yeah that's working we can add a quick uh we can like a quit we can delete a quit if we reload the quick that we just deleted has been removed let's just check everything in mobile view i'm going to use the device toolbar and set this to iphone 678 plus so i'll reload the app okay so we can toggle the left draw and we can navigate our pages uh let's make sure the character count is working yeah that's working um we can add a quick uh we can like a quit uh we can delete a create as well okay so quitter is now complete and it's working great in the browser in both desktop layouts and mobile layouts so it's finally time to create some real apps out of this sucker for ios android mac and windows let's get quitter running as a mac up and you do need to have a mac in order to do this and if you're on a mac this is super simple you just need to jump to your terminal i'm going to open up a new terminal because i want to keep the web version running and then we just need to run quasar dev dash m for mode electron because quasar desktop apps use the electron framework and i'll just fire that and we can now see quitter running as a markup and by the way if you're on windows and you run the command that we just ran you should see the windows version of the app launching in development mode and if we go to view and toggle developer tools we can even open up some developer tools for the mac version of our app and one thing that's really great is that we now even have view dev tools integrated and this wasn't here the last time i checked so this is pretty badass and we're seeing the mobile layout by default because this window is a little bit small by default although we can resize it up but what we can do to fix that is set a width for this browser window and set a minimum width as well so i'm going to jump to the code and if we look in our project we can see quasar has generated a new folder source electron and if we go to main process on electron dash main we can use this file to customize all of the stuff that happens in the main process so the native app side of the process and we can do all sorts of stuff here so we can customize these menus at the top add our own menus and options and trigger code when those options are clicked on we can set up a menu bar icon for our app up here we can interact with the user's file system and all sorts of stuff but for now i'm just going to give this browser window a width and a minimum width as well so i'm going to scroll down this file and here's where it's initializing our browser window and you can see these width and height properties here and if you want to see all of the available options then just google electron browser window and jump to this page and you can find all of the different options here so there's tons of stuff we can do and we do have a min width property and a min height property so i'm just going to set this width property to 1024 which i think is the starting width of our desktop layout i'll also add a min width property and set it to the same 1024 if i save that it will relaunch our app and it's made our window a little bit bigger and we now see the desktop layout and we can resize it up but we can't resize it any smaller than 1.024 okay so let's make sure everything is working so we can get to our two pages we can toggle the left draw we can display all of our quits and scroll down them let's see if the character limit and counter are working and yeah they're working and we can add a new quit we can like a quit and we can delete a quit as well i'll just demonstrate the live data sync across devices and when i launched the mac version it did kill my browser version so i just had to jump back to the terminal with the browser version running and kill the process and run quasar dev again but if i just get the electron version on the left and the browser on the right and if i add a new tweet here hey what's going on i'll click on quit we see the same tweak pop up instantly on the mac version and likewise if i like equate on the mac version we see it update instantly on the web version and if i delete equate on the map version we see it deleted instantly on the browser version so we now know for sure that all of our cross device live data sync is working [Music] let's get this running as a windows app and if you're on windows then you can just run the command that i ran before quasar dev dash m electron but i'm on a mac here so i'm going to build the windows version for production and then i'm going to launch it in a windows 10 virtual machine and to get quasar to build the windows version we need to make a change to our config file so i'm going to open up quasar.com.js and i'm going to search for electron uh in this packager option here we need to add an option of platform and we need to set that to win 32 and save that and now we just need to go to the terminal and instead of running quasar dev dash m electron we run quasar build m electron so i'll fire that okay it says build succeeded and by the way if it doesn't succeed then you might be able to fix this by just deleting your node modules folder and running npm install and then running the build command again and it says it's i'll put it to the dist slash electron folder and we can see that disk folder here and this electron folder and our windows app is in here stretch this out a bit and we can see our exe file here and i'm going to launch this exe in a windows 10 virtual machine i'm going to use virtualbox to do this and there is a little bit of setup involved here you need to download virtualbox from virtualbox.org so you need to download and install that and then you need to download a windows 10 virtual machine so if you just google windows 10 virtualbox and jump to this page on the microsoft site then you can download a windows 10 virtual machine for virtualbox here once that's downloaded and unzipped you should see a couple of files like this a vmdk file and an ovf file and if there's a third file with the file extension mf then you want to delete that file because it can stop you from importing the virtual machine properly and then you just want to double click this ovf file and it should add the virtual machine to virtualbox and you also want to go to settings and then shared folders and you want to share the folder on your mac where you keep all your projects by clicking on this button here so that you can get access to the generated exe file and then you can just launch your virtual machine by double clicking on it okay it's launched my virtual machine so i'm going to go to windows explorer then i'm going to go to network and we see this vbox server computer if we go in there i can see the folder that's on my mac that i've shared with this virtual machine so i'm going to go in there and jump down to the quitter folder uh dist and electron and i'm going to copy this folder with our app and paste it on the desktop and then i'm going to jump into that folder and we can see the exe file there and i'm going to launch that and we now see quitter running as a windows app and this is going to be a little bit slow because we're in a virtual machine here but on a real windows device the performance would be much better and let's just see if it's obeying our minimum width which we set in the process file and it is i can't resize it down any more than that uh let's make sure everything is working so we can get to both of our pages we can toggle our sidebar and we don't have a line along the top here however quasar has some classes which get added to the body that you can use to target particular platforms so what you could do is add a border to the top of the app but only on windows just to make this look a little bit better so we can display our quits and we can scroll down them uh let's see if we can add one let's check the character counter as well and yeah that seems to be working i'll click on queen and it's added our queen and we can like equate and we can delete a queet as well let's create an ios version of quitter and you do need to have a mac to do this although as a side note a couple of my students have told me that they managed to create ios and mac apps using a windows computer and i believe they used vmware and it's not something that i've tried so i can't confirm if it's possible but it might be worth investigating if you are on windows and you're interested in creating ios and mac apps but generally speaking you need a mac and you also need to have xcode installed and you can download this from the mac app store although i recommend downloading it from the apple developer site at developer.apple.com download more and you also need to have cordova installed globally because quasar mobile apps use the cordova framework and if you go to the quasar site and quasar cli and developing chord over apps and preparation shows you how to install code over there so you just need to fire this command and if you have trouble installing that you might need to add sudo to the start um once that's all set up we can then launch our app in the ios simulator so we just need to jump to our terminal and run quasar dev dash m for mode cordova dash capital t and ios and it's asking for a call over app id here and this id will be used by the app stores if you decide to deploy your app to the app stores so you need to be 100 sure that this id is unique and one way that you can make sure it's unique is by using a reverse domain style id such as com.dannyconnell.quitter it's pretty unlikely that somebody else would have used this id and it started up the ios simulator and it's launched our app as an ios app and shortly after it started up we can see the elements from our app but then they disappear and this might be because we're using the ui webview to basically display our app within this native app that's been created by quasar and it's highly recommended that you install the wk webview plugin because the older ui webview is now deprecated and apple will soon begin rejecting apps which use the older webview [Music] and if you go to the quasar site and search for wk webview and jump to switching to ios wk webview tells us how to install this so hopefully installing this will fix this issue although weirdly if we go to the about page and back to the home page then it works again but anyway i'm just going to install this plugin so i'm going to copy this command jump to the terminal we need to cd into this source card over folder that it's created so cd source card over i'll run that command i just copied and that's installed and we also need to add this preference to the ios section of the cordova config file and that's just in the root of this source code over file and that's here config.xml so i'm going to scroll down to this platform ios section i'm going to copy this preference tag here and paste that here and i'll save that i'll cd back up to our project folder and try running the dev command again so quasar dev dash m cardover t ios and while we're waiting i'm just gonna delete the app that it's already installed just to avoid any caching issues now we'll just wait for this app to start up so i've not been able to figure out what's going on here but i have just noticed that this simulator is running a really old version of ios 12.2 and the current version is 14 something so let's try and launch this up on ios 14 and see if it works so i'm just going to close this simulator and kill this process and to get a list of the available simulators we can cd into the source code over folder and run cordova run ios dash list and it will give us a list of all of the available simulators so let's try the iphone 12 on ios 14.3 so what we can do here is copy this device name and jump back up to our project folder and we can run the same command again quasar dev dash m card over dash capital t ios but then we add an extra flag dash e for emulator and then in quotes we can just paste this device name that we just copied let's give that a try and this time it started up the iphone 12 on ios 14.3 so fingers crossed it'll work on this simulator uh great it seems to have started up no problem on the ios 14 simulator and just to confirm that i'm just going to close the app and launch it again and yeah starting up okay and let's make sure everything is working so the left drawer is working and we can get to our pages you can see all of our quits and we can scroll down them no problem uh let's just make sure this input is working and yeah it's counting the characters and just to check the character limit i'm just gonna copy the text from one of these other tweets and paste that in here paste it again and just type a few more characters and yeah stopping us at 280 characters and let's see if we can actually add the tweet yeah it seems to have added it no problem and we can like quits and we can delete them as well [Music] okay finally let's create an android version of our app and there's a little bit more setup involved for android but if you go back to this preparation for called overwrap page on the quasar site which you can find at quasar cli developing chord overlaps and preparation it tells you everything you need to do here so after installing card over you need to download android studio and follow some installation steps and then after that's installed you need to use this sdk manager tool which comes with the android sdk and use that to accept some licenses and then you need to add the android installation to your path and it gives you some instructions on how to do this on mac linux and windows on windows you also need to install some other software as well but just read through all these steps and follow them very carefully but i'm just going to launch android studio then i'm going to click on this configure button and go to the avd manager android virtual device manager and i have an android virtual device set up here pixel 2 xl so i'm going to click on this play button to launch this emulator and now that the emulator has fully started up we can now launch our app on it so we just need to go to our terminal and instead of running quasar dev dash m card over dash t ios we want to run the same command but with android after the capital t flag and we now have an android version of our app and it seems to have launched okay let's make sure it's working so we can get to our different pages you can see all of our tweets we can scroll down them let's see if we can add a quet click the button and yeah it's added it uh let's see if we can light them yep seems to work and delete yeah seems to be working as well so we created an app with a beautiful front end a nice simple back end and live data sync across all the different devices and we deployed it to all these different platforms all thanks to the amazing quasar framework as well as vue.js and firebase and there's a lot more that you would probably want to add to this app such as adding a custom icon and splash screen and customizing the menus for the electron app handling errors and adding loading screens adding a settings page setting up some kind of state management for the app using something like vue x and breaking up your app into child components to make it more manageable and you can learn about many of these things and more at my youtube channel so please check it out at danny's dot link slash youtube and the link will be in the description and huge thanks to free code camp for hosting this video and thanks to you for watching [Music] [Music] you

Channel: freeCodeCamp.org

Views: 65,229

Rating: 4.9785867 out of 5

Keywords: create an app, how to create an app, create an app for android, first app tutorial, how to create an app for android, how to create an app for ios, app tutorial ios, how to create a mac app, android ios development, how to create an app for windows, electron tutorial, quasar framework, quasar, create an app for beginners, cross platform app development for beginners, create a hybrid app, how to create a cross platform app, vuejs, vue, vue.js, firebase, firestore, twitter clone

Id: la-0ulfn0_M

Length: 148min 50sec (8930 seconds)

Published: Fri Mar 05 2021