Full Stack Gmail Clone with Vue JS, Tailwind CSS, Node JS, Firebase, Google Auth, Vue CLI, Vue 3

what you need to install or have installed on your computer to actually get this project up and running so what you're going to need is node.js and view CLI so once you've installed all that you should be good to go so on that note let's open our code editor and I'm going to be using vs code so let's open them right up let's just maybe make my face a bit smaller yeah that'll do right so first we need to create a project so let's open up a terminal I'm going to say CD I'm going to keep this in sights and then we're going to say view create Gmail clone and now we want to manually select features we want root app and CSS preprocessors and that is it and uh choose a version of view number three history mode yes please with dart yep with error prevention only let not save and in dedicated config files save this as a preset for future projects nope awesome and that is done right now if we open that in our code editor so open folder Capital insights Gmail clone open them up yes awesome right now we're going to make a new folder in the main directory gonna call this back end and then inside that new file index.js and we want to open the terminal again and CD into back end and then say npm init and what does this say package name back end yeah and uh and uh and uh enter all this doesn't matter is this okay yes awesome there's our package.json right now we're going to install all of our dependencies for the entire project first so we don't have to worry about it later so if I just open this up a little bit more and clear this out and I'm going to say npm I body passer cause Express node Mon and Google off Library let's present that cool that is done we can see it all right there and now let's just duplicate this test and say watch node mon index.js save and for now this bit is done so let's just close this up and that right now so CD out at the back end double dot and now we're back in Gmail clone and we're going to say view add Tailwind there are uncommitted changes in the current repository yeah fine proceed generate Tailwind config minimal is fine okay and also for this we want to add in something called flow byte it's also from Tailwind but I had some problems with the tool tips so when I put the CDN in the header it started working so let's just open Chrome and I'm going to type in Flow by CDM and it's this one flowbyte.com quick start flow byte and we're going to scroll down to this section CDN so if I just grab that go into public index and just put it there just go back into Chrome and take the script copy that and just paste it underneath and that should be good for that right now let's install our packages so let's bring this up a little bit clear it out right now we want to say npm I Axis Firebase Google off Library moment pinia pinia plug-in persisted State uuid view material design icons and view three Google login I know there's a lot but now that should be good so let's enter awesome that is done right I think that's all of our dependencies installed so now we can actually start building Gmail all right okay let's get serious let's close all this and Gmail clone we're going to say npm run serve and now let's open that localhost 8080 there's our little site and this code editor I'm just going to pull over this side a bit just so we can see a little bit of it that'll do right let's go in app we can close this terminal we don't need it and all of this style stuff delete nav delete and save go into views and we're going to make a new folder and we're going to say template and then inside that new file and we'll say email view Dot View and this is where the fun starts right so template and then the div put an ID on it say email View and then class BG gray 50 and H screen and just a side note if you want some help with these classes go to extensions type in tailwind and install this Tailwind CSS intellisense and then that'll help you with all the classes cool right let's just close this side panel so we get a nice big View and let's just zoom in one beautiful now let's do another div class this is going to be Flex items Center and P2 now actually just so we can see this let's save this a sec open the side panel and let's quickly jump into router index.js and about we're going to modify so get rid of all of that and say email name get rid of that and then say component email view copy that go to the top duplicate that paste in email View and before it put template forward slash and then call that email View and then underneath this component we're going to have children and then we are just going to take this top one copy it paste it in get rid of that backslash get rid of the name and this component as home view is fine so we'll leave that like that let's save that and actually this home view at the top we can actually get rid of that so actually let's get rid of that save our page has gone blank so let's go forward slash email enter we have nothing which is perfect and now if we go back into email View and we just test this and we say cool save awesome right this is coming out so we know we're in business let's continue right we're going to put another div in this say class Flex justify start item Center and PX 3.5 let's go into components and this hello world we're going to rename to icon component Dot View to extensions but uh yeah okay whatever so icon component.view let's go in that and all of this stuff we're just gonna clear out get rid of all of that all of that add a setup to it and all of this stuff inside the div get rid of that and we're going to add an ID that is icon component and then another div class and now Flex item Center justify Center rounded fold cursor pointer W10 and h10 and inside of that what we're going to do is add a component and we're going to say is icon size icon size and then fill color icon color and put a colon in front of it right now let's make this so we can actually start seeing our work so let's import menu icon from view material design icons forward slash menu Dot View and underneath that we're going to just say let I icon is null and then say if icon string dot value equals menu we want to make the icon the menu icon so pretty much this component has a dynamic component inside of it as well so if you pass a prop and that prop says menu will have the menu icon if it says trash we have the trash icon and so on and so on now let's quickly Define our props so const Props Define props icon string which is a string duplicate icon color duplicate icon size and we'll just leave it like that for now because we can add the rest in later we just want to actually get to a point where we can see something now let's put our props to refs so const destruct icon string icon color and now equals two refs and we pass the props and I'm just going to pull that Define prop in this even though we don't need it in there when it's red and it's underlined as an error it annoys me and this should not be reactive that should just be view okay but so now we have a basic template set up let's go and use it so we can actually see something right let's go back into our side panel and fix this error we've got components hello world okay because we changed it so let's go into home View and just take all of that out and all of that and now save it error's gone cool let's get rid of that and now if we go back into email view we now are going to import that icon component so let's go below and say script setup import icon component and then copy that go in there paste that in close it off open him up and then we've got three props we've got icon string which is going to be menu icon color which is going to be 636363 and then icon size which is going to be a number so let's say 19 and put a colon there and if we save that oh we can see it already look if I just zoom in there's our icon we're actually starting to see something fantastic right so let's continue with this icon component let's do all the hover stuff so go back in and we're going to add two more props so let's duplicate twice and this icon size I've got string there let's just change that for a number because it is a number and then this we're going to say text which is a string and hover color which is also a string now let's take text add it in and also hover color add that in as well right let's go up and at the bottom of this div underneath the class we're going to have a another class that accepts a parameter and we're going to say hover color and then under that we're going to have to add some data attributes so we can open our tooltip so let's say data tooltip Target and we want these backslashes or back ticks whatever they are tooltip no arrow and then we want to say dollar sign girly braces icon string and then just duplicate that change Target to placement and just change all of this for bottom and take the colon off right so underneath this div we're going to do another one so div class and there is a lot of classes on this so I'm just going to smash through them inline block absolute invisible text access Z10 py1 px2 font medium text white rounded SM Shadow SM opacity zero tooltip dark BG gray 600 and delay 150. that was a lot right now and in this div we want to pass text and if we go back up just to above where it says class we're going to say ID and we can take this tooltip no Arrow copy it paste it right in there and then under this roll tooltip right now let's save that and go back to email View and let's pass some more props let's do hover color we're going to say hover BG gray 200 and then text that's going to be main menu and for this we're just going to add a little class that says minus ml2 and MR2 save that right now with a little bit of luck let's zoom in and see what happens oh look at that beautiful so now this takes away a lot of the copying and pasting because we've done all the work now so all we need to do is add all of the icons that we need into that component and just put a few if statements in with it so whenever we pass what icon we want the component does the rest for us so let's do that now back into icon component and there's quite a lot of icons to bring in so let's just copy this this one's going to be called magnify icon copy paste get rid of Icon duplicate tune icon copy that get rid of Icon duplicate help icon copy paste get rid of that duplicate Cog outline icon and then same again get rid of Icon duplicate apps icon same again get rid of Icon duplicate Arrow left icon get rid of Icon duplicate and the last one trash can outline icon and let's add that to the end there and get rid of Icon right let's go into our if statements so exactly the same as this copy it paste change this to magnify icon magnify copy and paste it again to an icon tune copy and paste help icon help copy and paste Cog outline icon we'll just call this Cog copy paste apps icon apps copy and paste Arrow left icon just going to call this back and then copy paste and last one trash can outline icon and we'll just call this trash okay right and that is all of it so I think we never have to come into this component ever again now what we can do is just pass the props and we're good to go man so let's test it let's go into email View and we got our component there and let's pass in a prop let's say trash save awesome there's our trash what about COG let's say Cog save it there's the Cog help save you get what I mean awesome right so let's put that one back to menu save it and now let's put in our Gmail logo so I'm just going to go to the repository and put in github.com and there it is Gmail clone Public Image and Gmail logo PNG there he is just download that save image as Gmail logo save let's go back to our code open the side panel go into public and say new folder image and then I need to go into the the downloads file just take this Gmail logo and drop it into image awesome now go back to email View and underneath icon component say image go into Public Image Gmail logo.png and let's just put a width on it of 107. save and there we go starting to come together with our little icon and the tool tip beautiful right next let's make our search bar so let's go underneath this div for another div class flex widthful and justify between and then say div class with full BG gray 200 Flex item Center P1 px2 and rounded LG let me just see if I can open that a bit more okay right this is where our icon component comes in handy so we can just copy this paste it right there indent and say magnify icon color is fine we change the text to search and the class we can just remove now let's save it and take a look coming together beautiful now underneath this we need an input so input and we're going to have a placeholder that says search mail and then let's add a class and we can open this because there's quite a few styles on this as well let's say widthful h10 BG gray 200 or the transparent border none Focus ring zero outline none placeholder gray 900 let's save take a look yeah he's looking pretty sweet now again our icon component comes in handy because we just copy and paste it so let's grab it copy go underneath icon paste icon string becomes tune text becomes show search options and that is it let's save it look at that how awesome is that we've got our icon as well a little text input with the tooltip tooltip there just beautiful now we've got a couple of issues with sizing let's see if we can sort that out let's go back up to the top and on this div before Flex say logo section let's go down to the bottom and open some style tags say Lang scss and we're inside the email view ID so put that and then we're going to say dot logo section and Min with 250 pixels let's save that have a look yeah that's better now awesome zoom out yeah awesome getting better okay let's go back to where we came from this icon now underneath this is our final section for the top navigation bit so underneath this div we're gonna have another one so div class Flex w32 justify between item Center and ml6 and what are we going to do for this well we're just going to copy and paste our icon component so let's grab it copy paste tune becomes Cog and text becomes settings paste it again and then this is apps and then the text becomes Google Apps save and let's take a look look at it man look how easy that is now it's just awesome let's check hover settings Google Apps look at it working like a dream okay so the final section we need for this topic is the user image and the user information like email and the log out button so we're going to make a user component as like a little pop-up menu so section so let's go well let's open the side panel we're going to make a new file in our component so new file and this is going to be user component Dot View and template with a div and an ID of user component and we're going to start with an image get rid of this alt and the source for now I'm just going to put a placeholder so if we go to placehold.it and I scroll down and we're just going to steal that so copy that go back to our code editor and paste that in and let's put it to 40 because 150 is massive and save that and let's import our component so we can actually see what's going on so go back to email View and under icon component put user component close it off close this side panel and now just import it so import user component from components forward slash user component save let's take a look okay coming together and actually just so we can see it without going back and forth when I just drag this over there and drag that over there beautiful now we can see it very good okay right so we got the same type of thing in this user component as in our icon component so we might as well go back into it and all of this data tooltip Target stuff and the placement we can just copy that use a component make a new line and paste it on there and get rid of these little ticks and at the end put user take this colon off and then this placement bottom is fine just indent that add a class rounded full width 8 and cursor pointer and we also want to add let's just save that a sec what does that look like yeah no it's a rounded image awesome let's go underneath this image and put a div and let's open this up and we're going to add an ID and we're going to copy this tooltip no Arrow user copy it paste it on now underneath that roll tooltip and then class and actually for this class we can just copy and paste from icon components go in here and just take all these from the class copy that use a component and pasted it let's intent save it and awesome that is it now inside this we're gonna say div and this is going to be Google account let's go underneath with another div say class text Gray 300 and let's just put a name let's put John Doe and then another div john.mail.com and put a class on it text Gray 300 let's close the sidebar right let's save that and have a look what that looks like save and let's refresh this page and if we hover over it yeah beautiful that is exactly what we want so now we need to make it open a little pop-up so when we click it so let's do that right underneath this let's put another div and we're going to say class absolute Z10 let's put this on a new line though because there's gonna be a lot right w80 right two BG white top 14 rounded LG and for now that should be good let's save it and inside that we need an image again so let's just go to the top and copy this because it's got the placeholder in it and paste it and indent it get rid of this tooltip stuff get rid of cursor pointer and change width 8 to 20 and mt4 and let's change this to um 70. save and let's just quickly go and have a look what is happening on our page ah so it is there okay cool let's sort that out uh I actually forgot to put that inside a div so if you just copy the SEC this image copy get rid of it put it div paste that inside and then on this div we add a little class and say w full flex and justify Center and then save that there we go right starting to come into place a little bit okay so let's continue and what I'm going to do is take this div copy it paste it below get rid of image and then add text Gray 700 with full is fine Flex is fine justify Center is fine we also want a mt2 and a text L G right now if you put the name in there again John Doe and we take this copy it duplicate it change the text LG to text SM and then pb4 and Border B now let's quickly just change John Doe to John Doe at mail.com let's save and take a look yeah okay you can see now it's definitely coming together right let's just add the final section to this which is the button so the sign out button let's go back to our code underneath this email we're going to say div class Flex justify Center My5 and then we want a button and there's going to be loads of styles on this so let's open that class and now let's say BG transparent text XS hover BG gray 100 text Gray 600 font Sammy bold py2 PX4 border border gray 300 and rounded and then inside the button for the text we're going to say sign out of Gmail we're going to save and take a look yeah man that's looking sweet awesome right now we can't open or close it so let's deal with that let's go to the bottom let's put a script tag set up and for now we're going to say let open menu equals ref false and we need to import that so import ref from View and then copy this open menu variable copy that go to the very top and then on this image we're going to say add click paste that in equal to not open menu and then on this div beneath we're going to say V show open menu so now if we save go back to our page let's refresh what's happening oh I did it the wrong way around sorry let's go back this is a negative and let's copy this let's go down and beneath this Google account section on this div add the V show and this is going to be true so now let's save that and take a look it's gone away and let's refresh if we hover we have our tooltip and then if we click we have our information section awesome let's just click it again awesome that is exactly what we want nice and actually that search menu bar looks a little bit wide let's go and shorten it up a little bit so now let's go back to email View and this input yeah I'm going to add a hard-coded input width to this so just in this one if I put input width and then copy that go to the bottom and paste that in and just say Max width 700 pixels save let's take a look so now if we what are we on 150 Zoom if we reset yeah yeah something like that okay awesome right this is pretty much the top section done so the next bit we need to do is move on to this side menu section so let's do that okay so let's go back into our editor scroll up and there's user component so we need to go three divs under that so there now we're going to say div class Flex with full another div and on this we're gonna have an ID we're gonna say side menu and add a class of side menu right now let's put another div and the first thing we need to add is our button to open the message section so let's add a class with a couple of styles Flex item sender justify sender BG Sky 200 w36 h8 mt2 rounded to XL ml2 p7 and cursor pointer now inside this we're going to have a span and inside it we're going to put com compose and we'll add a little class and say text SM save and take a look okay let's just move this to the other side this time so we'll move that there and bring our code this side okay now we need an icon for this but we're not going to use our icon component we're just going to import it in our setup so if we go beneath and say import pencil outline icon from view material design icons forward slash and and just copy that paste it on the end get rid of Icon and say dot view and now let's go up and we're going to add that in close it off and add a size of 25 and then a class of mr4 let's save it yeah awesome looking good right let's move on underneath this div I have another div with a class of My5 just a bit of margin underneath that let's add a div open this put a class and now say Flex justify between px6 py 1.5 BG blue 100 and rounded are full let's save it see if anything's happening uh something yeah okay right now inside this div do another one class Flex item sender and then a div in that class text SM pl4 and font semibold and we're just going to say inbox yeah it's nearly there let's add our icon so we're just gonna say inbox icon close it off size is going to be 17. let's go down and duplicate this icon the pencil rename it to inbox icon copy it paste it and just remove icon save and now we can see on the side our icon has been added in right so now underneath this div we'll have another one class text Xs and font semi bold and right now we're just going to hard code in 26 save cool and there's our number all right I'm just going to go up and on this class I'm going to add a custom one I'm going to say signed menu item and then copy that I'm going to go into the Styles and beneath I'm just going to paste that in and put a hard width of 250 pixels let's save it yeah okay that's better and I'm also going to put in side menu if you remember I added that class to the main div one of the main divs I'll show you now let's just put a width of this at 300 pixels let's save it and just so you know where I put that in it was right there and now all we have to do for the rest of them is take this section so let's copy this copy that paste it below get rid of BG blue don't need that get rid of side menu items well don't need that no there's not a lot there we can probably just put that on one line okay and this hard-coded number delete it this rounded R4 we can delete font semi bold we'll delete and we'll just put this on one line now let's save and and let's change inbox to start let's save it take a look yeah that's looking good let's now change the icon so this one is going to be star outline icon let's take this entire section copy it paste it below change start to snoozed and I just realized that says start it should say start okay now this one we change to clock outline icon and then again copy paste snooze becomes sent and the icon becomes sent outline icon and then copy all of it paste it again sent becomes file and this becomes drafts now let's go down and import our icons duplicate this and this is star outline icon copy paste remove icon duplicate clock clock outline line duplicate send send outline duplicate and this one is file and just change this to file and where's that error in let me just go up oh I put sent instead of send so change that to a d and now let's save it and see how it looks yeah awesome look at that let's have a little Zoom beautiful okay so our next section to do is the little menu on the other side so underneath this little pop-out section so let's do that close that up and move this back over to this side and move that over there beautiful right so now let's go underneath this div so we have this section just the div underneath let's open it and just for the future so we don't have to come back and do it we're going to say Ruta view because this is where our page is going to change so let's just put in a little note that says this is where the page changes I comment that out and just copy and paste one underneath as well right let's go below and now open a div class M4 and inside that another div class W6 H6 Flex justify Center and mb7 and then in this we can have an image add a class to it object Center and then we're gonna have to go and get an image for this so let's go back to GitHub let's just go back let's go into Gmail Public Image and we need calendar keep tasks and contacts so let's download those four there's the calendar download save image as yep Google Calendar let's go back contacts download save images Google contacts back to images Google keep download save image as Google Keep and last one go to image Google Tasks and download save images Google Tasks awesome now let's go back to our code open the sidebar and we go into our downloads file and take what we just got and drop it into the image folder also minimize that close the side panel and now we're going to say image forward slash Google keep dot PNG let's save it and take a look oh it's over there huh okay uh let's go back to our code and let's go to this with the ID of side menu and just above where it says Flex W4 but justify between save yeah awesome okay right let's go back and copy this paste it below and this one is actually Google keep the top one should be calendar and then take this again copy it paste it below this one's going to be tasks and the last one is going to be content attacks awesome looking good man right to finish this bit off we just need a div with a class and we're going to say w 6 Flex mb7 border and Border gray 300 save cool nice little separate that then under that another div class and we can just copy the class above so this one copy that paste it in and then in this we're going to say plus icon and now let's import that so go to this script setup duplicate that change that to plus icon and copy paste and save it and there we go how awesome is that beautiful right now the final section on this page is going to be the message pop-up so when we click this compose button our message section will open up here so we can send a message so let's go and do that right let's go one div from the end so there and add a new div add a class open it and let's say absolute bottom zero right zero mr20 rounded tlg Shadow 2XL and BG White NOW inside that another div with a class with a class open it Flex item Center justify between rounded top LG with full text SM PX 3.5 py 2.5 BG gray 200 now inside that another div and we're going to say new message I'm going to save it and take a look what's going on okay so we got that little bit on the bottom cool right let's go underneath this new message and say close icon and we can add a class with a cursor pointer and a size of 19. now let's go and import it so duplicate paste that in there paste that get rid of Icon save take a look there's our X awesome now let's just sort the width out as and say new message section copy it go right below on the Styles paste that in and say width 560 pixels and height 570 pixels let's save it and take a look and that is absolutely enormous why is that so big but there's oh it's because we're zoomed in okay okay let's leave that like that let's go back to our code let's go back up there it is okay right now under this another div and inside that we're gonna have another div and say class relative Flex item Center PX 3.5 and py2 now operative and inside this we're going to say 2 add a class text SM and text Grace 700 underneath input let's format it add a class and now say with full H6 border transparent border none Focus ring zero and outline none and under that input another div add a class absolute order B and now we're going to add a calc with under this so we'll see W hyphen and then brackets calc one hundred percent minus 30 pixels and last one bottom zero let's save it and take a look yeah yeah all right look at that that is beautiful okay now all we need to do for this is take this copy it paste it beneath change to to subject save let's take a look yeah look at that that is awesome right now let's do the text area so not this div this div and then another div class M1 and for this we need a text area name and ID uh get rid of that and get rid of calls set rows to 14 and now put this on a new line because we need to add some other attributes and let's just put style resize to none and then a class would fall or the transparent border none Focus ring zero outline none right let's save and take a look it's gone okay cool it's there awesome and we probably need a bit more padding on that let's add um three and let's have a lot save yeah that'll do awesome right now last bit of this is the button so under underneath this text area Dev class P4 mt5 then inside button and say send message now open this and add a class open that and now add BG blue 700 duplicate that put 600 and hover in front text white text SM font bold py2 PX4 and rounded full right let's save yeah awesome man look at that nice very very nice beautiful yes right now all we need to do is add this functionality to be able to open and close it and that is very simple so let's do that let's scroll up to the new message section the ID and below that part vif new message open copy it let's go beneath and we're going to say let new message open equals ref and that's going to be false and make sure you import that graph so import ref from view now let's command F and look for compose there it is and all we're going to do on this is on this div we're going to say at click new message open equals not new message open and now let's save it go back to our page and that is gone now let's press compose all right there it is now we can open and close it there but we just need to add the same functionality to this close button in our message so let's just jump back in and I think we called it close icon let's just have a look where is it yeah close icon let's just add a click event say new message open equals false save back to the front press compose press the X and it goes away and there we go that is awesome right so now let's make our email section so the send a bit where we see all our emails okay let's go back into the code editor and clear all this out just get rid of all of it okay now on the side let's close that so let's go and do views and home View okay let's add a setup tag and on the stage we're gonna put ID home View and let's just quickly jump into the router and sort the root out first and actually that's already been done it's right there awesome okay cool close that right let's go sort this out indent and now class we're going to say with full BG white ml2 rounded top XL H full and Shadow SM then inside that another div class order B inside that another div class Flex item Center justify between PX4 and My3 let's quickly go and have a look at our page uh there's a little Border in there okay so now we need to import our icon component so let's go in this script say import icon component from components icon component.view and let's go back to our email View and where is it let's have a look we have to go to the top there it is icon component let's steal that copy close this page let's go up and paste it right in it's indented save it let's take a look yeah okay but that needs to be trash so what we do icon string we say trash text is going to be delete selected and we're just going to add a little class on it and we're going to say minus M2 and minus ml 2.5 right let's have a look yeah awesome looking good right now there's another little bit that is just for show let's put a class text XS Tech screen 500 and just put in one minus 50 of 153. save it let's go back and just that little section over there I didn't really put a count on that I just put a count on the inbox instead okay let's go back and next we need to make our message row so that's going to be a component that we're going to pass props to it so if we just set it up ready let's go underneath this div put another div and inside there we're going to say message row and just bring that in and we're going to say from and that's going to be John Doe at mail.com we'll have the subject this will be test Row one and then the body and I'm just going to say this is the body text right save and let's go and import message Row from and we haven't made this yet we just set it up ready remember it's going to be in components components forward slash and we'll call it message row Dot View right this is going to error because it doesn't exist so let's go and build it let's open this let's go up to components and let's click on icon component and let's duplicate that call it message row Dot View and everything inside the template let's strip out apart from the main div the ID becomes message row let's get rid of this class and close this sidebar and now let's delete all of these inputs apart from one icon underneath all of these if statements can go and now all of this let's just comment out a sec because we're going to need it later right let's go above an inside message row we're going to say Dev class and let's say border B hoverboard degree 200 duplicate it and change that to a t duplicate hoverboard or Y2 duplicate and change the Y to an X and then cursor pointer now we want another div inside that so div classic Flex item Center PX4 py2 inside another div class Flex item Center and then inside this we're going to do another component and let's just add the is the size and the fill color close it and the filter is going to be the same 636363 size we'll just put in right now 19 and this is we're going to use this icon so uncomment it and we're going to change this to check checkbox blank outline and add that at the end as well check box blank outline okay now copy that and paste it into this is in the component save it let's go take a look and start to come together awesome let's just put this on separate lines because it's a bit long cool now let's import another icon and this one is going to be called star outline icon let's put star outline there Save Right copy it paste it underneath component and take size from there copy that paste it fill color copy paste close it off let's save let's take a look okay we need a bit of a class on that so let's put these on new lines and class ml4 that's just indent save it let's take a look yeah looking good right now we need to display some of our information for the message so let's go under this div by here let's put another class Flex it again item center with full now for this we're going to need a router link open there and for now the tool let's just put email forward slash message and a class of w full then the div class Flex item sender justify between another div class Emma 1.5 text SM font semi bold and inside this we're going to have the subject now actually if we just go to the bottom and we uncomment these props a sec and come at this View and all of this and we get rid of these four and we change this to from duplicate subject duplicate and body and now we add these into our ref section so this one is from subject body let's go back up and I think I actually missed a div in this so underneath this just divide between put another div classic Flex idle center with full and now when it says subject take this entire div copy it remove it from there and paste it in there and say from and actually remove mr15 remove that and put ml4 okay let's save okay we've got an error can we just get rid of this and see if anything's happening not yet okay underneath this from we're gonna have another div but what we can do is this entire div section just take it and copy it into that like so and then this from copy it and remove that second div and everything in it and then re-paste the from change ml4 to Mr 1.5 make this subject copy it paste it beneath now we're going to call this one body and just in front of it a little hyphen and three dots okay let's save it and take a look yeah awesome let's stand to work uh let's just I'm gonna do some custom styles on this on the front if I say truncate from copy that go to the subject and paste that on and change from to subject and then on the body paste it in and put that as body right let's go beneath to the style tags and just say Lang scss message Row open it and put it in from we're gonna have a fixed width 170 pixels text overflow of Ellipsis and overflow hidden and white space no wrap now copy this paste it beneath and paste it beneath again so we've got three and change from to subject change the width to 200 and then last one is going to be body and we're going to have that as 400 pixels save and it's almost there let's just on subject and body let's put Max width and Max width save it let's take a look yeah okay now that is looking good right on that body text let's just add text Gray 500 let's save it and take a look yep much better and at the very end of this we're gonna need a div for time and I'll put this in right now I'm just going to say time and then we'll add a class and let's say text right truncate mr4 widthful text Xs and font semibold let's just add that time prop there let's duplicate that and say time added into the refs time save that go back to home view duplicate body put in time and let's just put in June 2015 15. that'll do right save let's have a look and look at that that is looking beautiful yeah and if you want to see what it's like with multiple we can just take this message row copy it paste it a couple of times save and look at that look how awesome that is right let's just revert that there we go only one left cool right now we need to be able to click this and we've already got our router Link in there so we are getting directed to this URL so we just need to set this page up so we can display the entire email so let's just go back and go back to our code right now let's open the side and we're gonna have a new view and this about view we're going to change so rename and we're going to call it message view let's go into that and what we can do for this is just go into the message row component and actually just highlight all of it and copy all of it and then go back into message view paste it in and all of these Styles the truncate ones get rid of them change this to single message section comment out all of this script stuff at the moment just like that and now all of this stuff inside the router link delete get rid of all that these two components the icons get rid of them all the stuff in this class get rid of it and then this ID was single message section and this class can just go on one line right let's put this ID on a new line and then underneath class and we want W full BG white ml2 rounded top XL H full and Shadow SM this class we're gonna have a order B and you know these two divs just get rid of it and on this add a justify between PX becomes 1.5 py becomes 0.5 and now inside that another div class Flex now we want to rule the link and we're going to say two forward slash email so this is to go back so what we need for this is our icon component so let's go to home View and there's an icon component let's copy it back to message view paste it in now let's import it let's uncomment this one we say icon component add components forward slash icon component right save that and now the sidebar go to index.js inside router and inside children we're going to add another path copy that paste it below and say message and rename the component to message view copy it go to the top duplicate home view paste in message View and message view over there save it now if we go back into our browser and we click this there's nothing yet but okay let's go back close the side panel and index.js oh yeah actually it is working because this is trash so this shouldn't be trash this should be back and this tag should be back to inbox save it let's go take a look yes awesome back to inbox okay so we're gonna need another icon component so copy it paste it outside of the router link and this one is going to be trash so it's going to be a delete and we've got this class on this take that off is it on top yeah take it off both of them and this trash run the text is going to be delete and then class ml3 save let's take a look yep looking very nice okay so underneath this div now for another div and same as before just a little bit of dummy 1 to 50 of 153 and then just put a class on that text access and text Gray 500. save it yeah okay right now let's do two divs below so two divs below this one so one two go and then open that put a div in it class with full text Excel ml20 font light and pt5 and on this we're just going to put subject let's just save and take a look yeah coming together okay now underneath that div class with full flex and now we want an image and the alt just get rid of that and this is just going to be a placeholder so let's put https via placeholder.com forward slash 45 and we want to add a class to this and say rounded full mt8 MX5 save it and take a look okay now let's go under image Dev class W full my4 MX 0.5 another div class font semi build text SM mt4 mb4 let's do another div class with full Flex justify between item sender now are inside this div and this is going to be john.mail.com so just dummy for now save it let's have a look yeah we're coming together this is a bit messed up we'll fix that soon now underneath that Dave class mr5 text XS font normal and then this bit is going to be the date so what do we put June 20 15 15 something like that let's take a look over there yeah okay that'll do right so underneath this div we're going to put a little span text access text Gray 500 font normal and we're just going to say to me save take a look there we go to me yeah this image is definitely messed up we'll deal with that right let's go back and all we really need now is the email body so just put div and I'm going to print some lorem ipsum just to test so let's save and take a look yeah okay let me just make this a little bit more easy to manage let's put all this on there and copy it pay paste it again and paste it again and save it let's have a look yeah okay right let's sort that image out let's go to the bottom and inside single message section put dot custom IMG for Custom Image and just say width for the duplicate and then height copy this let's go up to the image was it gone uh there it is and just paste it in there save take a look yeah there we go better now if we press this back button is it going to work yes awesome let's go back in cool and actually I think the inbox we don't have a redirect on that so let's go to there and do that let's just go to our side panel and search for the word inbox and there it says in boxes take a look yes it's that okay so that's an email view on line 106 and on this outer div so if I just zoom out a little bit so on this one we need a router link so if I just copy all of this copy get rid of it but root the link open it up paste that back in indent it and then say two let's just zoom back in forward slash email and then I save it when I go back to Chrome refresh now we're in the message and if I press inbox we should go back to our inbox awesome all right let's go into the Google console so Google console and Google Cloud console that one and I've already got a Gmail clone but I'm going to make a new one new project I'm going to call this Gmail clone 2 and now let's create and now select project Gmail clone 2 we're in there awesome right let's go into this side menu and go to apis and services credentials and then we want to create credentials oauth client ID now we want to configure consent screen and for this I'm just going to put external create app name I'm just going to put Gmail clone 2 support email you're gonna have to put in your email app logo don't have one and authorized domain I don't think we need any of that yet develop a contact info just going to put in an email save and continue and I don't think we need to do anything with this so save and continue now I think we need to add a user so I think you need to put an email for that so let's add that okay now save and continue um right let's go down and go to back to dashboard okay let's go back to credentials and then create credentials or client ID application type web application and the name just Libra's web client one that's fine and then authorize redirect URLs we're gonna have to add URL and this one's going to be HTTP localhost and then we want to copy that add another one paste it in and this one is going to be adad because that is our front end copy that make another one paste it in and then this one is going to be 4001 because that is our node.js backend so now let's create and there we go there is all of our keys and credentials that we need so I'm just going to download Json and now I'm going to go back to my code editor I'm going to close all of these close all that now let's open the side panel go into router index.js and we're going to make a new path so we want path and this is just going to be a forward slash and the new line component is going to be login View and for common at the end of that now we need to make login view so let's duplicate message View and change message to login copy it paste it save it now inside the views folder we're going to make a new file called login view Dot View let's sort it out template div and let's put an ID on this and say login view add a class get rid of the side panel let's say grid H screen Place items sender then another div with nothing in it and inside that we want an image and that's going to be IMG and we're going to say Gmail login dot PNG we don't have that yet we're gonna have to go and get it so let's go to GitHub Gmail clone Public Image and this Gmail login it's massive let's download that save image as Gmail login yep awesome let's get rid of that and let's just go to our project and go back to our code now let's open the side panel and open Public Image now go in the downloads and drag in this Gmail login there he is awesome now login view let's save it let's go back to our browser and in this URL just put nothing like localhost 8080 let's press enter okay it's enormous so let's put a width on it but with 280 save yeah looking awesome and now underneath this image let's just close this for another div in it class Flex justify Center and this is where we're going to use our Google login package so if we put Google login and this is going to need to be brought in in our main.js so save that and then let's go to main.js and if you remember we look in package.json we imported this view3 Google login so we need to use that and this pin your plugin persisted State and pinia so we'll just do all this now go back to main.js and undertale wind we're going to say import view3 Google login from view3 Google login right there awesome now underneath that we need to import Pena where we can just go to the npm page so npm pinia top one and if we go down I know it's on the GitHub then let's go to GitHub scroll down and yeah there it is okay so copy that let's go back to our main.js paste that in underneath this import we don't need we've already got it this bottom line we don't need duplicate this line put in router and now we need to persist the state so if we go in package.json copy the persist State package paste that in there go to the page scroll down and that is how we persist the state so copy that back to main.js paste that in beneath already got create pin here copy that take it out put that underneath there okay let's close this and now finally let's duplicate this app use router and in this we're going to copy this view three Google login paste it in there and open it up and then say client ID and in there is where we're going to put our key so let's go back to the browser go to credentials open web client one and the client ID is right there so we just copy all that back to our main.js and paste it in right save and hopefully now we've done everything right so let's go back to our login view which is there and on this we're going to put a call back and we're just inside say call back now let's make a script setup const callback and all we're going to do is console.log the response so let's copy that and paste it as a parameter save it right let's go to our login page and look it's starting to work awesome right just refresh a sec if I click this it is opening but we don't see anything yet okay so what have we done wrong let's close this and what have I done in this oh I think I've put the URLs in the wrong one it should be in authorized JavaScript Origins so with it let's just add URL copy this one paste take the second one copy paste and take the third one copy it paste it in and delete all these ones right let's save that okay let's go back to our application refresh and try it again yes there we go look at that yeah and remember for this to work you need to be logged in in the Google browser so you can see that I have a user logged in at the top there so if I log in with John week's Dev uh wait first let's open the console so inspect let's open that console let's go back to the sign in and now let's click confirm that you want to sign in blah blah blah yes confirm and look at that there is all the stuff we need to get our user information awesome right so now let's go back and inside this callback get rid of this console log and now we're going to say let res await axios dot post and we need to put a async on that and this post is going to be two API forward slash Google login and we want to pass the token which is going to be response and let's just take a quick look this one credential so let's just copy that dot credential and we need the import axios from axios and we don't have a base URL yet so let's put in the HTTP localhost colon 4001 forward slash and that is going to be our back end and just beneath this let's say console.log res right save that and now let's open the sidebar let's go up to back end and we need to make an index.js so new file index.js and if we look on our package.json remember we've already brought in all the stuff we need for this so just close that and right let's set this up so const Express is require Express const app equals Express and then copy that paste it beneath change that to cause copy paste duplicate body passer copy paste make that a hyphen and a lowercase p and now duplicate again and this one is going to be our oauth 2 client and this is the Google auth library let's close this sidebar right duplicate that and say client and then copy this and I don't even say new paste that in open it up and now we have to go back into our main.js and grab this client ID again so let's grab it copy it go back to our back end and paste it in there right so underneath that we're going to say app dot use body passer duplicate the next one is going to be cause and then say app dot post and then we're going to have forward slash API forward slash Google login that's our endpoint and inside there we need an async a rack and a res now we're going to say const data and then a weight client dot verify ID token open that up and that's going to be ID token and then we're going to say rec.body dot token and all we need to do with that is say res for response status 200 dot Json and then data dot get payload and that is it oh and we need to listen for our server so app Dot listen and this is on 4001 and then inside this just see console.log Server is ready at localhost and then the port 4001. awesome right save that and that is our back end done and what is that body password doing that oh I need to add Dot Jason right save right now it's done okay let's go back in the login View and all of this is okay let's go and test it let's go into our browser let's refresh and now let's press and this time let's log in with another user so let's click confirm nothing happened why oh because I haven't started the back end we need to npm run watch so go into the project open a terminal CD into backend and press npm run watch cool right let's try it again refresh sign in as John let's pick John week's Dev click it and we didn't see anything what happened let's go back into our project call back and it should be look I spelled localhost wrong I need an L localhost right save let's do it again okay sign in John week's Dev and what is this let's take a look yes look at that that is it that is exactly what we need so we can see the picture there what if we just grab it copy it go to a browser paste awesome so now we have all the information we need so let's close this and the next step is to save it in local storage so we're going to have to set up a Pina store so let's go and do that let's go into our project uh close this terminal for now we don't need it open a side panel and inside SRC gonna make a new folder called store and then a new file userstore.js now let's quickly jump to the browser open a new tab and say Pina and we want to go to Pinya Dot viewjs.org and get started scroll down and we can just take all of that copy it close this app go back to our vs code and paste that right in now we change this countdown to user same there user get rid of this state because we're going to use this one open it up put a comma and this actions just empty it out for now and underneath put persist to true and then in the state we're going to say sub MP string duplicate email duplicate picture duplicate first name duplicate last name and now this last one we're going to have emails as an empty array close this sidebar now let's go into our actions and we're going to say async and this is going to be get user details from Google and we need to pass a parameter just so just put data and this let's go into a login view let's take all of this copy it and then go back to the user store paste that in go to the top import axios and now underneath this we're going to say access dot default Dot baseurl and this is where we're going to put this so copy that remove it go back up and paste it in right now instead of response we're going to have this data so paste that data in and then underneath let's just indent that so we know what it is and that's cool we want to say this Dot dots State DOT sub equals res dot data dot sub and then we want to duplicate that and then say email and the same email picture picture first name first name last name last name and that should be good right now if we go back into login view get rid of that remove axios get rid of the console log let's just indent it now we want to import use user store from store forward slash user store and then const user store equals use user store and then user store dot get details from Google pass the response make sure it's um await now let's save that and if this has worked let's just take this user store copy it and dump it out in our login view just to see if it actually gets saved so save it right let's go back to the browser okay that's being dumped out so let's log in let's log in with John week's Dev and look at that awesome and we can also see it if we go into application yeah it's all there inside local storage localhost 8080 awesome this is working beautiful right okay let's go back into our email so forward slash email and let's close this inspect all right so in this drop down we want to dump all the information we've just got so let's go to our code let's open the sidebar and let's go to email view inside template and what do we name this this was the this the ad actually this was the user component so let's go into that okay awesome right and all we want to do for this is in our setup script we want to import use user store from store user store you can't use a store use user store now take that copy it let's go up and we've got the image there so let's take this placeholder out paste in user store dot picture and put a colon in front of it now let's go down and this is going to be the name so userstore.firstname space and then put another one dot last name and then finally userstore.email save it and we can see our image right there awesome but let's fill in the rest of the user information so this this is wrong let's go and do that let's go to Let's copy this copy and this John Doe just replace that same here replace that remove this and this first name becomes email and this placeholder becomes not that let's just delete all of this and this is going to be picture remove these and put a colon there now save that and if you go back into the front and open it look at that that is awesome uh we still need the name why isn't the name coming through let's just check let's just dump that out let's say user store save let's open this and first name and last name is empty why is that empty let's go to our userstore.js and what Have We Done Yet get rid of that oh and actually yeah this first name should be given name and then copy that paste it and change that to a family name right save that and let's go back into the browser go back to the login last sign in with Google again John weeks Dev and there we go first name John last name weeks awesome so now let's go back to email we can take out this user store that we're dumping in our user component we can save that go back to the browser open him up and there we go look at that that is exactly what we want and now just so we can finish this up we might as well do our authentication guide in the root so let's go back to the sidebar and open router index.js and then inside this email we want to say before enter let's put a comma at the end of that we want to use the user store and make sure you import it it auto imported it for me let's get rid of the sidebar and then we want to say dot email so if an email does exist we want to go next so just carry on and if it doesn't the next place we want to go is well the login page so the front right so let's save that let's go back to our user component and go into the script and we just want to make a little function we're going to say const log out and all we're going to do for this is say user store dot clear user that doesn't exist yet we're going to go make it and then after it we want to root the dot Posh so a redirect to the login page now let's bring in the router import use router from view router and that's a const router use router and now let's go into user store and go to the bottom of actions and say clear user and we're just going to take all of this copy it paste it in and this becomes null null null null and null right if we save that and then go back to user component and I'm just going to put this inside a set timeout just so there's a slight delay and let's just say 200 and now take this log of function copy that and on this button add a click event and paste it in and now that should be working perfectly let's save it go back to our browser and if we go open this and we press sign out of Gmail we should go back to the main page the login page let's try it yes and everything has cleared out of our store right let's log back in as a different user so the top one and I forgot to put a redirect on that so let's go into the login View and this is going to need the router as well so just go to user component just copy all this back to login view paste that in at the bottom same again set timeout Rooter dot push and we're going to push to email and just delay that for 200 milliseconds right let's save that and go back now if we log in again let's log in with John week's Dev yeah look at that awesome and now if we log out we log out let's log into the different user type user yes perfect this is working amazing and actually I've just noticed on that user information pop-up we do actually need a bit of box Shadow so let's quickly do that let's go into user component go underneath put in style and let's add Lang scss and this is the user component open it and say dot custom Shadow open that and I'm just going to copy and paste this in now if you just add this in and then take this custom Shadow class copy it and go up to this really says vshow open menu and at the end of this class just add in custom Shadow let's save it go back to the browser and open this and there we go look at that that looks much better let's open a new tab and let's go to Firebase let's search for that and this one firebase.google.com and remember if you don't have an account you're gonna have to set one up but I've already got one so I'm gonna go to console and I've already got this Gmail clone one but we're going to add a new project so add project and this one will be Gmail clone 2 and we've got enable Google analytics we don't want that get rid of that and then create project okay that's ready continue and now we need to get started so let's do web and I'm just going to call this the same Gmail clone to register app and we've already npm installed Firebase but we do need to grab all of this and put it into our project so copy that let's go back to vs code and open the side panel I'm going to make a new file inside SRC so new file and I'm going to call this Firebase init.js and I'm going to paste that in let's just get rid of all of this okay now we also need one extra thing we need to go underneath this and import get firestore from Firebase forward slash firestore and then at the bottom let's just duplicate that we'll call this DB copy get firestore paste it there and this we say app now underneath we're gonna export DB and save that and that should be good so let's close that window now let's go back into user store and let's import the file we just made so import and we want the DB from Firebase init and let's just close this sidebar right let's go back to Firebase and now let's continue to the console and on the side you'll see build let's open that and this firestore database let's open it okay let's create database let's start in test mode and yeah press next and location I'm just going to go with the default enable awesome there is our firestore database so now let's start a collection so we can get some data right so star collection collection ID is going to be emails so let's press next and a document ID we're just going to Auto generate this at the moment so Auto ID and now we're going to say field is going to be body that's going to be a string and we'll just put this is the body section add field uh we need a a first name it's also going to be a string we're just going to say John add field last name do add field from email Tim m.com add another field uh we need a subject subject section another field let's say two email and we're sending it to John dot doe at mail.com and then finally we need one that says has viewed and this is going to be a Boolean and for now we'll set that to false right so let's save that awesome there is our first collection right now let's go to Docs and then let's go to build firestore and we've got this side section and what we want to do is this read data let's open that and get real-time updates let's click it right let's go down and that is what we want right there so let's copy that let's go back to our project and in actions let's make a new function and we're going to say get emails by email address let's open that and let's paste this in and this we're gonna have to put it at the top so copy it and take it out just go to the top and let's just throw that in above and let's put these on new lines because there's going to be lots of it so right now we've got Doc and on Snapshot so if we go back to Firebase and we scroll down and actually we more want something like this one with the collection so just grab that copy it then paste it there okay and import that well we can just take query and collection copy it go to the top paste it in just put them on a new line and the stock is errant so just comment it out okay let's go down and now we have our query so we want the collection and we've got the DB because we are getting that from this Firebase init so that's cool and we don't want cities we want emails where the to email is equal to now let's go and have a look what we put in there let's go back to our database and the tool email we put John Doe so let's go back to our project and we're going to put in john.do at mail.com and that's a bit long let's just put all this onto a new line a bit more easy to read and for this snapshot we don't need to return anything so let's just get rid of that and this can't cities we're going to say result array and then copy that paste it there and this doc data we don't need that there let's open this and now we need to add all of that to our state into this emails array so we need the ID and that's going to be dark ID and that I ID is this so let's go back now duplicate first name doc dot data DOT first name duplicate last name copy paste duplicate from email copy paste duplicate to email copy paste duplicate subject copy paste duplicate body copy paste duplicate has viewed copy paste and duplicate create it at and copy and paste it and then underneath that where this console log is we're going to get rid of that we're going to say this dot state DOT emails equals this result array because we've looped it and we've pushed it all into it and now we're just gonna put it into there so save and let's indent this a bit we want to indent that as well so we know what's going on let's make a little space and this query snapshot let's put like that let's just sort that out okay there we go and then at this end bit we want to know if we're going to have any errors so open this and put a comma there and say error and then we want to console.log the error and we can just bring this to that let me just zoom out so you get a full shot of it to make sure you've got it right okay Zoom back in right let's save it and let's go and see if we can get this to work so let's copy this get emails by email address just copy that now let's go into home view what is that there scroll down and we want a unmounded let's paste that in there and let's just fix this that should just be View and this needs to be from the user store so we also need to import that so import use user store from store user store can't use a store use user store okay right now if we save this and now go into the browser open our Gmail phone and if we inspect and open application and right there we can see it's working if we open emails there is all our information from Firebase awesome so now all we have to do is spit that out right here so actually let's close this inspect window let's go back to our code let's go up to this message row and we want a V4 and we're going to say email in userstore dot emails and let's put a key on it of email now this from is going to be email Dot from email that needs to have a colon in front of it and the same with all of these now let's copy this email Dot from email copy that go to the subject paste and say subject now the body paste it and say body let's save and take a look yeah awesome we're getting our information from our store sick okay right now we know it's definitely working we need to add a couple more props to this message row so like the ID and if it has been viewed or not so let's add that in let's add ID and that's going to be email dot ID and then this has viewed it's going to be email dot has viewed let's save that let's go into message row and in the props let's duplicate this and we're going to call this an ID and at the bottom let's say has viewed and that is going to be a Boolean now let's add them into the bottom we want ID and has viewed now let's scroll up and on this just underneath we want a class with a colon and we're going to say has viewed if that is true we want to put the background to gray 100 and if it's false just leave it empty right now let's go down to this router link and for this let's add these little like quote back tick things I need to figure out what they're actually called and then we want to put the ID in after that don't forget the forward slash and don't forget the colon cool right save that and then go into root index.js and this really says message to forward slash colon ID save it and I'll go back to our project and if we press this we can see in the bottom in our URL that the ID is coming through already so let's press it yeah and then we've got the ID after the message in our URL perfect right let's go back and just so we can check if we go to our database and we change this has viewed from false to true the color is going to change it's going to say that the message has been viewed so let's update let's go back and there we go the color has changed awesome and just to double check let's do it again put it back to false false update awesome go back and there we go colors changed again now it's completely white so that is update in real time awesome okay next let's send the message so let's go in get rid of this index.js close the sidebar and this is in email View and at the bottom in our pop-up message section we want to pull into info and then click Send and send the information to our database so let's go back into user store and underneath get emails by email address let's go under let's make a new function and this one's going to be async and we're going to say send email and we're going to pass data and let's say a weight and let's just go into the Firebase docs and on this bit where it says add and manage data let's open that and we want to add data right let's go down and yeah that is it that's the one we want there so copy that let's go back let's paste it in and we've got set Dock and Doc let's just copy those get rid of this bit and this cities becomes emails we're gonna have to have a forward slash and then this is where we need to put in a unique identifier so we're going to use a uuid for that and I think we've already installed the package so let's just go to the top add in what we just copied so Doc and set dock now above that we're going to do import V4 as uuid for from uuid and if you want to see the docs for this just type in npm uuid and then you'll find out all the information I mean it just generates a uuid so now let's copy that let's go below and when it says La get rid of that plus paste add some curly braces at the end and let's just go up above and all of this we're going to copy copy all that let's go below paste it in there paste and first name is this state first name copy this bit copy that replace that and then replace that bit as well the has viewed is going to be false and then create it at we haven't got that in our database yet created at is going to be date dot now and then these three we're going to get this data we're going to say copy paste and paste and last one paste right let's save that and don't forget the comma at the end of this because otherwise it'll error okay right save it and as well this ID yeah we don't need that get rid of that right now save it again now we should be good okay now let's jump back into email view go underneath and we want to import use user store from store user store and then const user store use user store right let's make a new function const send email we want to get the user store dot send email open it up and then we want to email to email dot value we don't have these yet we're going to make them in a minute now duplicate twice this one's going to be subject copy paste and last one body copy paste now duplicate this to email is an empty string duplicate subject duplicate body now we're going to go up and on this send message button at click Send email and then up in text area we need a v model and that is body let's copy that go up and then this input is going to be subject and up again to the other input paste that in and this is going to be to email right save and now if we send an email this should work so let's go back to our browser let's go to Gmail clone and let's compose an email right two uh and I'll send it to myself to this email and the subject is going to be testing bro and for the body why don't we go and get some Laura mipsum copiola paste it in and let's see if this works let's send and now let's go to our database nothing there what happened right let's go into a front end again let's inspect let's go into Network maybe and send not getting anything let's go back to our code Now quickly in this email view I'm just going to add async await today to send email function by the save right let's go back to our user store maybe if we put a try catch around this we can see what is going on let's try it try try catch paste that in and do console.log error save it oh because we've got a comma there stupid okay save that now let's try it again refresh let's go compose and we're sending it to let's say John Doe at mail.com subject is cool and then let's get some online some copy that paste it in and send and look at that immediately let's close this a sec yes that is awesome right we want to close this and clear it when we send a message so let's go back to our code and into email View and underneath this let's just grab all of that copy paste that get rid of let get rid of that and that and that and then this becomes false but dot value and let's copy paste paste paste change this to empty string empty string and an empty string format save it now if we go back refresh and our image is going from there that's probably just the caching issue doesn't matter um let's go to compose and let's do the John Doe again the reason I'm doing it to John Doe is because remember I've hard coded it in the get all emails so we'll change that later subject more cool and let's just say awesome and now send message this should disappear and our emails should show yes look at that that is awesome it literally says awesome right so let's go and quickly clean some stuff up and then we can do the delete emails functionality let's go back to the code and if we scroll up to this hard-coded email we should probably put in the one from our state so it only gets emails for us so let's just get rid of that quick and put in this state email and that should get all the emails for us so let's just save quick go back to the front and now we have zero but if we go back into our Gmail clone database and we change this one to this email so get the from email copy it close that go into the two email paste it in update and if we look back in our application we should see it and there it is beautiful so that is working right let's do the delete so we're in user store that's correct let's go down under send email and for there that'll do and let's put delete email and we want to pass a a parameter which is an ID and this is pretty simple let's just put a try catch in there I'm going to put a weight and this also needs to be async and all we need to do is say delete doc open there and then we can come up and this doc copy that let's go down paste that in get rid of the forward slash and this yu-yoid becomes ID and make sure there's a comma and close it off now we need to import that at the Top Copy go to the top underneath set dock let's put in delete dock save it and that is it and while we are in empty block where we're two oh there okay yeah console.log error cool awesome right so now we're going to go into this and when we press this delete icon at the top we want to delete this message and then get redirected back to the main page so let's do that go to our code and we want to go into message view so what is that message view right there inside views go to the bottom and close the side panel right underneath this let's do const delete email and we're going to pass an ID in that and now we should probably confirm if we want to delete it so let's say let res equals confirm and then let's just say are you sure you want to delete this question mark and then underneath an if and just put in res because that'll be true or false and then we want to get it from the user store but we need to import that first so let's go up and get rid of this and just say import use user store from user store can't use a store use user store okay and then on this we want to say delete email we want to pass the ID and then after that we want to root the dot push and we just want to go back to the emails now we also need to import router so let's go up import use router from viruda duplicate this router use router okay awesome and what's this little error oh the if statement we're missing a curly brace at the beginning so yeah okay right now we want to take this delete email function right and don't forget the part async await and I'm gonna put a slight delay on it of 200 milliseconds right I save that and copy this delete email function copy that let's go up to our icon the trash icon there it is and add at click paste that in and in this we want to put email dot ID now we haven't brought that in yet so before we can actually test this we need to get the actual data for the email that we're in by ID so let's quickly jump back to our userstore.js and just above this delete email we're going to say async get email by ID pass ID as a parameter and this is also very simple we can take this in the delete one copy that just say const dark ref equals that and then duplicate that rename this to Doc snap and this is get Doc and we need to bring that in so copy it go to the top and paste it in right there here save it let's go back down and just take this dark graph paste it inside there okay now we say if docsnap dot exists and actually we forgot an await right for there so don't forget to put that in now inside this we're just going to put a return and we're going to go up to this get emails by emails address copy all of it copy and paste it into there that's just indent and we've got that created that commented out so let's uncommon there and we're going to copy doc snack and all of this everywhere that says doc make Doc snap so doc so that that that that that that that that that that that and that and now to finish this if off let's just put a little else and we're going to say console.log no such document and let's not forget to close it off okay right that should look like that and oh wait a minute this doc snap on the ID is wrong because we're passing the ID as a parameter so yeah remove dark snap on ID right save that now let's go back to our message view dot view this one where we just did the delete email function let's go to the bottom and in this we're going to bring in an unmounted but honestly all of this stuff get rid of that okay now let's say unmounted has been brought in there let's give it this top one and let's just make this unmounted in async and then we want to say a weight use a store dot get email by ID and then we want to pass an ID but the ID is going to be in the URL so how we get that is this view router we want to add another one that says use root instead of router and then just duplicate that and change that to use root and root so now let's copy that paste that into there and say dot params dot ID and then we're going to say const res and now we need to display it so above this let's make a variable let's say let email equals ref and make sure to add it in there and this is just going to be an MD object now underneath email dot value equals an object and that is going to be ID res dot ID and then duplicate body body created that created at first name first name last name last name from email from email subject subject let's scrolling up has viewed has viewed and to email to email awesome all right save that now let's go up and start filling in the places we need to so the email dot ID is already done the subject is going to be email dot subject let's copy this this is going to become email from so from email and this date is going to become created at and all of this alarm ipsum just take it get rid of it paste this in and email dot body let's save that let's take a look and there we go look working already and you can see that the date is in what it's in Unix I think it is um but before we do that let's just make sure now that our delete function works so what we should be able to do now is go to this top button this delete and if we press it we should get a confirm alert yes are you sure you want to delete this let's say okay and there we go our delete function is working all right so that is it we're almost finished so all we have to do now is the um alt delete functionality so when we click the check boxes in this page and this inbox uh we're going to put dot length on the emails array so let's go right for this we do need a couple of emails so I am gonna just quickly make some emails okay so I made five test emails so now what we want to be able to do is Click these check boxes and select them and bulk delete so if you select three and we press this trash icon at the top we want to delete those three so let's go make the function for that now for this we're gonna have to go inside the not message view the message row Dot View and let's go to the bottom and just underneath this star outline icon let's say const emit because we need to emit a value from this component Define emits and there's only going to be one it's going to be selected ID let's just put this in the top so it doesn't error and then under this let is selected equals ref and that's going to be false and now we want a watch inside this so let's go to the bottom and just put watch is selected comma function and inside that is going to be a bull and then we want to say emit selected ID comma and just pass back the ID and that's going to be ID dot value and bull and bull as bull our past the parameter that's been passed there and this watch we need to import so let's go to the top and say watch save it now that's good awesome now let's scroll up to this our component now this is why we needed to pull this in in the first place and we couldn't just have a normal one like this so in this what we want to do is say is selected so if it's true we want to show the check box as being checked so let's just finish this up a sec let's just put that in there for now so nothing errors and let's go to the bottom and this checkbox blank outline icon duplicate and just take away blank copy it paste it and take away icon save it let's go back up and this side is going to be checked and the other side is going to be not checked and just under that we're going to put at click is selected equals not is selected right save let's go back to the browser and if we've done everything right we should be able to select some check boxes let's click yeah look at that man that is awesome that is working absolutely perfectly right let's go back to our code and now because we are emitting this we need to go and get it from inside I think it was in home view let's try home view yeah message row so at the bottom of this put at selected ID and we're also going to the function selected ID let's just copy that let's go to underneath this mounted put const selected ID equals and let's pass this e and now we need to do a couple of checks to make sure this actually works but first let's just add in let emails to delete because we need somewhere to save it and that's just going to be an empty array now in our function let's say if emails to delete dot length is zero so if the length is less than one we're going to say emails to delete dot Posh e dot ID awesome right the next one else if e dot Bool is true and emails to delete and we're going to make this a negative so if emails to delete does not include the ID we again want to push it in so this one pretty much says if it's been selected so if it's true but if it doesn't exist in the array push it in and now the last one else if and we're going to take this line we just did we're going to say copy paste it in and we're going to swap this around so take that off there and if this is false so if this is false if we unselect it and it exists in our array we want to remove it and how we do that is let's say const index equals emails to delete dot index of and we want to pass e dot ID and then a little f with index greater than -1 emails to delete dot splice index one and that is how we add it and remove it to this emails to delete array and underneath this selected ID we need another function so const delete selected and let's say if emails to delete dot length is zero return so do nothing but if it is greater than zero let's say that and actually we can go to our message View and all this confirmed stuff let's just grab that copy it go back to home View and we're going to paste that in and make some little modifications are you sure you want to delete the selected emails and then we want emails to delete and we want to Loop through it in a for each open that right up and this is going to be the ID and it needs to be async now just take this function below copy it and paste it in there remove this and say emails to delete equals empty array because you want to clear it out after you've deleted what you want deleted okay so let's save that and copy this new function copy now let's go to the very top and there's the trash icon we're just going to add a add click event and paste it in Save Right Now go to our browser refresh just to make sure and let's select the bottom tool so test two and test five and these are not in order but we'll sort the ordering out after we make sure this works so let's select test two test five and now if we press delete are you sure you want to delete the selected emails okay Test 2 and testify were gone yeah all right yeah this is looking very good we're almost done let's just fix the order of the emails so we're gonna have to do that by date or time stamp and then this inbox number we just need to make Dynamic so I mean the inbox we can do right now so let's go and find that and let's open the side panel I think that's inside email view which is in our template let's search let's go find inbox yep there it is line 107 and there it is 26. let's just get rid of that and say user store dot emails dot length save it go to the front and there we go that's fixed three emails awesome now there's also the um has viewed so when we click on it and then we come back the color doesn't change so we need to make a little function for that let's go back to our code and we need to go into user store and we can do this let's just do this above delete email let's say async email has been viewed and actually all this delete email just take a while actually copy it paste it in and delete Doc is set dock we need to pass a parameter in this ID get rid of this comma put in a forward slash and then a plus and then comma there and open that up and we want to update the has viewed Boolean and we want to set that to true and I think we need to do merge true I think right anyway that function is done so now let's copy that and we need to go back into our message View and all we need to do for this is just after we've made the get email by ID we're going to say await use a store dot email has been viewed and we just want to say res dot ID and that is it now we can save that and if we go back into the front refresh if we click test one the top one we see our email and then we go back out it didn't work why didn't that work why didn't that work oh he's viewed should be has viewed okay save okay let's go back refresh now let's try test four okay let's go back perfect there we go now all that's left is the date and the ordering and then we finished so let's fix our date with moment.js and the order by so we want that descending so let's go into our code and let's go up to get emails by email address function and then inside this query we want another one that is order by and we need to make sure to import that at the top I think it auto imported for me yeah you need to import it and put it into this okay so now let's order by and we want to order by created at and we want to say descending right now let's save that and we're gonna have to open inspect for this because yeah we're going to see this little message that says Firebase error the query requires an index you can create it here so we're gonna have to click this link so let's click it yeah okay let's create index now it's building and just a heads up why we got this error if we go back into our code we can see at the end of this we have this little error section and that is what notifies us what we need to do so make sure you've definitely got that in there let's just go back okay that has been built did take about five minutes so you'll have to be patient but anyway this status is enabled so let's go back into our clone and let's refresh what's what's on the top four and three on the bottom let's refresh see if anything changes well we don't have the error anymore so that's good let's close this and just so we can see what we're doing let's sort out our date so let's go into our code and okay this created that we need to uncomment and anywhere else where it's commented out let's go and have a look send email date now yeah that's okay created that is in that that's fine all of this is fine and actually this clear user we should make another one and the email which is going to set to an empty array so when we log out we clear all the emails out as well okay so let's save that and I think how created that is fine so now the final thing we need to do is format our date so let's go to the top and import moment from moment you should have npm installed this at the beginning so in case you forgot it's npm I moment now let's go down and now this is going to be very simple let's just take this copy it remove it we want to say moment and then we want to pass that in there and then we just want to format it so format and that's going to be mmm or capitals space capital d space Capital H twice colon and lowercase M so m m so should look something like that and now let's go to home View and our message row there and we've got time and let's put a colon on that and we need to put in email dot created at right now let's save that and try that save let's have a look yes look at that the dates have now changed so let's compose another email send it to myself copy paste testing time just cool and now let's send it yes awesome and it's at the top because now it's um it's been indexed amazing let's send another one more testing and then cooler send yes this is working perfectly but this we got the email in there we don't want that let's go back into our code and the from yeah that's wrong that should just be first name put a space in there email dot last name right now let's save that there we go okay let's go into our more testing email look at that that's just awesome you know uh this is a bit messed up over there let's just use our moment package for that and what is this in it's inside message View and yeah we just need to put it there as well so let's just import moment from moment copy and it's going to use a store get this one by there copy that go back to message View and then this created apps paste that there actually get rid of that and then this is going to be res save that let's go back to the front and there we go right we're pretty much done let's just go back it's working perfectly let's just delete the two messages that we've opened select select delete okay yeah it's done perfect right now we're gonna do the final test which is going to be from one user to another so let's just sort this out let's make this a bit smaller and I'm going to open the brave browser and this needs to be on localhost 8080 right let's sign in with Google and I'm going to sign in with John Wick's Dev enter the password and I got two-step verification on this so I've got my phone here let me just go full camera so you can see it right there so then I'm gonna press the yes it's me button and there we go we just logged in as a different user right now we're going to send each user an email from a different user so let's start with the first one let's grab this email copy let's go to who we just logged in as John week's Dev compose paste it in say JW Dev and then we're just going to print this cool bro and then when we send this message we should see it in the first account immediately so let's send yeah look at that let's open it awesome right let's go back and now let's get the email for this account copy and compose from the first account paste that in there and just say JW and just say thanks bro and now let's send the message and look at that

Channel: John Weeks Dev

Views: 4,722

Keywords: vue 3, vue js, vue, vue cli, vue cli 3, tailwind css, tailwind, tailwind css tutorial, pinia, pinia vue 3, pinia vue, pinia store, places api google, node js, node js tutorial, javascript, pinia state management, pinia store example, vue js tutorial, express js, vue cli tutorial, uber tutorial, gmail clone, gmail clone using vue, google cloud, google cloud platform tutorial, firebase, firebase tutorial, firebase realtime database, moment js, uber clone, whatsapp clone

Id: KE5sQiHRZQg

Length: 115min 21sec (6921 seconds)

Published: Mon Dec 19 2022