Build a Trello Clone with Vue.js/Vuetify.js and Feathers.js - Part 1

hello friends welcome to coding garden with CJ in this episode I'm going to build a Trello clone let's get right into it so if you're not familiar with Trello it is a essentially you can create Kanban boards with it and manage projects with it so on the trilha website you can create boards so you have lots of different boards let's just create a new one and then on a board you can add lists typically Kanban style is like to do doing and done and then for each list you can add cards hmm some questions in the chat I'm getting started right now and I see whoa is it cuz of my new haircut I did decide to cut my hair the other day and you can add cards so a card it can be like user stories but it's typically like tasks so like setup server folder set up client folder as a user I want something so that something and so you have your cards here and inside of a card you can add a description you can add comments you can assign a specific person to that card and then when you're working on it you move it to the doing column and then when you're done with it you move it to the done column of course you can create other lists this is live yes yes Andrea this is live and that's pretty much it so you can create lists you can also like rearrange your lists if you wanted to but this makes sense for to do doing and done add new list cards and I believe cards can then be archived as well and then an archive card disappears so I'm going to attempt to recreate this from scratch using huge is beautifies j/s and feathers j/s so i have a list of all the things i need to do so i'm going to generate a server using feathers jeaious when you generate a client using the view CLI i am going to gonna have just basic local off using the built-in for their generator and and then I'm gonna attempt to use feathers of UX I've never used it before I've been looking at the documentation and where we said this yes and it looks really awesome like essentially you could have a service in your store and it automatically syncs up with the backend service we'll figure it out we might run into issues but that seems like it'll be fun we'll create like a login page we'll get logged in then the user can add boards so you can create see your boards and then view an individual board then we're gonna do the same thing for lists so you can see all the lists on a board and so you can create one list them wait and then I guess for this you don't view a specific list because all of the lists are visible on the page itself and then same thing for cards so on a given list you can create a card you can then list all of the cards on a given list and then view a specific card to see its description I'm gonna get attempt to get all of that working so we can create boards we can create lists when create cards before I try to add the draggable cards and things like that once we get there I'm gonna use UJS trackable and then I'll be able to add other members to the board so the idea is you can collaborate on a project with other users and there's my break timer there are some questions in the chat so from Andrew don't mean to sidetrack you but will you talk about why you chose beautify and feathers yeah I can definitely maybe I probably won't go too far into depth but yes I will talk about first like what they are and why I'm why I'm using them definitely then we'll add being able to rearrange lists then we'll add activities so on a Trello board it keeps track of like all the things that happen so like when you create a board there's a log of that when you add a list when you add a card when you move a card there's like an activity log so I want to add that so that way anything that happens will be able to see a list of what hap then we can assign specific members to cards this is great for for projects because you can know that a specific user is like the the owner or the person doing that card and then lastly add comments this is a lot of stuff I don't know how long it's gonna take me I don't know if I want to be able to do it all tonight I'm gonna code for as long as I can I think and kind of get that going I have created an entity relationship diagram so there's there's quite a bit of quite quite a bit of things going on in our app so first we have users because they can log in and then we have boards a user can have many boards and a board has a specific owner ID board just has a name a background this could probably either be a color or URL a board can have many activities these are all the things that are done to it a board can have many lists a list has a name it's specific order the board ID that it belongs to and then whether or not it's archived and then a list can have many cards a card is going to have a title a description in order and a list ID so I know which lists that card belongs to and members will be like an array I'm going to do this with and then whether or not a card is archived and then a comment has a card ID and a user ID and some text on it so it's fairly complex I do plan to use Mongoose this is like a this does show relationships between document stores but I really like the built in schema validation with Mongoose and also it gets generated with you for you with feathers dais so this is my plan let's get into it so first thing is to generate the server for this I am going to be using feathers J s so feathers J s is a framework for building real-time backend applications it is built on top of Express so a lot of the things you'll see in there are basically how Express does things but an ADD thing adds things on top of it so it makes it really easy to create new routes to add authentication use many of the different plugins that are available for it I believe yes this so these are many different hooks I'll talk about what a hook is different things you can add into your app they're already ready to go for you essentially like if you're building an app from scratch with Express you have to do a lot you have to do a lot of setup but with feathers j/s a lot of that is done for you and you can just use simple commands to get it going the other thing I mentioned is it's real time so if you are collaborating on like a Trello board and you drag a card from one list to another if someone else is logged in they actually see that happen so the real time aspect of feathers Jas is gonna allow us to do that because all of our data will be in sync so if anyone else is logged in they'll see when new cards get created when cards get moved when new list get created that kind of thing it uses socket IO under the hood for that but you have some other options as well yes I am gonna be using I'll be using Mongoose which is a library that lets you talk to go dB yep and then that's that so let's create the application so you can install the feather CLI globally you can also use MPX I have it installed globally and the latest version so I'm gonna make a server directory and then in here I'm going to do feathers G app so feathers generate app will call it Trello clone oh actually I don't want to do this because I want to be in the server folder because I'm gonna have two separate folders I'll have my back-end feathers app in the server folder and then I'll have the view client in a client folder so in the server folder is where I'm going to generate the app let's call this Trello clone server a cello clone will use in p.m. so what's cool about feathers is you can generate services and they'll be available either via rest so you can use like postman or you can use fetch or Ajax talk to your services but also you can set it up with real time sockets the client I'm gonna be installing for feathers automatically handles all of this what we'll have to set up the connection but by just enabling these two things I can talk to my feathers API in either way cool so that will create my app alright it's ready to go and I believe if you do NPM start that will start up the feathers app on port 30 30 we have a basic feathers application just real quick I'm going to install node Mon node Mon is a tool that automatically refreshes your node server if things change feathers doesn't come with that by default so NPM install - - save dev node Mon cool it's installed and we can see in the server folder in our package.json there is a start script that uses node we're gonna create a dev script well not that we are gonna create a dev script that uses node mom okay I'm not used to my keyboard and I'm also not used to vs code so this is gonna be fun I usually use atom I've decided to switch I don't know if it's gonna be permanent or not but we'll see so now I can do NPM run dev that's what's up no daman our app is still listening cool good to go now let's generate the serve the client so we go up one directory I'm going to use npx at view slash CLI so this is the the view CLI version three we're going to create Trello clone well we'll just call it client cuz it'll create a folder called client and let's check off the first thing so we generated the server good to go alright let's choose our options so I want the router I want vo X will include the pre-processors winter and formatter and no testing today sorry sorry test people I am gonna be using beautify so I might as well choose stylus I do plan on using like the built in styles but oh well you stylus so we'll do es lint Airbnb lint on save and lint in fix on commit will put all of our configs in the package.json go so that's happening actually I do you need to add something to my to my list I also need to add beautify to client I'm gonna try to use the view CLI beautify plug-in don't know if it's gonna work but we'll see so I have generated the client let's go in there and make sure that it works so we should have a view app running on port 8080 there it is very cool and yeah now let's add local off to the server so I'm gonna go back into the server directory and feathers has a generate command called authentication so if I do feathers G authentication this will add authentication you can do social off as well for now I'm just gonna choose user name and password it'll use a look aloft you can give it the name of the entity in this case it's just gonna be users and I'm gonna use Mongoose as my provider you saw there that they have lots of other providers so you can use neo DB connects sequel eyes so you have lots of options for what your back-end server is thanks to me you choose your database connection it's totally fine with me and then it will generate authentication cool so I do have MongoDB installed and running on my machine if you're on a Mac you can do through install I think it's or MongoDB you can google it but it's already running and already installed on my machine so this should be able to connect to it automatically automatically we'll probably need to kill that just kill the server rerun it because we generate it off and let's see what got generated and also let's take a quick tour of the backend app so this is what gets generated when you create a Feathers app if you look in the source directory this is where all of your code goes if you look at app jeaious you can see that it is simply just an Express app so we're bringing in feathers Express this is their their special version of Express that adds some things onto it but it's basically just an Express app set up like you've seen every other Express app but it has lots of stuff by default so it has compression enabled it has cores enabled it has helmet which is setting secure headers all this stuff is totally set up for us and then when I generated authentication it created this file which automatically sets up JSON web token authentication and local is like local off with just like username and password this is my brick timer let's take a quick break yeah so that got generated you'll notice that this is looking at config strategies the config folder has all over the information about connecting to the database and information about generating web tokens and things like that so also by default all of the services that it generates have pagination enabled meaning they'll only show ten records at a time I don't want to have to paginate I'm gonna set this to like five hundred and then max is like a thousand so when I'm requesting my resources up to five hundred will come back in the request in production I probably wouldn't do this but I don't want to have to implement pagination especially because I want to be able to like request all of the cards for a given list or for a given board it has a default secret setup for authentication the path for authentication how to set up JSON web tokens let's change this real quick so let's do the audience is board coding we've got garden because we're creating a board I don't know subject let's just say off issuer is coding garden expires in one day cool the entity is user that's the model that I got generated username field will be email and password field will be password cool and actually we can update that so I don't think I'll require the user to enter an email we'll just have them enter in a username so if you look in models we can see that the user's model got generated and this is a mongoose schema and here's what we'll do yeah so we'll make this username instead of email and then if we look at my schema this thing so we need we'll change it to a username password we want to display name that will be required yeah we can set the formatting to so this will be display name it's a string it doesn't have to be unique what else and like an image URL for the user so we can show a nice little avatar unique it's true but display name will be required and then we'll also have image URL that's required I mean password should be required to so we'll add that and I think we're good to go so you'll notice this is using Mongoose this is using their schema creation if probably in in a bit we'll look at their their documentation but for now we don't we don't need to need to do anything special and by setting up timestamps it will automatically add when this was created and anytime it gets updated so that's good to go yeah and then we'll need to update our config so instead of looking at email it should look a user name cool I think that's good for the users entity so yeah we we have off we have an updated user's model you can also see when we generated the user service it generated this user service just has its default option options so it mounts it on the correct route ads in pagination brings in the model all that good stuff we don't really have to touch any of that so let's add beautify to our client [Music] here okay so I'm in the client folder because I'm using the view CLI there is a what is it a beautify CLI plugin so let's try it if I do npx add beautify maybe this org let's see so there is a plug-in published on NPM called like view CLI plug-in beautify and when you use this ad command yeah so there does view CLI plug-in beautify and the add command automatically looks for something on NPM with that name including beautify and now it'll just automatically set it up and add it to my app okay so successfully installed plugin allow me to fight to replace app dot view and hello world sure I have not done anything with that they'll create like a basic layout with beautify no custom theme for now no a la carte components and a way it goes cool so it actually updated my package.json to install beautify it updated all of these other things I think like let's let's look what it up and see what it updated so I believe it updated indexed of HTML to add yeah to add like the font icons and well so font and then also material icons and then it added and updated app view so now our app top view automatically has like a default beautify layout that's cool main j/s is automatically bringing in beautify you'll notice they're not using my style so they didn't have the linking there so what I need to move that up there and move that up there cool so it automatically imported it in imported the Styles used it and if we go to the browser I should have a basic yeah look I got a basic beautify app but just like that one come in it's pretty sweet okay so we added beautify in a bit we're gonna go in and like customize the layout and stuff like that but now let's add feathers view X so this is a essentially a module for bringing feather services into your view X store so let's go to the guide how do we get set up not that API overview installation okay so I'm gonna need to install feathers view X let me make sure yeah so my client is using NPM sometimes it uses yarn so it's using NPM so in the client folder I can add feathers view X and then I'll need to setup a feathers client I may need to install these others other feathers dependencies as well but like in the source folder in my client let's create a new file and call it feathers - client badge is it's gonna have all of these things and I believe I will have to install all these other packages as well trailing comma okay and what's this complaining about new line record at the end of the file but not found there you go and this is just our basic connection to our back-end server so feathers is brought in from the feathers package we're including the socket IO transport and we're including off and then we're actually just including the socket IO client this then creates a new feathers client configures it with socket IO and with auth but we also need these packages I believe if I just install app feathers Jas will get access to it let me let me double check let's just look at their documentation directly so if we look at API client usage feathers can be used on the client through the individual modules or the feathers j/s client module the latter combines all modules mentioned above into a single es5 transpiled version hmm yeah I guess they're installing all of these separate I'll just I'll just do that so we need feathers socket IO client and and then feather socket our client and then regular socket I have clients so feathers socket our client socket - IO client and then we also need the authentication client oh and I am doing this in the client folders is my UJS application hey Brooks thanks appreciate appreciate it okay so those were installed linter errors are gone back to the feathers view X documentation okay so this is our basic setup to connect to feathers from the client now we need to set up the store so let's bring in this stuff and then we will take a look so we generated the app with view X so it automatically created just this basic view X store so that's cool but we also need to bring in this stuff so bring in feathers view X bring in and in this case we'll just bring in feathers client which is in the same folder and where's-where's service coming from oh it's oh it's it's saying they're defined but never used so this is creating a new instance of feathers view X with that specific client let's see what is the ID field not sure what that is used for we'll leave it view use view X is already happening and then we need to use feathers view X right after that this wants a trailing comma okay and then we add our services to the view X store yeah right now all we want is off so we'll get rid of service and then in a bit when we actually generate a service we'll add that in so don't need anything else in my store I'm just going to have off and the user service is users what is this complaining about expected what oh this this needs to I'm sorry this needs to go under plugins so I need to have plugins which is an array and essentially feathers view X provides view X plugins to get access to them so cool trailing comma I think yep okay so our view X storage right now it's just bringing in off which was provided by feathers view X and we're telling it that are used as user services users which we set up on the back end cool I believe that's all we need for now let's take a look at their off module API okay so the off module helps you set up login and logout it includes the following state by default access token payload is authenticating so by just including that plug-in we automatically get these properties which we can like use you know in our client okay and it has two actions authenticate and logout cool you can provide a user service and the author plug-ins options to automatically populate the user upon sex successful login yeah so I already did that so once they're logged in we should get access to the user okay how are we going to do that and let me make sure we're there okay so we've added view X now let's get login going so if I look at my app dot view it's got a lot going on in here I think actually don't want a navigation drawer so I'm gonna get rid of that we will have the tool bar up top get rid of like all the buttons inside the tool bar so we just have like a basic tool bar we'll have the content and then we don't want a navigation drawer on the right cool and then copyright 2018 made with parts made with love by CJ cool let's see what we got yeah so that's down there just a basic app with like a nav bar up top and then if we look at our router it has two paths home and about if we look at our views there is home and that just has that quote right at the center let's take a quick break oh thanks guys in says fresh cut looks gee thank you very much cool so let's do this so on the home page we will display like a link a la a button to the login page and then later on we'll add logic that if you're already logged in like redirect to the list of boards or something like that okay so mmm let's get rid of this block quote in that image and then we can just use a V - button it says go to login cool so I'm gonna click that and then go to the login route so let's create a new view called login view and let's get rid of these default styles on the home page so login will just be super basic like that we will need a script tag name is gonna be login and let's create a basic login form so we'll check out the beautify Docs and go to their components will go to inputs and controls and then forms and then yeah we just want something super basic like that so well actually we need to sign up first before we can even login so I'll do that but let's just get this basic form and let's let's rename this to sign up for now sign up and then right in the center we can throw that form and let's create some data so data is a function that returns an object and data will have a user and the name of this is now sign a user is an object that has a user name which starts off as empty has a password which starts off as MP they have a display name which starts off as empty they have a image URL that starts off as empty it's their cool let's double-check our schema so we username password display name image or oh cool and we could probably also do like a confirm password so they have to enter their password twice cool and so we'll have a text field for user dot username will add some validation username rules label will be username we then need password the model is user dot password the rules I guess we'll just have a basic not blank rules maybe we can reuse the rules we'll see the label here will be password and type will be password so that we get the nice little stars when they're typing it in and then this will be the where they confirm the password so user confirm password label will be confirmed password so we've got user name let's throw display name up at the top my user name so this will be user dot display name display name acquired and then lastly we need image URL and we'll throw this right below password jor-el all right what do we got and actually we need to link to this page so signup is a component here we need to add a route for it so in our router let's get rid of the about page just does nothing for now gone and so in our router we want slash sign up the name will be sign up and the component will be signed up and we need to bring that component in so import sign up from views slash signup cool and then on the home page let's change this button to say sign up and we can just go to the route with the name sign up what are we complaining about V bind directives require an attribute value what unexpected this should work but two is typically an attribute for like router link and beautify includes this on a lot of different components where you can actually turn that thing into a router link let's just see if this works so on our nope oh these need to be single quotes that's why so it says when we click this button go to the sign up route yeah and if you see down in the bottom left there when I hover over it goes to slash sign up so when I click on it cool there's our form yeah now do you see in the chat we need to basically add like a submit button to the form so on sign up at key down dot prevent enter so that that's basically saying when they pressed key down when they press Enter prevent the form from submitting I will definitely do that so let's also add just a nice little button we'll do a V dash button here we're gonna say sign up yep okay I just thought like signing up is actually going to be creating a user right so we're essentially making a post request to the users route so I'm gonna have to add that in my view X store but we're getting the basic form working so sign up is there and then type will be submit and we'll have an at submit on the form so we want submit to prevent the default action and we'll say sign up and I'll do what Kaizen is suggesting there so on the form do @p down dot prevent the inter or are you saying that this should replace that I guess I've never done this before I get I'm thinking this would be whenever the inter button is press submit the form but please guys and clarify what that thing is doing but I'll leave I'll just leave this for now so when they submit the form will call the signup function so now in our component we need a sign-up method okay and then we also need the validation rules so basically all of these just can't be empty and then confirm password we need not empty we need confirm password rules so we'll have rules that make sure that it is the same as the one above it okay so on here we need not empty rules and if we look at beautify rules is an array that accepts the thing that's being validated so in this case there's gonna be a function that accepts like value and we'll say yeah so if not value we'll say cannot be empty and this should be valued cool so by default if we tap out of it cannot be empty cannot be empty and then now we need the confirm password rules so this takes in the confirm password and so here's a here's a cool tip about your data function it actually accepts a parameter called VM this is the view model and you have access to all of the data on your view model so what we can do is we can say if the confirm password is equal to VM dot password so this would be whatever they typed in in the password field cool so if that's true then we're good or we send back password must match let's try it what am I doing wrong triple equals I think not quad your blue oh I need a cool in there okay so username w3 CJ displayname CJ r password 1 2 3 confirmed password 1 2 3 4 1 2 3 image URL so this is not working let's look at our dev tools make sure nothing weird is going on property or method valid is not defined on the instance but reference during render where are we using valid ovie model equals valid let's see how that's used in the beautify Docs valid false ah so we can in our submit function we should be able to tap into valid and if that's true then we know that everything is valid on the form okay use your name display name password 1 2 3 confirm password 1 2 3 oh it needs to be PMDD user dot password hey Chad kaizen saying enter button doesn't then submit the form neither clears it ok so if if I just put that next to my at submit it should what we're saying is if they accidentally press Enter it won't submit the form let's try it if you do at keydown prevent dot enter cool so if I press enter cool form isn't submitting user name display name password one two three confirm password one two three they match sweet and then we need an image and then when I click signup this function should wrong so we'll say if this stop valid the log the form is valid and then we'll have to add our user service and get that create everything and let's also only enable this button if the form is valid so we'll bind or bind disabled to be not valid so if it's an if the form is not valid disabled the button is it disabled cool yeah so by default button is disabled and then we can do this signup one two three one two three image URL let's go to grab the image from there to copy image dress throw image URL in there and then now the form is valid and I can click signup and the form is valid cool so now we actually need to AB the user service to the view X store so that we can create a user let's take a quick break okay so over here we'll look at the service module API each service comes loaded with a default State cool cool and then there are mutations which actually will call the API if we look at just the general installation I should be able to do service and then users so let's do this so in our view X store we also get back service from feathers view X and we'll add a plug-in which is service users cool I believe actually let's let's let's double check if we look at the off module does it have a sign up action no it just has authenticate and logout so we actually need to create the user with the user service and then we'll need to call authenticate okay if we look at common patterns I believe can do instance defaults and there we can actually specify like a default user let's see how that's used though actions return store records hmm basic data modeling with instance defaults so here's the other cool thing you can create like an instance of a user and then when you say I think this is what I want to do because when you say dot save it actually create like calls the API to create it so do you find yourself spending time writing defaults into your form components maybe you wrote it a utility yourself or found one no problem instance defaults okay so how do we then use it it's somewhere but oh well let's let's do this so on our users in the store should be able to do this what's this complaining oh yeah cool so we can actually pull this from the form that we created and so all of our defaults are going to look like this except for confirmed password we'll have to have some custom logic for that so user name password display name and image URL so by default a user instance has everything blank and this should show us how to create one to do okay so we can do this I believe inside of our component so we've got our user service great now inside of signup everything if if it's valid then we can say user is the instance that we want to create and then we can say the lower case user is going to be a new user and then we'll pass in this user and I'm hoping that it'll ignore the confirm password field and just pass in password so that creates an instance of a user and then I believe we can do like dot save let's look at models and instances API yeah so create actually so let's try it so then if we do user dot create can we do like a dot vendor on it or something so creates that you do on the server using the instance data you might not every need to you that's a typo I should fix that and yes Jed I am using vs code hour or trying to it seems to be working out pretty well but in considers the save let feathers you ax call Creator patch yeah so let's just do that so if we did say dot save it we'll know that the thing isn't created yet so it should be able to create it on the server I'm curious though like is this going to return a promise yes here we go dot then so because basically what I want to do is after the user is created then we'll redirect to the login page so then we get the user and should be able to do like this I'm gonna do this dollar sign router dot push slash login and we'll have to create that route let's also like log the user make sure it actually got created and that does not need it oh that should be there cool we also have access to like is create pending from from the store so like when it's creating we can show like a little spinny bar let's try to do that so is create pending is going to be on the users store what do you like because they're like a map state basically we want to a service state we want to take the is create pending from the users store and use it inside of our sign up component let's see can we search for map state no map state common patterns yeah map state okay so that's how you say the name of the service and then which thing that you want so in our sign up component on computed we can say maps state and the state that we want is is create pending and that's going to be from the users service and then we need to import map state from view X so import map state from UX and so that should give us access to let's just say let's just call this loading so now in our UI we'll say V if not loading show the form otherwise we'll show a little spinny bar instead of the form so let's go to beautify let's go to their progress and yeah we don't want to these let's use a nice like blue one like the size of this purple one it's use this purple one but then we'll make it blue primary so it'll use the themes color so color is primary and then we only want to show this so V - if loading okay so we've got some errors unexpected token comma that's good to go missing a curly brace there we go okay so we click the sign up button if everything was valid we're gonna create an instance of a user we're then going to save that user which should call our API and while this is happening loading should be true because it's creating and then after that we're gonna redirect to the login page okay before I do this on my back-end we can actually enable like logging so let's go into I think it's yeah hooks and then logger and let's see ste bugs the service call should log should look okay so if you look at our back-end that's good to go front end good to go let's try it all right I'm going to keep the backend logging while I do this let's make sure are there any heirs property or method loading is not defined on the instance but reference during render maybe I have that flipped like in here yeah so loading loading should be is create pending from users okay alright let's let's try user name w3c J do the curly brace colors match up yes they do I think for Adam there is a package called swag 'its and I think in vs code it has like a really unoriginal name like bracket color match or something like that but yeah you can find it in the extensions store a it's pretty sweet see like yellow matches with yellow blue matches with blue does the same thing for a parenthesis it's pretty sweet okay so user names w3c J display name is CJ our password is one two three and then image URL grab that from github copy image address we will paste that in there moment of truth sign up I think it worked so if for whatever reason the logging on the backend isn't verbose but I'll see if I can fix that but we created a model it this password is blank that's not good oh it could be because the password is hashed on the backend by default cool I think we got created I have this thing called Tron it's a visual viewer so let's see if our user is actually in there this is Trello clone server and then we have our users collection and there I am look at that and you can see that by default it hashes the password has all the right fields yeah this is awesome so just just until this point right here this is like a tutorial with implementing login with feathers jeaious okay so or in the winning sign up and login okay so we have signed up now we need a login page so let us do that cool so we need a new view let's call this log and of you we're gonna need a template and we will let's copy what we have for sign up just gonna be a lot simpler so the button will say log in and then we really only need two fields we need username and password oh no oh no okay so we've got password we don't need display name and then we just need user name and the event will be login cool and then we'll have a very similar data it'll just be a lot simpler wait did I copy the whole script let's copy the whole script so our user just needs a username and password we only need the not empty rules this component is called login we'll figure out what is the pending State for being authenticated we'll pull that in and then we'll have a login method which if the form is valid meaning all the fields are there then we're gonna need to call authenticate okay so let's check the docs for mmm view X cool so if we look at the off module API is authenticate pending so we definitely want that that's gonna be essentially our loading and this will be coming from off so this will show the spinny bar when they're logging in and then we have an action called authenticate and so instead of map state well we do need map state because that's for the that'll load the logging thing log the loading thing but we also need map actions so that we can pull in the authenticate action so from off we want I think I can just do authenticate like that we'll see and then I should be able to call authenticate so if we look at the feathers Jas docs for client authentication there is the authenticate method but I believe yeah because we're using the local strategy it's gonna look like this cool so if the form was valid we're then going to say this dot authenticate strategy is local email well not email username is going to be this username password is going to be this password because that's what they entered in the form and then they are logged in logged in otherwise there was an authentication error okay let's try it so now we should have the login page well we need to add that route so three here so on our router we also need a login page name will be login component will be login and then we need to import the login component cool ok so now we can try to login so username password go something happened this dot authenticate is not a function oh that's why so sorry I put it under computed this needs to be under methods cool because basically this takes the authenticate action defined on the off module and makes it a method so that when I say this dot authenticate it's actually calling the off at the authenticate action from the auth module oh got that dragon bad request missing credentials let's store this in the variable oh this dot user yeah and actually let's just do this we can spread this dot user because just to clarify before I had this dot username it's this user username and this user dot password but since I want both of those properties I can just do this dot user and then spread its properties into this object cool let's try again w3c J password login we're logged in okay and actually so we can we can see if we look at application yeah feathers actually creates a JSON web token and we're now logged in so these are all other things but cool yeah we're logged in to easy so now that we're logged in we should redirect to the board's page where you display all of the users boards let's look at our readme cuz we've done a lot without checking things off so let's redirect here so once you're logged in we're gonna do this dollar sign router dot push and we want to go to boards so boards should be the page that lists all of your Trello boards and then let's create that view again a very similar template or things like centered we'll just show a spinny bar for now and yeah well add the route component will be boards will then import the boards plug-in cool so again if we once we login successfully we should get redirected to the boards page and then I just have that spinning spinning bar there Amy says I never understood this bread until just now glad to hear it and let's let's just review it because it's really useful and you see it a lot in like react code and like modern JavaScript code but I did this for login essentially what can I undo no get out there oh god oh well I'm just I can I can riad that coach but essentially what I wanted was I need these two properties username and password inside of this object and you can do it manually when you do it this way basically you're creating a username property and setting it to this dot username this dot user dot username you're creating a password property and setting it to this dot user duck password but if you use the spread operator you basically say take all of the properties inside of this object and add them to the subject pretty nifty and then now this object will have user name and password from the user and then we can do this dollar sign router dot push boards cool um alright let's look at our check thingy so we are now logging in on the client I think one thing I want to do is detect if you're logged in and then redirect to the board's page if you already are because right now if we go to the home page there's a sign up button and we don't want that we basically if we're logged in just redirect to the board's page and also we'll add a sign up and a login button so on the home page you got two buttons login and sign up but we we should be able to detect if you are already logged in then redirect so let's do this in our app top view this is our top level component let's get out rid of all this extra stuff cuz I removed a lot so don't need drawer tipped or yeah we don't need any of this cool but I do basically just want to say when the app top view is mounted attempt to login like if there's already a token in the browser try to log in if login works then redirect to the board's page otherwise just stay on stay wherever you are so we have our mounted method and we essentially want the same authenticate method from view X and we want that in our app table view so in a wrapped-up view we're gonna do map actions put it on methods so we want from the auth module we want authenticate and again here's the use of that spread operator basically map actions returns all of these functions and then it just puts them as properties on this object so grab that action and then now when we are mounted we'll do this dot authenticate and I'm pretty sure if you do authenticate without any parameters it'll attempt to use the existing JSON web token and that's basically what we want because if they're already logged in we don't want them to have to type in their username and password again so this should should do the thing let's actually copy our code from login so basically when the entire app is mounted we will attempt to authenticate using actually the strategy we let's do it with no options and then if it doesn't work we'll probably have to add strategy JWT otherwise there's an error and you just stay where you are so yeah I think it works so check it so when it goes to the home page it automatically redirects to boards that's awesome okay so now we can start working on the backend add the board's service to the server so if you look again at our entity relationship diagram a board has an owner ID and then eventually we'll add member IDs which is like an array of ID's so cousin is saying add a before create on the router path and before why do you mean oh you mean before enter so we could we could do that let's take a look so we look at our router yeah we could do a before enter on the home path and basically do the same thing only thing I'm worried about well not worried about is how do we get access to authenticate from the store I guess we could import the store indirectly I think there is a before route enter on home I'm gonna leave this like this well actually it doesn't make sense to put it on before before Route enter because what if it's not when the app first loads what if they like log out and then they try to go to the homepage yeah we need to move this I think I should be able to import the store directly and just say like stored ah or stored actions dot auth dot authenticate I believe let's try it okay so in our router on home will say before enter it actually is a suite so I'm using because I'm using code I have these all these plugins that are suggesting and it knows it knows that I'm inside of a router and it can suggest that so before route in turn what options do I get to from next I believe this week we should be able to call almost like Express middleware call the next function if they're not logged in or update who it is but regardless let's let's change this so basically we want to do this in our before route enter we'll need to update where we're actually getting authenticate from we get rid of map actions and then let's import the store in here so import store from store and then I think store actions off dot authenticate what is complaining about expected parentheses around arrow function cool and I don't want to push I think I want to say next is boards let's take a quick break whoo okay so what Kaizen is saying I can do next boards and then if it failed to login then I can do next to slash login and and essentially this are our homepage has if I'm doing it this way then the home page kind of it's just it's just there to just decide to redirect I'll probably have to put like a sign-up button on the like the toolbar or something like that let's see this works though so cannot read property off of undefined so if that didn't work let's see at the store let's see there docks to see if we can access the thing directly now when your components you'll have access to the feathers view X object which contains references to the models class basically I want to be able to call authenticate directly I don't know how so how let's see how to access a plugin from a VX torso view X store plugin commitee mutations inside plugins cool but how do I access the plugins I think I think this is the main issue like how do I get access to that special plug-in inside of my route here let's just try to log store dot plugins and then just call next undefined let's just log the store well we do do we have actions we have underscore actions is there a dispatch yeah so we should be able to do it to do a dispatch let's see if this works if I do a storm dispatch off slash authenticate it worked so when yeah so when you go to the homepage if you are already logged in redirect to the board's page let's also let's just clear out our cookie or our token and then make sure so if we go to the home page well oh I know why so it's there and then I think it's also in cookies Harbor fresh cool so when I try to go to the home page it automatically redirects to login let's add like a little sign up button in the toolbar and get rid of these buttons here actually we'll put both of those buttons in the toolbar and here we'll just throw like an h1 loading because the home page literally will only display for like a split second until they are logged in so on App dot view in the toolbar let's look at the view defied docs for how to put buttons in the toolbar link 1 link 2 league 3 so V toolbar items and then throw those in there I believe we want a V spacer to push it all the way to the right yeah and we'll also add a nice little title hello clone cool so a Trello clone we can go to the signup page we can go to the login page we can log in and when we log in that gets loaded there cool I think the other other thing I can do is I can actually bring in whether or not the user is logged in to the app component and then decide whether or not to show these buttons let's do that so if we look at the docs for off module API payload so if payload is defined then that means that the user is logged in so we should be able to use map State on our app table view so in Epcot view let's import map State um yeah and good call cut so basically Kaizen just mentioned we need to say same thing for boards like if you go to the board's page if they're not logged in redirect to the login page let's just do this real quick so bring in map state will then have computed and we will do map seat and we want from off we want payload and actually let's say user is payload so we're only going to show these items if there is no user cool and we should be able to in our router before Route enter make sure that the user exists on boards so cool so if you are logged in and actually we should be able to just access the you could say like if the user exists then do that because we don't want to attempt to authenticate again so let's just log the store we should get access to like store dot state so store getters users slash current yeah cool cool so I should be able to say stored getters user slash current invoked so user is gonna be that and we'll say if there is a user then we'll do next else we'll go to the login page actually no I think I think actually do you want to authenticate because if a user types in this URL directly and like that's that's the first URL they load then we want to actually attempt to log them in what's this complaining about shelling spaces is not allowed really oh there's spaces afterwards whoa what's up little spaces okay cool and let's add a logout button if they are logged in so if there is not a user then show login and sign up and if there is a user then we're gonna show the logout button and then we'll just have a logout method here how long am i been streaming an hour and 30 minutes great we have not done anything with the Trello board yet but it's gonna go so fast I swear it's gonna go so fast we got login working I don't know I'm prepared to stream until like midnight if I have to you may not be able to watch but you come back so when we clicked will call log out and see this log out and so now there should be a logout button cool actually want to do flat is that a thing yeah so you are logged in you should be able to click log out we now need to map the log out action whoa map actions so then we need methods we're gonna map the log out action from off I think that's what's called let's look at their ducks so there is logout and we should be able to just call logout and well we want to call log out and then redirect to login and I don't think it'll do that automatically we could do a watch on user let's just say let's do this we'll call this one off the log out from the log out and then we'll have our own method log out that does this start off log out and then this dollar sign router dot push login okay click the logout button goes to the login page we can sign up we can log in w3c J password submit yes okay so we're now logged in finally we can get to actually working on creating a Trillo board okay so we need a board service on the back end let's let's close all of this other stuff for now and we'll minimize the client and so on the server side we want to generate a boards service so let's do that cool so we're in the server directory we can do feathers G service and then we say it will say use Mongoose the name of the service is going to be boards will register the service on slash boards yes this service requires authentication you must be logged in to request boards cool and so that generated it and if we look over here now we have a boards model and we also have a boards service cool so let's update our model to match the schema we defined so let's open that up the board has a name a background and owner ID and then member IDs so board has a name type is string and is required it also has a background that's just going to be text it also has an owner ID this is where we'll go to the mangu stocks type is not a string let's go to the mangu stocks because we want to associate this with the the users table the Mongoose stuffs I think they showed in your populate yeah so it's not gonna be an array but we can just say user ID is an object ID reference and the reference is users so every board will have an owner ID that is the person that created the board and then we also need I think I called it members when I call it member IDs yeah take a quick break and member IDs is going to be an array of user IDs so essentially for any given board multiple people can be added to this members array and then they'll have access to that board cool so that's great now we need to do some things so we need to basically say when a board is created associate the currently logged in user as the owner creating the board so for that we can use feathers authentication hooks I have it open somewhere or I thought I did yeah feathers authentication hooks and so this has built-in hooks we can use which is things like associate current user so the associate current user before hook is similar to the query with current user but works on the incoming data so when we're creating a new board this will automatically set the owner ID field as the currently logged in user so let's do this and if we look at the boards hooks we can bring in the hooks there and we can say before create whoa editors trying to be a little too helpful okay so the ID field that should be odor ID so ID field the ID field on your user object so actually that's underscore ID so we don't need to specify that because that's by default and then as the ID field for a user that you want to set on your resource so this as is gonna be owner ID so now when a board is created owner ID will automatically get set we know is asking what did I use to create the trillo clone erd so to create this file I used lucidchart let me show that real quick it's pretty sweet tool you see it checked I was logged in log in with Google cool and I did just like a super basic ERD like they have the ability to do like multiple columns so you can do like primary key foreign key the name of the field the type I just did one with like super basic just the names of the fields and then once you have this you can draw arrows between entities to create like Minnie - Minnie or one - Minnie and then on any given one you can change like what's the starting and what's the ending it's pretty sweet you can also do flowcharts and stuff like that - okay so we've got the associate current user so when a user creates a board they'll get added as the owner cool later on we will [Music] restrict to actually let's do this we'll go ahead and add it so in here there's also restricted to owner so for fine method calls and patch update and remove only oh the owner of that board can request it we'll add this right now later on when we add when we start working on that members field it's going to be a little bit more complex because we can't just look at the owner ID we have to look at that array to see if the user is inside of that array but we'll go ahead and set this so before find owner ID so before you find you can only get boards where you are the owner if you get a single board you can only get boards for you the owner you were the owner if you update a board you can only update a board where you are the owner if you patch you can only patch where you are the owner and if you remove you can only remove where you were the owner I probably could just create a single array and set it on all of these because it's the same hooks mmm I'll just leave that for now cool okay so we've got our boards service we went ahead and set up the model it has all the stuff that we need now we can hook it up to the front end let's look at our readme cool yeah and uh we mo just mentioned than chat a video idea would be a designing database is definitely yeah cuz I spent probably at least 30 minutes like just thinking about what I wanted to build and making sure that like these were the relationships I want I'm pretty sure there's gonna work but yeah like this this is a skill in and of itself to just decide how you're going to structure the data okay so we have now have the board's service now let's work on the front end so we want to be able to list and create boards so let's do that let's close our server-side code and then on the client let's go into our store and we're gonna add that service so just like we added the user service we're going to add the board's service and then instance defaults we have the name the background and what else I think that's it because these other things we aren't going to be touching okay so now in boards dot view when the page loads we need to request all of the boards for the current user so let's do this the name of this is boards we'll have our mounted method and then we need to bring in the find all action from the board's service so we're going to import map actions it's either yeah pretty sure it's in action maybe it's a getter from UX let's look at the feathers view X service module API service actions fine so find we'll find all of the boards for that so should be able to map actions I believe with like boards slash find let's try it and so on our methods we're going to map actions for boards we want to bring in find and so when it's mounted will say this stop find and actually yeah querying with fine and pagination the fine action queries data from the remote server it returns a promise that resolves to the response from the service however because this service is there I believe there's a way to use like a computed property that is set to the data from the service so question the chat from Justin is there a reason that I chose to use MongoDB and Mongoose versus PG and sequel eyes mainly because I might want to change up these relations later and if I did sequel it would have mostly been set in stone from the beginning but Mongoose is because it's non non relational it's a little more forgiving if I decide to change things later let's look at this I pretty sure I'll install this earlier so reactive lists with live queries yes okay essentially what this will allow us to do is have a computed property that automatically lists all of the boards and if any new boards are created will automatically show those too so let's do this so we need to do map getters and that's going to be on computed so computed we will map getters we want boards and we're gonna do buying boards should be an object yeah that's a typo I'm pretty sure that needs to be an object okay and then we'll have a computed property that will just be boards and then we'll do this stuff fine boards the query just no query at all because we just want to find all the boards and because we already set it up to only query for ones that we own that automatically happens on the back end and oh I see so find appointments we still need to map that action actually I think I think I think we need to do that instead of a computed property so we still need methods and that's gonna be map actions with this and then the computed property will call find boards and return data and let's also do so we're mapping we want this to be map actions and then we also want to map state because in the boards store we should have access to whether or not it's loading so is fine depending so also on computed if you want map state boards and now let's do this it's an object loading will be is fine depending so here we'll say be - if loading show that and then otherwise for now let's just show a div with the or will show up pre with the boards inside of it to see if it actually worked and so this will be V if not loading okay this is my server shut down okay now find module feathers authentication because I definitely need to install that in Justin's masking so you didn't want to drop and alter all the time on string yeah and probably in the future I might add new features and change up the relationships a bit yeah mainly I just did it for flexibility in in the real world like if this was a little jet project I would probably use sequel because like there are there are a ton of relations here right like this entity relates to that entity and that's why you use a relational database but with Mongoose we can do associations so I don't know I guess I don't have the best reason but so install feathers authentication hooks on the server cool so we'll start it back up it's working so do a refresh actually if we go to the home page this stop find is not a function and that's going to be in boards Oh wait oh this dot fine no I don't need to do any of this because it's a computed property that'll automatically find the boards let's look at view look at our app will look at boards boards is currently undefined [Music] let's double check in here find action let's just let's just see real quick so if I actually do create a mounted event can I call this stop find boards take a quick stretch I mean I feel like I want to dive in it and like look at the data let's do let's do this we'll make this a sink we'll await this and then log the boards see later books yeah it took me a very long time to implement off ok so calling it directly works I however wanted to do what they were specifying here like in their common patterns actions return reactive store okay so I think this is how to do it so here's we'll do so are computed it's gonna be this so we need to map also map getters and we want boards and this should be find boards in store and then here we'll say boards are fine boards in store and grab the data and then we do want to map the actions find boards to find the to do zuray is not our active list but the individual records are and I think we have to just call this initially like in created or mounted so that it starts watching this that that this thought fine boards with an empty query and then boards is response to a data or a response okay hey property or method loading is not defined on the instance oh I guess I got rid of that so we also want to map state out computed and there is a on the service API there is is find pending we'll call this loading okay so we're getting data and we're listing it out here in an array so next thing I want to do is just create like a nice little create create form thingy so let's do this we'll have like a card with a simple little form inside of it yeah I mean something like this will work so let's do this so I do have a V layout column got our B flex so I want this to take up four columns with no offset so we get cool it's got a little card it is centered that's okay though no no media just a title that says create board cool and then here this will just say create color will be secondary what do we get cool and then we'll add a simple little form inside of it be card title v card actions is there a V like a vCard body v card media let's see how they're doing like this like where would I put that text eliminate music now yeah let's do this so we've got deve class headline this will say create board and then below that we're gonna put a nice little form inside of here let's copy our form from login because it's super simple with just two columns wait okay so V if not creating that should be okay create board will be the function that we call this will be board name label will be name what else do we have on a board a board has a name a background that's it so we'll have name and then background board background this will say background and then well let's create our data so we need valid initializes to false and we also need creating which we will we'll pull that in from the store but initially this is going to be false what errors do we get not empty rules should probably defined that elsewhere and then just like pull it in but for now we'll just do this and then we'll have the board which has a name and a background cool we do for whatever reason this this needs to be on the next line and that shouldn't say login that should say create see it so it is display flex wait the yeah so on vCard title can we add column if you don't want to flex Direction call him yeah how do I add flex direction on a vCard title I thought it was just column hmm so if we look at oh I think that's the issue yeah V lay outro rap we know because the card is here and then the card just has have to add primary title nope I don't want to just add an inline style but I think I will flex direction is column yeah okay so want to create a new board we'll call this Trello clone because we'll create a board to create the travel clone we'll give it a background and then we'll click create and that should create it let's get that working so we have the submit event called create board let's create that method and just like when we created a user for sign up we're going to do a very similar thing so if this valid meaning they have a name and a background then we're gonna say board will be that and the board that we're gonna create is gonna be a new board with this dot board and then we'll just say board not safe that should automatically create it on the server and because this is automatically listening we should see it pop up in the array above cool that's it alright let's try it no errors named Trello clone let's grab a nice background URL is there like the unsplash api random query nature that's not good Mountain okay sure so a clone that's gonna be our background URL click create notice how it automatically shows up in the array up there it's it's totally not formatted but when we click to create it created it on the server and this is a computed property so it's automatically listening for anything that correct created on the server so that's there let's go ahead and clear out the form so I'll say this stop board is an object with an empty name and an empty background and we do need to bring the not loading but we need is create pending from boards so we're gonna map that here so creating is that and so don't need it there anymore we are going to show the progress bar on the form if they are creating something so let's try it one more time name test project background something from the unsplash API query awesome okay why not that will be the background if I click create well it's probably spun for a second ok cool but now instead of just showing like the array up here let's actually show nice little cards for all of our boards so let's do this basically instead of a pre we want to show a video and only if it's not loading and we're gonna do a v4 board in boards and this is going to be will do your small fourth custom elements need a gas we need a key and then the key is just gonna be four dot underscore ID and inside of there we're gonna have a nice little v card B - card will have a V - card title this will be primary title will have a div with a class of headline and inside of there it's going to say board dot name cool so those are there we actually don't want this column I think you want this is row yeah cool and instead of four let's do three so that they are a little bit smaller cool and let's actually show the background image on there so like this I guess so v card media I think should be all we need and that goes above the vCard title and the source will be bound to board dots cool that's awesome so yeah we can create new boards all day like what are we gonna be doing soon I don't know newbie Tuesday and then we'll grab another random background like unsplash like is not giving me any any unique random images oh well so that'll be the background we create it it automatically pops up this is awesome I guess the other thing that's really cool about this is if we have this open in two separate windows if I create it on one side it'll automatically pop up on both because it's it's listening in real-time with feathers so another project that will be the background click create boom it's there for whatever reason that image didn't work but works it works let's take a quick break I have been streaming for a long time I believe yeah little over two hours I think I'll get creating lists working on the page itself and then maybe call it there and then just continue with this continue this on either Thursday or next Monday I did spend a really long time getting off working but and that it's good I think I need to add rap here too to the BL about yeah so that way it goes to the next line and maybe I can give these things a little bit of padding so if you look at the vita fide docks there are like yeah spacing classes so I guess I want margin so if I do like em - - on here give it a margin to have to get that a class examples margin all yeah cool but padding all - yeah let's run because margin pushes it to the next line and then I need to make sure I do that on the create one as well cool all right we need a button to view a specific board so let's do that on cards they have like actions like this vCard actions so right below that we will say go that button not flat button color is primary yeah so Kaizen was mentioned in class equals MA - apparently I think that might work - but if you put it as just a directive that works as well okay so that has a nice little button and if I click go I want this to go to the page for that specific board ok let's create a new view let's call it board that view and I'm gonna copy this exactly but then we'll change up some stuff okay so the name of this is Ford will have loading we were gonna say V for list in lists and I'll have to set all of that up the key will be list ID and then on each one there won't be an image but will show list name no actions for now and then we'll also have a create a nice little create list form it'll say create list when we click on it for V if creating list and this will be valid list and the model here will be listening let's look at our er D a list has a name that's it create list if not valid list okay this will be creating lists and okay so the data here is a list list has a name we're calling this valid list okay so we don't want to find all of the words we need to add this route and one thing we want is a per am so when the board route loads we need to know the ID of the specific board that we want to view so let's set that up in router and let's let's store this in a in a function so all this is logged in because then we can do this for for anything so lab function is logged in and so you need to be logged in to go to the boards page but you also need to be logged in to go to the individual boards page so the name of this will be board in the path will be boards slash ID - so the route with one specific board and then we need to load the board component and then in here whenever it's mounted we want to find need once you get bored with this dollar sign route params dot ID so whatever the the ID of the page that we're on that's the board that we want to get and then I'll set the board there and we want a map action get to be get bored from boards let's double check that so yet you pass in the ID cool so that should work we're gonna have access to get board will eventually create like create list we'll have to add the list service will have to do that on the back end but all the code should be the same cool and then now is get pending I think is one that one that we want yeah because if we're getting a single-board loading should be true and creating will have to bring in from the list list store later on but regardless so find boards in store [Music] maybe it's get bored in store I'm just guessing and we'll call this oh sorry this is we get to name this so should be get so we'll say get get bored in store and the individual board is going to be this route params that ID and that should show the individual board okay let's add like a nice little header up at the top like an h2 and it should be Ford name and then we need to we need to make this button go to that specific board so let's do that real quick so on here we have this Go button and we want to say this is to the route with the name board and our params are going to be an object and the ID is going to be four underscore ID so now if you notice in the bottom left each one will link to its unique ID and if we click on it it goes to the board page with that ID let's see what's complaining about can't read property name of undefined believe that's because board didn't exist yet we need to make sure that so this is boards we need to make sure that board is actually loaded can't read property data of ona fine oh I might have to work on yes we're gonna have to create a thing that brings in lists all that stuff but we want to be able to I guess what I was thinking was we are instead of just getting an individual board we want to like sync with the board which is why I was trying to map do the same thing that we were doing with boards let's make sure there's a kidder service getters get a function that allows you to query the store for a single item okay so yet should still give us get boards in store let's let's just log this stopper out top for anxiety make sure that that's actually coming in yeah so we've got the ID so your quick break hmm it's common to all this other stuff because I have like the list creation and then trying to repeat over list but none of that stuff exists yet so let's just comment that out okay cannot reverti data of undefined so when this attempts to do a git board in store that's not working let's look back at the common patterns actions returned reactive store records you must use the fine Gator as shown in the example yeah here's one instead of like trying to make it reactive I'm just gonna do a simple get so we should be able to map the get action that's great and then we don't want to do either of those things anymore and here we'll have data we'll have board starts off as an object and then when we get back it will get it back we'll say this stop board is the data from the response okay there we go so now that is showing the title of that specific board if we go back to boards and we go here it'll say test project cool so let's look at a read mean we are creating adding the owner ID we are listing and restricting we are viewing a specific board and restricting all of that's good to go and now we want to add lists to the service to the individual board so I've been streaming for about two hours and 20 minutes I think the last thing I'll do is app lists and then I'll do another live stream where I allow us to add cards we've been doing a lot and this is really fun actually like this is my first time using like feathers view X and it is awesome like I'm do I'm writing minimal code inside of my components it's automatically grabbing data from the service it's real-time synced it's it's pretty great so let's do this let's add a list service to the server so on the server we're gonna do feathers G service we use Mongoose the name of the service will be lists yes yes require authentication okay so that generated it now if we look at our server-side code we should have wait why didn't that work model will slash lists top model it's not in there why not super weird okay let me let me close close vs code for whatever reason it's not listed in there yeah there it is list up model don't know why it wasn't there before okay so a list has a name and order and a board ID and then whether or not it's archived so let's do this so a list has a name we can check out our association because basically we want to do this so a list has a board ID and that reference boards and then what else has an order that's just going to be a number and will default it 2-0 and then we need archived this will be a lien it defaults to false and then that's it cool so that is our list model we are going to want some hooks that only allow owners of a specific board to add a list I think I'm gonna skip that for now and do it next time because it's gonna be a little more complicated because the the list schema does not have the user ID so we can't just do an association of the user ID we have to do something more complex and we have to say look up the board with this ID of the like the list that you're trying to create and does its owner ID match the currently logged in user if so allow it for now I'm just gonna leave this as is any user can add lists to any board ID but we'll update that wait around okay so I have the basic list service that should be all I need and then back on the front-end let's go into our store and we're going to add the lists service a list has a name what else does it list have Porter board ID okay name order board ID should be good okay so we got lists in there now we need to bring that into our board component so and this this is where we can do the the whole automatically listening for changes to the two two lists yeah because the query is going to be where the board ID is the specific board ID so we should only get updates for that okay see how we were doing it in here so on computed we're going to map the getters for lists and we'll find this in store and then the query and so this is going to be lists the query will be where board ID is route params board ID oh no Roger friends that ID as simple as that okay so it's great so this should be loading board because the get for a single board that's where that's there so if loading board for loading lists and will have to bring in loading lists from boards also I'm sorry lists so map state for lists and we'll say loading lists is fine depending okay and then when the page loads we will also do sorry about that we'll also do a find find lists in store let's double check did we have the action not will need will also need the action for finding lists so for lists we will find lists and that's fine and then we'll do this to find lists and we need to pass in that same query we're board ID is this dot route that params that ID and we'll say Kant's this is that okay cool so lists is a computed property and now we should be able to show this so for lists in lists show each list name and then yeah let's see what happens so property or method creating list is not defined so we'll need to add that also okay cool so this is the name of the project we look at boards it is ro we do want to do I gotta be flex so the title takes up the entire row cool and then let's work on creating a list well actually it should just work because we already set it up so list has a name we are going to type the name in when we click Save it should just get added and we should see it pop up okay create a list to do create list it broke a property method create list is not to find all the instance but reference during render so the method is create lists oh-oh create lists so submit or yes so the submit of the form needs to be create lists and creating lists are we bringing that into yes so it is create pending okay let's try again so cradle is called to do create list fresh um don't know if it worked let's let's check them all go try on real quick and see if the data is in there so let's refresh our collections so we have users we do have boards but we do not have lists let me just kill my client just to be sure cool so create a list with the name to do it my my guess is like maybe validation is filling let's let's let's turn on logging on the server side so server logger hooks logger dot level is debug cool so now if I try to create something we should see a log of it create list nope make sure our methods getting called quick break so let's just log this stylist oh did I change the name of valid valid list that's why if this dot valid list okay it's gonna work to do great list oh I need to pass in the current board ID so when I create the list will say this list board ID will be this route params ID to do create list order is required I thought I gave order a default option though let's look at the server yeah order defaults to zero hmm I guess I still have to specify it okay so let's do name order defaults to zero and archived defaults to false okay so to do create list cool get some errors though property or method loading is not defined on the instance but reference during render so where are we trying to look at loading no so this should be if loading lists not just loading okay so to do doing and done create list cool and now we should be able to create a card on each individual list but I have been streaming for a very long time I've been streaming for two hours and 34 minutes so I think I'm gonna call it there but I will definitely do another live stream where I finish up this app will be able to add cards will be able to have multiple users logged in yeah it'll be a good time let's let's just do a quick review of everything we did here before do that so I'll do a logout okay so first we made it so that you can sign up so you could create a new user and actually this will be interesting because if I create a new user so user name cj2 let's grab another image so if I create another user when I login I should have no boards listed because I am a separate user from the other user that was logged in so if I click sign up email null already exists what there should be no email column it's like an authentication I changed email to be in a flute lesson I must make sure our model doesn't have an email column users dot model yeah there is no let's do this let's drop all the boards and drop all the users and then go to sign up I think what happened was when it initially generated that collection email was in the model but now we took it out of there and replaced it with username it's double checking our config that nothing anything else referencing email yeah I think I think maybe dropping it should fix it so we can sign up cool and now we can log in as that user and now that we're logged in we can create a board like my new project background will just be this image we can create it cool we get my new project now I can go to my new project and then I can create a list like to do doing and done cool and let's this is what was brought before so if I do a logout I should be able to sign up again so w3c j2 I hope this works if it doesn't I might have to do some digging I'm not gonna do it now I'm getting in the stream but it could be that by default the authentication expect like local off expects there to be an email field but I thought I'd changed it okay it worked so now I should be able to sign in as a separate user I shouldn't be seeing this board I think we should be able to see the query that came in oh well I probably should have test this earlier but now there are two different users oh they both have the same username I think that's another issue the model isn't saying that username is unique no it is unique true I should have broke oh well oh well I don't know I am gonna industry regardless well I'll debug it figure that X next time but I can't go to a project I get all of my columns I am getting a you do not have permission to access this so I don't know we'll figure this stuff out next time I used feathers J S on the back end so this is a framework for generating apps that use Express and then also real-time communication so you can create things and then get alerts when things are created so one thing I wasn't showing is because of the way we have this hooked up if two users were both logged in at the same time they would be able to see when new lists get created so another list no matter where you are in the world if you're logged in and you have access to this this board you would see you get created or if I go back to boards I think I think I think that's the issue like oh maybe when it when I logged out I didn't clear out the store yeah that was probably it because this is a separate user regardless so let's create anymore like new project - and then it has like this background image but if I create that over here every user logged in gets to see all of the data chad is saying it's Tron that's buggy ins not displaying the data right I think I accidentally oh you know cuz the created at timestamps are exactly the same okay cool yeah I will push this code up to github I will throw a link in the description below I guess to review a little bit more the client is using view J s but I'm also using feathers view X this package is awesome it allows us to very easily connect the view X store to feathers J s so first I create my feathers client which just connects to the backend server and then in the store all I have to do is specify which service I want to get data from and then it essentially has like a built in way of creating models too so I can say like what are the default fields when you're creating a new user or when you're creating a new board this is all it takes to connect to my store to the back-end service and then for instance like when I'm signing up I have some like basic built in form validation but I can simply where is it yeah so here I'm just creating a user as a model so I'm passing in all the fields from the form and then when I say user dot save that automatically calls my back-end service creates a user in the database and then sends me back the data for a login it has built-in authentication so after they fill in the login form I can just say this thought authenticate automatically logs in when I want to grab all of the boards that again is just talking to the service so we have some fancy computed getters where it this this is we're listening for new boards to get created actually works so by setting this up whenever a new board is created the page will instantly show it because I'm listening on this computed property for whenever a new board is created on the server again I'll push this code up you can check it out thanks so much for what for watching Justin says thanks for the stream Kaizen awesome stream arsalan thank you sir you're also very welcome thanks for tuning in thanks for supporting me and yeah as I mentioned either Thursday or Monday I'll do you part two of the stream and we should we should get it finished because I don't know in two and a half hours today we're able to do login creating basic boards and lists next time let's take a look at my read meme next time we will actually let's check this off so we can create lists now create and list the list next time we'll make it so that only the owner or members of Ward can create lists then we'll be able to add cards then we'll be able to move cards around rearrange lists keep track of all the activities add comments to cards it's gonna be great all right but yeah thanks again for watching see you next time have a wonderful afternoon morning evening night wherever you are in the world I'll see you next time you

Channel: Coding Garden

Views: 56,244

Keywords: live coding, frontend, programming, frameworks, full stack javascript, full stack web development, coding, debugging, mechanical keyboard, lesson, full stack, learn web development, learn javascript, vscode, css, web development, html, backend, live streaming, javascript, learn node.js, learning, learn to code, beginner, how to code, node.js, educational, debug

Id: DGPfCT5dDQE

Length: 164min 22sec (9862 seconds)

Published: Mon May 07 2018