Create an Instagram Clone with Vue JS, Quasar & Firebase - in 4 HOURS! (2/6)

in this second video out of six we're going to carry on creating our gorgeous instagram clone quasagram using vue.js quasar firebase node.js and express and in this video we're going to design all of the front end of our homepage and our camera page and if you missed the first video check the links in the description if you're new here my name's danny i'm an indie app developer and creator of budget if you want to learn how to create cross-platform apps and web apps using technologies like vue.js quasar and firebase click subscribe and click the bell so you don't miss anything okay let's start working on this home page so let's open this page up and that's in source pages and pagehome.view and i'm going to get rid of these classes flex and flex center on the cue page element because that's forcing everything to be in the center and i don't want that save that and the first thing we need to do is constrain our content like we did with the header because you can see this text here is all the way over to the left and the wider the browser gets the worse this looks so we can fix this easily by just using the class that we created in app.sas this constrain class so i'm just going to add that class to this q page component save that and i'm also going to add some padding to this page so that our content doesn't go right up to the edge of this container so i'm going to use one of quasars built-in padding classes so i'm going to add q p a for padding all dash md for a medium padding which will go all around the page and if we look at the instagram site we can see the header is white like ours but the page has this nice light gray background color so let's add a light grey background color to our page and we could just add a class to this q page component but since i want all of our pages to have this color then if we inspect the page we can see the q page component there but above that we have this q page container component so we can add a background class to this element instead so that all of our pages have the same background color and this component is in our layout file so i'll go to layouts then main layout.view and you can see the cue page container here so let's jump to the quasar site and find a nice background color so we want to go to style and identity and then color palette and we'll scroll down and we can see all the grays here so i'm going to use this gray one color so i'm just going to add a class this cube page container of bg grey dash one save that and we now see this nice subtle grey background let's create a list of posts now with a location an image a caption and a date and we're going to use quasar's card component for this so let's jump to the quasar site and go to view components and card this is a really nice component that we can do all kinds of things with we can add different sections separated by these separators and images so i'm going to scroll down and look for one that has a nice header and this looks pretty good here we can use this to display our avatar and display our username and a location so i'm going to click on view source and grab that second card which is here i'll copy that i'm just going to switch to mobile view get this looking nice for mobile first and i'll change this to and i'll jump back to page home doc view and get rid of this h5 and just paste in that card save that and i'm going to change this my card class that's on this card to card post to give that a more meaningful class that we can use to target it for styles later and this avatar image i'm going to replace that with my own gravatar image and i have the link in my clipboard so save that and this title here i'm going to change that to a username so i'm just going to put danny double underscore connell save that and i'd like that to be bold so i'm going to add a class of text bold to that title and this subheading here that can be our location so i'm going to change that to san francisco united states save that and i don't want to use this bottom section here so i'll get rid of that but i will leave the cue separator because we're going to put our image under that so i'll get rid of that second section and save that okay that's looking pretty good let's add an image to this post now so i'm gonna jump back to the card page on the quasar site and find a card with an image and this looks good so i'm going to click on view source and i'm going to grab this q image component here i'm going to paste that after this q separator component here save that and that's looking pretty good however if we reload this you can see while it's waiting for the image to download this space here in the card is really short and could do it being a little bit taller see what i mean so i'm just going to add some style to style this cue image component to give it a minimum height by default so i'm going to add a style block to the bottom change the line to sas and we have this card post class on the cue card so we'll use that class and then target this cue image component which if we inspect it has a class of q dash image so i'll add that here q dash image then i'm just going to add a min height let's say 200 pixels save that and we'll give this a reload see if that looks a bit better yeah it looks a little bit better now let's add a section to this card where we can display a caption and a date so i'm going to jump back to that card page on the quasar site this looks pretty decent here on this first card so i'm going to click on view source and i'll grab this cue card section here copy that and and we'll paste that after our image here save that and we can put our caption here so i'm going to change the text in this div to golden gate bridge save that and this bit here can be our date so i'm going to change the text in there to june 10 9 04 am which is the current date and time and this caption is a bit big and it's currently styled as a h6 heading so i'm just going to remove this class that's on that so that we have a standard body text style on that and also this date is a bit big and bold so i'm going to jump to the quasar site go to style and identity and typography and we have this text caption class for smaller text so i'm going to use that to style up this date so i'll get rid of this text subtitle class and just add text caption save that and i want this date to be a gray color a bit like this color up here so i'm going to jump to the quasar site go to style and identity and color palette and we'll just use this default gray color here so we can just add a class to this date div of text gray save that and that's looking pretty sweet so that's the design of our card finished if you want to take quasigram to the next level check out my 15 hour course progressive web apps with ujs quasar firebase in this course once you've finished creating quasigram you'll then get to turn this into progressive web app by adding home screen installation precaching caching strategies background sync and push notifications you'll also test and fix the app in all the main desktop browsers as well as android and ios you'll also find two big assignments and all of the completed source code for every module get the course with my promo code at danny's.link slash quasarpwa and the link is in the description let's create an array in our data now for storing all of our posts data so i'm going to jump down to the script section and add a data method that returns an object and we'll create an array called posts and we'll add an object for each post so each post is going to need an id property so i'll just set this first one to one i'm going to need a caption property so i'll just set this to golden gate bridge and we're going to need a date property and i'm going to use an epoch style date because this format will allow us to easily sort our items by date later on uh we can get the current epoch by just going to our console in chrome and type in date dot now and i'll copy this integer and paste that in here i'm going to need a location property and i'll set that to san francisco united states and finally we're going to need an image url for our image so i'll just call that image url and i'll paste in this image url here paste that in there and i'll duplicate this post a few times so that we have a few different posts that we can display here so i'll add a comma at the end of this object we'll just duplicate this say three times and i'll just update the ids so that we have one two three and four save that okay let's connect this post array data to our view now okay let's connect this array to our view so that we're displaying some posts from this data so i'm going to jump to the cue card and split the attributes on that i'm going to add a v4 directive which will loop through each of the items in this array so i'm going to add v4 post in posts and we also need to add a key property and this is optional but it's strongly recommended because it allows view to easily identify each item that it's displaying in an array individually and without a key property we might find that for updating a post or deleting a post or something that the wrong one gets updated and we'll just use our id property for that so set the key to post.id and save that and we can now see four posts on the page of course all of this data is still hard coded so we still need to hook up the data that's in our array but first of all we need a little bit of space between each post because they're stuck right together so i'm going to add a margin class to this cue card to put a bit of margin at the bottom of each one so i'm going to add q dash mb for margin bottom dash md for a medium bottom margin and yep that looks like a nice amount of space we have now between each post and now let's interpolate all the data from our post array to our view so our location is here in this cute item label so i'm going to get rid of san francisco united states and just put in post dot location save that that seems to be working and then this q image we're going to bind to this source attribute by adding a colon at the start and replace that url with post dot image url and our caption is here so i'm going to replace that with post.caption and the date is here so i'll replace that with post.date save that okay so we're now displaying all the data from our array however this date doesn't look very good like that so let's create a filter to make this date look nice using quasar's inbuilt date formatting if you found this video useful so far make sure you smash the like button and leave a comment telling me what you think about quasar okay let's format this date using quasar's inbuilt date formatting so i'm going to use a filter to do this so i'm going to scroll down to our script section um i'm just going to collapse this posts array for now and add a filters object and i'll call this filter nice date and this will expect a value and it will need to return a value and we're going to use quasar's date utility to format this date so i'm going to jump to the quasar page scroll down here and go to quasar utils and then date utils and we have this format date method that we can use to format a date so we can just pass in our timestamp and then format it using a string like this and it shows you all the tokens here for all the different ways you can display years and months and days etc so the first thing we need to do is import date from quasar so i'm going to copy this top line and add that to the top of our script section and then we can now access this format date method so i'm going to copy this bit here and i'm going to jump to our filter and paste that here and we want to replace this timestamp variable with the value that we're passing into this filter so i'll change that to value save that and now let's add this filter to our date which is here and to add the filter we just a pipe and then the name of the filter which is nice date so i'll save that okay so the date is formatted now but doesn't look very good like that so when i jump back to the date page and we'll use these tokens to make this date look nice so i'll jump back down to our filter i'll just clear out this string here and i want to display the full month name so like january february and we could do that with four m's so i'll add four m's and then a space and then i'm gonna add the day of the month and we can just use capital d for that so capital d and then a space and then i want to display the time so i'm going to use a 12 hour clock format for this so i'm going to use this one here with a lowercase h so i'll add a lowercase h and then a colon and then we want the minutes and i want double digits for the minutes so i'm going to use double lowercase m and then we want to display whether it's am rpm and i'll do this with capital letters so i'll use this capital a to add that so i'll paste that there and let's save that and see how that looks yeah that date's looking a lot better now our homepage is looking pretty good now on mobile let's see how it looks on desktop so it doesn't look that great with the posts and the images spread right across the width of our page so let's see what instagram does so on instagram the layout is split up into two columns a wider column over here with all the posts and then this little mini profile and other stuff on the right so let's do a similar thing on our app and quasar has a column system that we can use to achieve this so i'm going to jump to the quasar site and go to layout and grid flex grid and then grid row so quasar has a 12 point column system that we can use and so all we need to do to use this if we just view source on this example is create a div with a class of row and then within that div with a class of row we can create divs for our columns so if we give a div just a class of call then this will be an equal width column so if we add two divs like this then they will both be fifty percent of the available width or if we add three with this class of call then they'll each be a third of the width but we can also specify a particular width for a column and it's a 12 point column system so if we added a call with a class of call dash 12 then that column would take up all of the available width but if we added a call with a class of call 6 then that would just take up half of the available width so i'll just demonstrate this now on our page so above our posts this cue card component i'll add a div with class of row and then within there i'll add two divs with a class of just call for now and i'll just put left in the first one and then right in the second one save that and you can see these columns are equal width because we just started a class of call but i don't want these columns to be 50 50. i want the left hand column to be quite a bit wider so i want this more like a 60 40 kind of ratio so let's try changing the class on this left hand column to call 8 and then the right hand column to call 4. see how that looks yeah that looks about the right ratio so let's move our posts into this first column so i'll just remove the text left there and i'll cut this cue card component and paste that in this first column indent it a little bit and then in the second column i'll just put the text mini profile because i'm going to stick a little mini profile in there later on okay this already looks a lot better but you can see this mini profile text is touching our posts here so we need a little bit of space between each color so we need a gutter so i'm going to jump back to the quasar site and click on grid gutter and we have some classes we can use here to add a gutter to our columns and these first ones it says these classes are to be used when the direct children don't have call classes and we do have children with call classes so we don't want to use these ones so if we scroll down to classes cue call gutter size section it says these classes are to be used when the direct children have call or offset classes that specify a width and i'd like quite a large gutter maybe like this one here so i'm going to click view source on that and it's this one here so we can just add this cue called gutter large class to our div with a class of row so i'll copy that and just add that class to this row save that and we now have a nice little bit of space between the columns and i'm going to create a little mini profile to put here and we can basically just use this bit from our post header so i'm just going to grab the code for this bit and stick it in this second column so that's this q item here so i'm going to copy that and we'll paste it into this second column fix the indentation and this bit here where we were outputting the post location i'll just put my name in there so let's save that okay that looks pretty decent i'm just going to make this avatar a little bit bigger and if we go to the quasar site and then components and then avatar scroll down to the api and then style we can add a size prop to make this a little bit bigger so i'll just find that q avatar that's here so i'll add a size prop and i'll set this to 48 pixels so save that and that looks pretty good however when we scroll down this mini profile disappears and if we look at the instagram site the mini profile stays fixed up there so we can use one of quasars positioning classes to fix this in place so i'm going to jump to the quasar site then style and identity and then positioning and we have this fixed class that we can add to give an element a fixed position so i'll add this class to this q item component class equals fixed save that let's see if that's working yeah as we scroll down the mini profile stays docked to the top there pretty swish okay this is looking pretty swish on desktop if we switch back to mobile view however then we can still see this mini profile over on the right and it'd be better if we could just hide this on mobile and make all of our posts full width so we can use one of those classes that we added to app.sas we can use this large screen only class and only display this column on larger displays so i'll jump back to the page home.view and i'll add that class to this call on the right which is here so i'll add large screen only save that and that now disappears on mobile however our other column which has the posts still only taking up two-thirds of the width and not the whole width because we have this call 8 class but what we can do is specify different widths for different display sizes so if we jump back to the quasar site and then back to layout and grid flex grid and grid row and there's this responsive classes section so if i jump down to that it says the grid includes five tiers of predefined classes for building complex responsive layouts customize the size of your columns on extra small small medium large or extra large devices however you see fit so if we look at this stack to horizontal section we have some columns here and on desktop on this first row we have a left column and a right column and then on the second row we have three columns of equal width if we resize our browser down we can see that these columns are all stacked for mobile and the way we do this is by first specifying a default class using the same classes we've been using just call dash and then a number from 1 to 12 and then we add another class to specify the width of the column on display sizes that are a certain width or above so in this case it's using the medium break point so on all medium displays and above we're going to set this column to 8 and then on all displays that's smaller than that we use 12 points for the column making it full width so i'm going to jump to our left hand column which is here get rid of this col8 class and so we'll set this to full width by default so call dash 12 and then for display sizes that have small width or larger we'll add call dash sm for small device widths dash 8 so let's save that see if it works yeah this column is now full width on mobile and if we jump back to the desktop view then the column takes up a third of the available width again let's add a photo frame to our camera page that we can use to display the user's camera feed later on and also display their captured photo so we'll jump to the camera page and i'll open that here so that's in source pages page camera and we want to add the same classes to the queue page that we added to our home page to constrain the content and add a little bit of padding so i'm going to copy this class attribute from the home page then i'll close that and i'll replace this class attribute here with that so i'll paste that in save that and we'll get rid of this h5 heading and i'm going to add a div with a class of camera frame so that we can style this and i'll give this div a little bit of padding so i'll add a class of q p a for padding all dash md for a medium padding all around and i'll just stick an image in here for now and i'll use the same image that we're using on our home page so i'll scroll down to the data section i'll just grab the image url here from one of these posts and paste that here in the source attribute i'll get rid of the alt attribute so i'll save that and this image is showing at its full resolution here so we need to constrain this image a bit so if we go to the quasar site then style and identity and then other helper classes then we have some size related classes here and we have this full width class that we can use to set an element to a width of 100 so i'm going to add this class to this image we've added so i'll split the attributes on that and then just add a class of full width save that and i want to style up this camera frame a bit give it a nice thick dark border so i'll add a style block set the line to sas and we have this camera frame class we can use to target that div i'm going to give this a border of 2 pixels solid and i want it to have the same dark gray color that we're using everywhere else and if we go to the quasar site and then style an identity and then color palette and jump down to using sas scss stylus variables then we can actually use these colors using these variables in our sas like this so if i want to use this grade 10 color that we've been using then i can just add a dollar sign and then gray dash 10. save that and we now have a nice border and i'd like it to be rounded at the corners so i'm also going to add border radius property set that to 10 pixels and i'm just going to switch to mobile view because we're going to get this looking nice on mobile first and now we need a capture button so i'm going to jump to the quasar site go to view components and then buttons and then button and i'd like a round button with an icon so i'm going to jump down to round and i'm going to grab this last black icon here so i'm going to click on view source and copy the code for this button and i want this button to be centered so after this camera frame div i'm going to add another div with a class of text center and we'll give it some padding so i'll add a class of q p a for padding all dash md and then we'll paste our button in there i'm going to split the attributes on that and save that see how that looks and i want this to use our usual dark gray color so this color prop here i'm going to set that to gray dash 10 save that uh i want it to be quite a bit larger so i'm going to jump back to that button page on the quasar site jump down to the cue button api section and if we go to style then we can add a size prop where we can specify a size for this button and we can specify this in pixels or rems or we can just pass in a generic size name such as xs md lg excel etc so i'm going to add a size prop and i'm just going to set this to lg for large and that looks pretty good we want a camera icon here but i don't want to use this outline style camera icon i want to use a a solid icon and if we jump to the either icon site just search for eva icons and search for camera because all of these icons have outline versions and filled versions so i'll click on fill and the name for this icon is just camera so i'm going to change this icon prop on this button to either dash camera save that okay it's looking pretty good okay let's add some text fields for the caption and the location and we'll add a submit button as well so after this button i'm going to add a div with a class of row so that we can use the column system to control the width of our fields just like we did with the home page layout and i'm going to add a class of justify center which is another class built into quasar which will justify our rows to the center of the div and you can find out more about these classes on the quasar site if you go to layout and grid and then introduction to flexbox and i'll add a little bit of margin to this div so i'll add a class of q dash m a for margin all dash md and now we need some text fields so i'm going to jump back to the quasar site go to view components then form components then input text field then i'm going to scroll down to this design section and i'm just going to use a standard input like this top one so i'll click on view source and then grab the code for the first input and and we'll paste that inside this row and i'll split the attributes on that save that and it's not currently taking up all the available width so we'll make this q input a column by adding a class of call and if we don't specify a number such as dash six and we just use call then this column will be full width and then i'm going to change the label to caption because this is going to be for our image caption and i want this field to be a little bit smaller a little bit denser so if we jump to the input page jump down to the q input api and if we go to style then we have this dense prop that we can add which will add dense mode to this component which occupies less space so i'll add this dense prop and if i save that we should see this go a little bit smaller and then i'm going to duplicate this row with the q input inside it and save that and for this one i'll change the label to location because this is going to be our location field and i'd like to add a little button over here a little location button that the user can click to find their current location later on so i'm going to jump back to the input page and i'll jump back up to the standard inputs and if we scroll down a bit this is the kind of thing i'm after so i want a little button over on the right of the field so this is the fourth from the bottom so i'm going to click on view source and we'll look at the fourth input from the bottom so one two three four and so to add a button to the right hand side of this input we just need to add a template tag with this v slot append directive and then this cue button inside so i'm just going to copy this bit this template tag and we'll paste that inside this queue input and this has a self-closing tag right now so i'll get rid of that slash and add a closing tag for this q input and then we'll just paste that template inside there and save that and we can now see this icon here but we don't want the plus icon we want some kind of location icon so i'm going to jump back to the eva icon site and search for location and this one looks pretty good so we just need to use the name navigation dash 2 dash outline so we'll jump to our cue button here and i'll split the attributes on that and change this icon prop to eva dash navigation dash 2 dash outline save that and we now have a nice little location button there and next we need a submit button that the user can click to submit a new post so i'm going to duplicate this row and just get rid of the cue input that's in there and then i'll jump to the quasar site and go to view components buttons button and i'll scroll down a bit and i quite like this button here this unelevated rounded button and that's in the third row from the bottom so i'll click on view source and see if we can find that button and here it is so i'll grab the code for that i will paste it in this row we just created [Music] and i'll split the attributes on that save that and i'll change the label to post image save that and i'd like a bit more space above this button to push it away from the location field a bit so this margin class we have on this row that has our button in it i'm going to replace that margin class with q dash mt for margin top dash lg for a large top margin and this page is looking pretty good on mobile now okay this camera page is looking great on mobile let's see how it's looking on desktop so it doesn't look too great although we're constraining the content to 975 pixels wide this image is just way too wide and way too big so we need to constrain the content a little bit more so if we go to the inspector come out of mobile view and i'll try and find the cue page element which is here so here's our constrain class that we created to constrain the width with this max width property set to 975 so i'm just going to override that here and we'll just reduce this down until it starts to look good so a little bit more i'd say okay that looks pretty decent so on this page we'll constrain the width to about 600 pixels so just refresh that and what we'll do is we'll jump to our global css file in the css folder app.sas and i'll duplicate this constrain css class and we'll create one called constrain more and for this one i'll just set the max width to 600 pixels save that then if we jump back to the camera page page camera.view scroll up to the q page component and we'll just replace this constrain class with constrain dash more save that and now that's looking a lot better however these fields are looking a little bit wide on desktop so let's make these fields full width on mobile but then a little bit smaller on desktop and we can use the same technique that we use for our home page layout so here are our inputs here the caption input and the location input and they both have a class of call at the moment which will make them full width and then to give these a different width on displays which are let's say small and wider then we can just add call dash sm dash and let's make them half the width of the available space so i'll add call dash sm-6 save that and then i'll add the same class to the location input as well so paste that in there save that and now this is looking pretty decent on both desktop and mobile okay let's set up a data object to store all of our data here so to store our photo our caption location and also the current date and a unique id so you can see we have these errors in the console property or method text is not defined and that's because these two cue inputs for the caption and the location have a v model of text which doesn't exist on this view component we don't have any data set up at all so let's add a data method that returns an object and we'll create an object in here to store our post data so we'll call this post and this will be an object i'm going to need a caption property i'll just set that to an empty string on a location property i'll also set that to an empty string and now we can bind these to our two inputs so this one for the caption i'm gonna set that b model to post dot caption and then this second one for the location we'll bind that to post dot location so we'll save that we should see those errors disappear let's clear the console and reload yeah those errors have disappeared and we're also going to need a unique id for each post as well and quasar has a built-in utility for generating unique ids so i'm going to jump to the quasar site go to quasar utils then other utils and if we scroll down we have this generate uid method that we can use so first we need to import this from quasar so i'm going to copy this line here jump to the top of the script section and paste that there and then we can just use this uid method for generating a unique id such as this one here so i'm going to jump back to our post object here and add a id property and i'm just going to call that method uid and then parentheses make sure i add a comma save that make sure it's not creating any errors and it's not and we're also going to need somewhere to store a photo for later on so i'll just add a property called photo and set that to null for now and we're also going to need a date field and we want to populate that with the current date so i'm going to set up a property called date and then i'm just going to fire date dot now like we did in the console earlier on to get the current date in the epoch timestamp format so i'll save that and then we'll use view dev tools to make sure these fields are all working so i'll go to view devtools and then find this page which is here page camera and we can see quasar has generated this unique id and put it in the id field and it's also put the current date timestamp in the date field and to check that this caption field is hooked up all right we can just edit that and type something in there and that's working because it updated the input there and then we'll just check the location field as well and that's working too so now we have all the fields set up for a new post ready to be sent to the back end which we'll be setting up later on in the course still have four videos to go in this series and in the next video we're going to add some native device functionality to our app so we're going to get access to the user's camera and display their camera feed in this photo frame allow the user to take a photo and we'll also get access to the user's location if they click this button and display their city and country in this location field make sure you subscribe so you don't miss the videos in this series or any other videos and if you're interested in the full course where we'll turn this up into a progressive web app then go to danny's dot link slash quasar pwa and the link is in the description you

Channel: Make Apps with Danny

Views: 5,025

Keywords: vue, vue js, vue.js, vuejs, vue tutorial, vue js tutorial, vue.js tutorial, vuejs tutorial, quasar, quasar framework, node.js, nodejs, node.js & express, express, firebase, firebase cloud firestore, firebase cloud firestore database, cloud firestore database, firebase storage, cloud storage, firebase hosting, create an app, heroku, camera, location, geolocation, responsive, responsive design, instagram, instagram clone, vue instagram clone, instagram clone vue, instagram clone vuejs, udemy

Id: YJDckj-U9w0

Length: 43min 41sec (2621 seconds)

Published: Wed Aug 26 2020