Build with Ben - Adventures with Nuxt 3 (Beta) + @Supabase Trello MVP Clone (Part 2)

welcome everyone to another episode of build with ben and so for those who are new my name is ben i'm a the view core team next ambassador google developer expert web technologies and map platform and just do a lot of things on web things and yeah happy to be here because today what we're gonna do on this show is we're gonna talk about nuts3 and i thought we would change pace a little bit and actually build a mvp trello clone so that's kind of the plan for today so let me see as a quick overview let me see how do i want to do this it's much trickier when you only have one monitor i gotta say all right here we go switching over to live stream boom all right so here we go so for those who haven't used nux before basically it's a meta framework for next and view the next three actually recently came out the public beta that is and so as always i want to caveat the stream letting you know that the stuff we're doing here today is based on the public beta in other words not necessarily ready for production yet that's when the stable release will happen i assure you when the stable release happens there will be lots of fanfare about it i will certainly be announcing it here on the stream as well but if you want like the minute to minute update i think twitter is honestly probably the best place to get that kind of update but then otherwise yeah i will keep you all posted from there let's see actually you know what i got to do i realized because of my single monitor setup i need to open up twitch on my phone because i need a way to see what y'all are saying uh let's see all right there we go excellent all right very good okay so we have nux meta framework basically a opinion and way to use vue and then for those who haven't used it before trello oh i i don't really care for that when they do that to be honest i like when they able to show you the homepage rather than redirecting you to the user page if i want to do that i'll click it but basically it's a kanban board that got really popular i got i can't remember when it was released but it got really popular before it's kind of simple intuitive nature i think it got acquired by atlassian so that's basically um where it lives now but the high level of it here is that what we're going to do is we're going to build a mvp of it in other words we're probably going to be avoiding a lot of the styling and that kind of stuff but what i want to do is see how far we can push nux3 to do a basically an mvp clone of trello and then from there we can uh just kind of go from there and so yep so crash dudo here i'm using next production ready app for a hobby project so that's just it if you're using next three on a you know hobby project that you have full control over and you're totally aware of this risk then i think that's where it's one of those like have fun go nuts i think the reason why we do the next three warning in terms of production ready is because a lot of enterprise clients or people who where they people are relying on basically 100 uptime and like as little bugs as humanly possible that's where we want to be a little bit more careful with the experimentation there so we don't want to mislead any customers who might be looking for that level of reliability so but otherwise hobby projects you know honestly i wouldn't be surprised if over the next coming months a lot of people are already using public the public beta for their hobby projects and stuff underneath and then basically getting ready so that when stable release comes out they can use all of their lessons learned to apply that over to to the actual like you know sort of enterprise next three stuff with that said let's go ahead and let's let's just kick it off let's dive right in while we wait all right so first thing first i need to go ahead and create a new nux3 project so the way we're going to do that is going to do npm init oh wait is it npm create oh npx nuxi that's what it is so npx basically um is like another version of npm but just like allows you to import or use like someone else's software from what i understand nuxi we're going to knit a new project and we're going to call it next 3 trello mvp that's what i'm going to call it i think that should work we're going to install nuxi that's fine so nuxi is the new nux cli that's coming down the pipe so next three trello mvp great that's initialized let's go ahead repo and let's create it oh wait let's initialize the repo first and then oh i do want to change it so this is by the way i'm working off the new macbook pro 14-inch m1 max and so a lot of things still aren't fully configured so let's go ahead and actually let's create the init default branch to main instead and so branch main perfect and then from here we'll go ahead and create it'll be this don't worry about the description public yes excellent awesome all right and with that let me just add this git commit feature scaffold next three mvp or next three app get push let me just copy this that should do the trick excellent all right so let's bum let's see let's start by running the dev oh what do i need to install okay yes i need to install okay great question from crash dealer here how do i commit by each feature or when you are done so i'm personally a big fan of what i'll call microcommits so the moment i make an iteration on a feature then that's something that i'll basically commit and rather than sort of bundling everything together because i feel like the git commit log is useful for when you're trying to undo changes or more importantly you want to like pinpoint down why a change was made at a specific time and when you sort of bundle up a bunch of different features or fixes into one commit it sort of loses that like i think the most egregious form of this that i've seen in an actual like uh production code base is get commission git commit messages where they're just like code change like that's all they wrote and then that's about as useful as putting nothing in there because of course if you're committing something something has changed but you know the question is why and um i think a lot more people are using the type prefix so whether it's like feature a bug fix you know stylistic chore that kind of stuff there's a whole series on that i could probably do a whole stream on that to be honest and so my belief is that like once you've committed something that's of value even if it's a small iteration i honestly just commit that with why i made the change and i tried not to do bundling as much as possible so that my commit history has this sort of like storytelling oh luck dude yes there actually will be a recording of this we're actually testing it out but if you go to youtube.comcodezen you'll find all the recordings of the twitch streams there and yeah so you no worries about not being able to stay for the stream so thanks for hanging out and uh yeah i guess i'll see you in the recording all right so what have we done we've installed stuff answer some questions and oh and so actually to finalize my answer to crash dudo here in terms of like if i have like a large feature though i would say so obviously if you have like a main branch and a bunch of people working together that's when i will definitely basically branch off the main code branch and then from there i'll build like a feature like to be honest let's go and practice that for this code base and show you what like how i would typically collaborate so right now we've initialized the main branch and it's not really oh let me add this so git commit config add package lock all right so this is like probably what we typically have for most people starting out and so you know someone would clone and check it out and so let's go ahead and take a look at what we got here so let's npm run dev all right so as you can see that started up real fast which was super nice so let me go ahead and oh i forgot i'm in raycast now so i need to do two thirds first two thirds oh perfect and this one is going to be one third third third third last third there we go okay i need to get some hotkeys for that because i had some stuff for that so okay so i think that notification was for a follow i still need to get how all those things so whoever just followed thank you so much really appreciate it i need yeah i need to figure out how to get those things to pop up on my screen but one thing at a time again really appreciate y'all okay so we have this here and then we have this at 3 000. there we go look we have our nux dock here excellent all right so first thing first again we have about we have less than an hour now to get this running i'm going to see how far i can push this i'm actually fairly confident we go pretty far with this so let's go ahead and take a look at what's inside of this project shall we so i'm going to open up let's see next three mvp and let's go and open that excellent yes trust all authors all right we have app.view here most welcome excellent and then yeah let's go ahead and start building stuff out so okay if this were again let's treat this like a real project so what we're gonna do is i'm gonna start by doing a home page it's going to be the branch we're working on and let's let's start working just that simple so let's see we're going to have a folder for pages and then we'll have index.view and then i'm going to go ahead and say c we're going to say the single file component h1 of home page and then just make sure all this works let's see we're going to delete app.view and then i think that's it so now if i go and open up there we go homepage is up and running this is a test save excellent so now we have our homepage scaffold so let's go ahead and take a look quick look at what a typical home page is so it looks like on trello once assuming basically once you've logged in this is probably what you'll get we're not going to worry about authentication for this we're basically focusing on features so basically we see here there's like a recently viewed and then we have like workspaces and then that's it okay so no my based on my familiar with trello basically we have the ability to create boards within workspaces so they're they're so what we can do basically here is honestly from this point on can just save this because that's basically all we need from this point and we just need to be able to click on workspaces going forward so honestly this is a complete feature right here we have successfully added the mvp of home page so i would say add home page and then after that we would do typically you know like a pull request and then go ahead and merge that and then from here we go excellent our home page is now merged into the branch now next feature we have a home page we need to be able to actually look at workspaces so let's do uh workspaces workspace pages is what we're going to do next so that's our next branch and so here now we're going to take a little think about how we're going to do this so basically users will have the ability to one uh create a workspace so save that and then they'll be able to see all their existing workspace so we'll do a v for workspace in workspace list key of workspace dot id and then we'll just say workspace dot name for now and then that doesn't exist yet for those wondering so let's go ahead and use the script setup block real quick here and let me just import ref from view and then we'll do a workspace list which will be an array of different objects where we have key or we have the id i'll just do one two three and then a name of test and then we'll just go ahead and copy that here with two three four and then we call this experiment so that's that that's that that should go here if we save everything broke why did it break here we go excellent so we have create a workspace and then what we really should do is allow people to really create it we'll add a text that's a v model to new workspace name so then we'll say const new workspace name is a ref that's just a string and then every time they click it we're going to say create workspace which is a function where workspace list dot value basically because it's an array we're going to push an object where the id is going to be a random number so let's see cons random id equals math.floormath.random and then i think i think you need to put the length in this i'm just going to put a hundred no wait zero to one times a hundred i think that'll do it and then this will be random id this will be uh late name it's going to be new workspace name dot value and then oh i have questions i will get to the questions give me one sec i'm just burning through this so what did it not like workspace any value ts what did it not like it seems like it's okay but it's not happy with something hang on did i mess something up is it rand no it should be math.random that is correct it did not like this hang on that's good const random id equals math.floor math random ah javascript math random i thought i did that right yeah math out random what did it not like about it times max get random in yeah math.floor math.random oh what is it not like it is pointing at here object raise node modules parser missing semicolon what oh wait wait there we go i had an extra parenthesis thank you exe all right there we go that's good create workspace and actually just for sake of display let's go ahead and do the workspace.id and then here we go save that there you go one two three two three four and then if we click on set button that will create set workspace save so now we can say ramen create workspace there we go new one all right excellent so we have an id we have a name we have the ability to click on one um so this is good and so just for a little bit of styling though just so we can have workspace card then we'll say workspace card here will be display block border say 2px solid again let's keep it simple so this will be black border radius 4 pixels and let's do a padding of 2 ram all around so we save that and refresh hey there we go and then we can just add a margin bottom of one ram save okay excellent oh wait hold up padding left zero oh wait not the padding left zero that's it's the li that needs the help so oh wait but then i know what it is class workspace list so workspace list margin left zero padding left zero save wow really doesn't like the styling that's okay test there we go excellent all right so we have this we have the ability to create workspaces okay let's take a look at the quick questions here so crash studio ah great question here do we have have i configured typescript for this project well if i'm not mistaken typescript actually doesn't need to be configured that's kind of the beautiful part about nugs i think if you just use it it will work so you know what let's do that quick test so we've done okay so now we can implement the commit methodology that i was talking about we basically created a way for users to create workspaces right we don't have like any likes like there's no sustained data model yet we could use like indexeddb or something for that but that's another a problem for another time so all i'm going to do at this point is i'm going to commit this and say feature ability for users to create a workspace card that's basically all we did now we're talking about adding typescript so i believe all i need to do is lang ts and already we're going to see some stuff yelling at us so for example id here is no idea what it is so now that we're in this how would we do this well we know for a fact that this object here is going to be the type of workspace so by the way even if you don't know typescript again i'm someone who's avoided and i would say i'm not like a hardcore typescript user but i'm starting to see the benefits of it so my belief is learning how to sprinkle it so if you're don't worry about following along i got you okay so we have a type or actually this is technically an interface because they're an object but we would call it like works base right so workspaces contain what they contain an id which is going to be for now we're just going to say it's a number and then in addition to a number they will also have a name which will be a string and so what i believe we can do here is inside of workspace list we can make this an array of workspace like that and that should still work okay so what just happened here what we did was we told that this ref here the the view reference that it takes so this is um what i do correct me if i'm wrong i believe this is called typecasting where you're basically telling it like later on that like hey this is going to be the type you're going to be and so the type that the ref is expecting is a workspace but an array of workspaces hence this symbol right here that's basically what's happening here and so what it's doing is basically defining the shape of data that's going to be inside so if right now i decided to go like well i'm going to type whether it's you know public and that's going to be like true you can see here that the the editor is already telling me like hey by the way this doesn't actually exist inside of what you're saying it should be which is this workspace type right here and so if i wanted to do that what i would do is i would go like whether it's public or not and then i would be like this is a boolean and then now you can see now all the errors have resolved itself and so again i'm not a hardcore typescript fanatic but you can see this is actually useful this to me this level of typescript where it's almost more documentation than it is sort of like being super restrictive as far as like letting you know that like this is kind of what you expect so right now if random id right if we just go ahead and comment this out real quick and we say let random id equals my random one two three save you'll notice here we go look take that check it out you're trying to assign a string into what should be a number and so little things like that this is where i think it's just enough typing that it's actually pretty useful and so to um so to crash due to this question as you can see here there wasn't any additional configuration i did to make typescript work with nuxt then that's really important the key thing with the next three right now because for other like view two next two arguably even view three and veet you do kind of have to tell the bundler that like hey by the way i plan on using typescript so include it but i like the next three's opinion here where it's like look we're gonna set up the default area for you if you don't use it don't worry we're not gonna ship it it's not gonna slow you down but if you do use it it's already there for you no additional configuration needed so that's super exciting okay so to be honest i'm gonna leave the typescript just because i think it's fairly straightforward although why is key not like oh it doesn't like the fact that it's not assignable to key ah because the id is a number that's really interesting because it's expecting a string see that's the kind of thing you might might not might miss and so maybe what i should do is just uh string how do we stringify is it two string string like this ah javascript i don't typically do i think it's a two string object type two string oh okay i had that right to begin with so maybe like this but now we have to switch this type and now i think our errors are happy i don't know and so this is an example of why people sometimes don't like typing is because then you get these random errors that you don't totally understand so i'm not sure why the key is unhappy right now but regardless all right i'm just gonna undo it then i'm gonna leave it back to the number and then i'll don't worry i won't worry about that error okay so then let's go ahead and go and this is to me technically a refactor because we haven't really changed any code we just kind of made it a little bit cleaner use typescript to in home page great all right excellent great so question from thesis here in the chat have you tried storybook with veed unfortunately i have not honestly i will add that as you know what am i think here is this let's take celsi thesis that's about storybook with feet all right so that's my note for later on when i'm reviewing to check that out later because honestly once i check that out and i do if it is working as i hope then honestly there probably will be a build with ben episode on it so that said all right let's keep going okay so we have the ability to create workspaces right so here's my ah i want to be able to okay so here's an example right i want to hit enter rather than clicking on the button and so all i'm gonna do is on this input field i'll listen to a key up of enter and then on that i'll run the same function for create workspace so to show you that works i hit enter there's apple bananas cherries excellent and then all we need to do now to be honest to make so let me see i had the ability to hit enter so that's a feature i'm just gonna commit that so you see that just that one feature i'm not gonna i'm not gonna get in a rabbit hole that's talking about clearing the input that's a separate thing so we're gonna go ahead and say all right that's my change so this is the feature a user can hit enter key to create workspace and then one more thing because i noticed it is that when we create the workspace we want to go ahead and zero it out so new workspace name dot value should be again a reset into an empty string so we test you see that apple everything's reset that's great so that itself is also a feature i don't think that was a bug again you could consider it by this feature reset new workspace name on input automatically there you go clear that is it now we're not quite done yet oh okay i see you from crash dude oh i'm so glad that the videos are helpful but yeah please again whether you're following along or keep asking your questions and let's see oh you said that git series covers you know what well there you go all right so we have from crash dudo here get series on best practices sounds good yeah i will totally i can totally do that yeah because i have some basic because my total philosophy on learning things to be honest is using the most relevant thing that gives you the maximum it's called the what i i call the maple principle so again just for sake of maple so like so just like this so it stands for maximum power for least effort i'm a big believer in this basic principle for uh not only learning things but sort of sort of learning and teaching in general right and so yeah i totally happy to do a series on that thank you for asking and as you have other ideas during your journey and have questions please let me know okay so we have this and this but now we actually need to actually dive into a workspace based on this id so what we're gonna do here now is we have the ability to create so okay so now that we have this we need to be able to go to the actual workspace page the way we're gonna do that is we're gonna have a series a folder for workspace and inside the folder it will get an id a specific id and so in order to check this out let me see one let's go ahead and make this an svc i'm not going to skip and skip the typescript on this workspace number 100 save and so if this works the way i think it will right now we go to workspace 100 nothing works that's not great workspace 100 did not like it why did it why is it not happy we do a new file test.view and then h1 test so here if we do workspace slash test does not like that either let me go ahead and where's my i believe i actually have it running in a different one so let me close that huh [Music] nope this is the right one i need to close that okay so is it working all right now it's totally gone that's fine so first two thirds here we go and then if we npm run dev there we go it's building okay test works now and then if i do 100 100 does not work okay so this is where we kind of need to go a little bit on the documentation here so v3 nux we're gonna do docs we're gonna talk about pages oh they changed it oh okay they change it it used to be an underscore it looks like now it is a square bracket okay that would explain why my thing is not working so what we're going to do here just to prove that that worked is we're going to swap this out and we're going to rename it to this save okay now if we go here and refresh there we go workspace 100. okay so that's um new thing here with the brackets not let me see do i like the id but i mean the brackets probably expose other functionality that i saw briefly in the docs but here we go let's go ahead and see something real quick it looks like we get the route params.group which is pretty great so inside of here i wonder how do i get the route params from it without do because it probably comes from a global export so the question is how do i get that parent.view parent.viewchild.view okay so hang on so we take a look at this pages i want to grab the see routeparams.group this is good okay so to show you this work sorry to show you this works what i'm talking about here we'll go not here we'll go here and if i go ahead and drop this right here we should see that 100 shows up and then if i switch this to 80 this appropriately occurs but what i want to do though just to show you um is that i want to be able to pull the id here and i don't think it's just going to be globally available to me i'm pretty sure this is going to break so yeah route was not defined of course it's not defined because it's not a global property so i'm almost curious okay so the easiest thing for me is to skip the composition api there's no documentation on that just yet if i do export default on mounted and then i log the global route here and refresh route is not defined mount maybe no mounted should have it what's going on the route is showing up here that's so clear why is it not liking this route params route is not defined there's no global route that's automatically imported in the options okay so we're a little more stuck let's take a look at use composables from app is it like use route from app is there i'm missing something i know i'm missing something integrates view router all right so route syntax programmatic navigation router push the thing is oh there's probably an abstraction here that i'm missing i do want to be able to grab that oh this is stopping me you state you state cons foo use foo [Music] to auto import composables and use auto imports okay no we're gonna go farther than this okay so i'm clearly missing something on this part so once again let's go to last third let's go to two-thirds okay whoops that's something i want last third oh maybe this dot route noob dev you might be right first two thirds this dot dollar sign rock if that's that is you're probably right yes thank you new dev toy forgot right options api we are in the this context okay that's all i need okay because then we have the prams for this then okay here's where this gets a little bit trickier we need to be able to not only show the id we theoretically want to also pull the name right so this means that we need the ability to store things so i'm gonna just create a little store here for now and we'll just call this global.js and what we're gonna do here is we're going to do do do do all right this workspace list all right this is gonna be a little bit funky cons workspace list import let me hide that to make it easier to read from view and then export default object workspace list okay hopefully this works as intended delete the type casting right now then we're going to go to indexed view delete that real quick don't even worry about the typescript i'm actually going to remove that for a second because what i want to do is import from is it not going to auto complete for me go back one from there then go to store and go to global.js and inside of here we should get workspace list from here save we go back to the home page tess that did not like it export route handling i'm not worried about that does not provide an export name your hands are playing with the keyboard is it a mechanical keyboard no this is the built-in macbook uh pro keyboard actually i i did this before and this bit me export default i don't know i keep messing this up to be totally honest okay export const like this maybe if i do it like this all right save refresh see if it yells at me again let's drop that to the bottom test enter oh okay that's good apple okay i can work with this because the reason why i'm saying this is it means that now that things are in this if i okay okay okay here's where my brain is going now that i have something in the store that's saving all my list of items i can when i click on this okay so here we go here follow me let me show what i'm thinking i'm thinking i got this i got this i got this when they click on it we want to actually go to we're going to do this let's see next link let me hide the sidebar so it's easier for y'all to see so save that knuckling two what are we binding to it is a string we're going to slash workspace slash and we're going to go to workspace.id all right so if this works as intended and i click we'll see that it says workspace 43 okay so if i refresh that 43 does come into play but the reason this should be powerful though is because if we go inside of the id and this time i will import what is it i'll just say global store from back one more then store global.js i can say that inside of the setup method i'm gonna go ahead and digital console whoops console.log global store and we take a look at that and refresh oh no it does not provide a default okay fine fine fine so you said that a workspace list workspace list dot value refresh id 43 okay that's great although no no no no that's not that great oh the proxy is right this is right this is right this is right because when we go from the home page which doesn't have anything right now if i do test and i click now we should see there is a proxy here but if i refresh everything gets reset ah okay so i'm gonna barrel down layouts default.view sfc and then i think we discovered last time that it's basically we can say this is the div and then there is the slot in here and to show that this works we're gonna add a little paragraph it says default layout save if we refresh do i need to restart the server i'm just gonna restart it just on the safe side and then ha default layout here so now my default layout's here i can quickly scaffold a ui nav and then this will be a next link to the home page just like that and if we click on it it goes does not go home did not terribly like that we're gonna figure out why shortly but then here this is the test this is the click and then it did not like component inside non-root element that can be animated yeah i'm not terribly concerned about that is that because id has okay fine so there's that and that drop that save does this also have uh yes this also needs to be wrapped in a div for now so there we go so jump that reset the oh what did i do one i think i okay i i did like a manual zoom which is weird but okay here we go home test there you go 38. okay proxy here we go so i fixed a couple of things doing this so let me go ahead and i definitely need to do a quick commit here so first of all we added a layout view feature at default layout and then all right that's good enough for now all right so the reason this is important now is because we actually can keep track of what's inside of here so if we go back home and then we say like apple 94 you see that we get the id from the route that's exactly what we want right so inside of here slash 94 and then but what we want to do is we want to actually fetch the actual oh i think i know what it is okay hold up log sorry i'm jumping the gun a couple things we'll see this real quick all right so if i refresh this page we get the ability to see the context proxy target target props and oh wait no it gets two things get props and context like this so here we go context here context gets adders events proxy target contacts slots emit adders nope that's not where this is oh wait this.route this route does not you know that's totally fine okay got it so again this is coding under time pressure let's okay noob dev so this is recorded with the camera of the laptop yes this is the built-in camera believe it or not this is the 1080p macbook pro camera i haven't done anything the only thing you're getting feedback on differently is the audio and that is this sure mic right here but everything else that you're hearing like this is just the macbook pro all on itself so noob dev you might you might be losing your mind in that regard yeah this this is this is just a normal camera i didn't bring any camera equipment because i wanted to see the limits of this so okay it's fine i don't know how to do this purely in the setup context just yet but what we can do though is basically export not even we should return an object called workspace list and so if this works the way i think i should be able to log this.workspace list here and not even do that just like that and so if we clear that and refresh great so we have a proxy here with the target length array is it what i think it is workspace comma it is but workspace list interestingly enough does not have oh it doesn't have anything in there because i refresh the page that makes sense apple bananas open workspace proxy does have stuff inside of it excellent okay so the reason this is i'm saying this is because then what we can do is for now because i can't think of it immediately and i'm shorter on time today what we're going to do is we're going to do a couple of things we're going to set the workspace name so i'm going to say workspace name it is currently empty but because we can basically now share that we can basically say dot workspace name is equal to this dot workspace list dot find where the workspace for every workspace we're looking for the one where workspace.id is equivalent to this dot route dot params just like that so if this works the way i hope it would we're just gonna fingers cross this one we're going to say workspace name right here and then the id we'll put here inside of parentheses like this and then we'll say works technically actually we see route.params id although i would prefer to do that a little bit cleaner so if we save that and then check it out okay something slightly wrong here is because it did not this that workspace stuff workspace name why did it not like this.workspace name exists this workspace list we have i mean it is a proxy but i do i have to really unbox it that would be really odd if that's the case i'm just gonna say it cannot read properties of fine yeah okay that's what i thought yep apple click do i have my view dev tools on oh i haven't installed it on this machine yet log this.workspace list okay let's try this again apple click proxy is here and then the id should equal the route oh you know what i bet route params is not is a string but i totally think that params is a string oh it's an object oh it's even worse uh because workspace id is totally a number right now and so of course that wouldn't be a thing so if i did this with that fix my problems let's see not a number what oh i'm so silly yep i am silly okay okay so i don't even need number i forgot this is what i needed ah i broke stuff hold up [Music] womp apple click oh it didn't totally work which is totally fine because this.params.id didn't match because i'm doing the type equivalent now the type of equivalent is here then it's more like this and then that's my find find it then i get the name right isn't that what i called it i called it that name yes i did so if i call that works space name and refresh this should work click 19 still doesn't like it oh i had it just as oh i'm silly i'm silly i'm silly i'm silly there we go apple workspace hey check it all righty default delete delete delete delete okay so apple works bananas work so now we have a workspace um yes clickify sw you're totally right it was the i had it on the wrong parentheses we did the fine then we need to access the name here so with that we see that banana's workspace is good apple workspace is good okay excellent so now we actually basically have a functioning workspace for our pages so let's see ability to open workspace pages that's basically what happened excellent all right so let's check out main again let's assume we did all the things and then okay now we need to actually do the actual board that's um the part that we're gonna try to do in the next basically five minutes is a high level so what i'm gonna do now we're gonna basically really just scaffold this so i'm gonna inside of here we're gonna go ahead and just code directly on on main just to save us some time but what i wanna do here is i'm gonna say board list and so it's an array and then inside of the boards we'll go into so basically here we'll say v dashboard in board list where the key is abort.id and then inside of here we're just going to say board dot name so again just to be quick with this actually we're just going to create the bolt we're going to actually know what i'm going to do looping through the board is fine but actually what i want to do is just create the board itself so let's see board the board is an object that will contain columns which will be an array and then we'll go from there okay so to show you what i mean by that is let's say you'll have a name so let's just call it test right now so we'll have a section on the page that contains an h2 of the board dot name so here now we should see whoa what happened apple click test is on here so now we go here and do cherries save there you go it's good and then we need the ability to create columns so create column goes here and then we're this is where we're going to have the individual divs that actually they're lists technically because every column's gonna have a list so we're gonna v4 item in uh column items just ignore me for now i'm just scaffolding some ideas here and then the item will be here create column okay so creating a column basically allows us to create a couple things so this will be oh you know what though i don't even need to do this so here we go how do we see that we have a column so i'm just going to say um board column here and just to show that it works i'm going to do board column and this will be basically we'll say border uh 1 pixel solid again let's do it black let's go ahead and just give it a height of 80 vh width of 100 pixels let's save that real quick there you go that's one and then how do we know how many columns we have well this will be a div of what i will call the class column grid again not the best naming convention right now but we're going for time over this and so display grid but then we'll do grid column template oh wait grid template grid template columns that's what i want and then we'll repeat for every one fr for five times oh wait it should be all the way five times one fr okay so this works as i expect theoretically if we copy this five two times you'll see it here three okay great so that way we have three columns and then let me just go ahead and do a margin right of one rem okay but this is not how this would work you would create the column manually and so the way i'm gonna do this is for every one of the board column right in the number of columns here we'll say v for board column in board dot columns i really don't like that also i'm saying columns so many times now that is starting to lose some meaning all right so it doesn't have anything in here yet and if we go ahead and click to create the column inside of here we'll have a method of create column and then this will be uh this dot or dot columns dot push and then this time we'll just say items just like that so now if we create there we go one two three okay but the question is well what do we do when we have like more columns than you know so right now it's hard coded right so imagine if i only repeated this twice you'll see that our columns are across and really we want our css to be dynamic to however many columns we're creating inside of the app and so the way i'm going to solve this problem is we're going to go ahead and we're going to v bind this variable this is the part that we want to be dynamic and what we're going to do is we're going to do uh board dot columns dot length and then that should be it so we save and ah yeah yeah yeah apple there we go all right so you show you this works something is not happy but we're gonna go ahead and inside of my body nux defaults here we go inside of our column grid here you'll notice now that when we create it to do you'll see that there's this variable column length and then when we did this oh it did work okay excellent where is that being defined now oh anyways but here it is and so you can see here that it's dynamically being increased as we add columns and so if you didn't know this is the new v-bind style syntax from view 3.2 that as you can see is already inside of nux3 as we would hope so this way we're allowing users to determine how many columns we don't have to worry about how many it is because we're going to utilize javascript to update a css variable which would then update everything else accordingly which honestly is an absolute beautiful way to deal with this so that's that and then all right so feature-wise what we've done is we've added the ability to create columns on board in a workspace and then the last thing we need to do in the two minutes that i have left is inside of every column grid there would be a button to create a card so you can see whoa that is so big okay that's not great so we're just going to do create card just like that and then this would also then you know i'm going to switch this out from a ul to just a div and actually you know what what's better this is probably just a section it's probably a little bit more accurate and then once we have that li it did not like that oh sorry section should go here now we have a list of stuff and then we can say for item in okay so now we're in board column in column column so item in column dot items and then the key will be item dot id this is where we can then say the item.name so then we have an input here that is a v model on a new uh card item like that so then we can say the v model here is new card item which is a string but then when users they click to create the card this will then say uh well create card we'll go ahead and say this oh how do i do this this create card actually needs to take in the specific column though because otherwise we're going to have a problem [Music] so i believe we can take in a specific column in here and then we can say column dot items.push and then again we'll just do id name and the name is new card item i don't know this is gonna work but we're going to find out so then we say test [Music] new card item is not defined new card item is defined nope new card item is right there oh i'm silly this dot new card item save okay so go back home apple click create column test yes it worked item create you can create this one apple oh well that's funny i have tied too many reactive things but hey check it that's that is we have the ability to create items hey i see jason is rating hello everyone how is it going we are for those who are joining we are building a trello mvp using doing a trello mvp using next three public beta where we have a basic home page that allows you to create different workspaces and then you can open them up to create columns and then you can create a like basically again this why i say trello mvp very little styling and the functionality is just basically there but we have our styles being created dynamically for us using the new view 3.2 syntax where you can bind javascript just a little bit of javascript to your css which is very exciting because then you utilize css variables and so man okay so we have something pretty good here so again i know i flew through that because again this is like this is build with ben so sometimes you see this is like my prototyping brain when i'm going through and just like just want to make sure things work first before i get too complicated with things so this feature here i would say feature users can now add card items to their columns so let's see there are people okay i'm looking at the chat so for those wondering what i'm coding on so this is the new macbook pro 14 inch that has the m1 max chip 64 gigs of ram and just tricked out i think i got the max spec on everything except the hard drive that one is only two terabytes because i do i mean i'm here streaming so for those who don't know i do lots of video content and i found that one terabyte at this point doesn't really quite do the trick anymore so hence the the the upgrade to two terabytes and so yeah so yeah so this is the this camera here is the built-in webcam and honestly i am really happy with it i know that my dslr that's mirrorless and beautiful bokeh effect at home is is very very good but for remote travel and not having to carry another webcam although and to be honest i bought webcams where i don't think the quality was nearly this good so you know kudos to the hardware team for making such a nice camera so yeah i see bendy my crew checking in hello hello everyone okay so let me see let me go ahead and check something real quick all right let me go ahead and actually go ahead and run [Music] okay okay great now a couple things we need to fix though is that now that we have the ability to actually add cards we'll notice there is a bit of a bug right now where the ability to create cards and honestly this input is bothering me so hang on a sec board column board column input let's just fix that real quick so if we do board column input i would i would create a css class name if really needed but hopefully this should do this input should do the trick ah it really doesn't like that when i do it i wonder why that's breaking but i am working with a beta so it's curious so this here is really interesting oh i know why because of that okay because i had hard-coded a pixel so now if i create another column there we go there you go now it's perfectly inline i was going to say why is it doing that okay so per our talking our like one of the discussions today was about basically that git commit message philosophy and so i'm a big believer of like having a commitment message for the mo like the biggest bang for buck of like the code that you change and so people can look through history and sort of at least start to like figure out where things change rather than like mass commits that have so many different lines of code that it's really hard to either undo to undo cherry pick or whatever so now i think about it i might not even need this css i just realized so that might not even be necessary the bug i really need to know why it's doing that that's kind of annoying that's fine that's fine that's fine that's fine okay so we're good so what i'm gonna do here now is just go ahead this is the minimum viable fix as you can see it's just one thing and then so what i'll do here is i'm gonna stage this for commit and then this is a fix although i personally have started getting used to saying bug fix rather than just fix because fix is the same letter as feature for f i guess fix does work because it's a little bit shorter but okay so we'll just do fix for now and then i'll say input resolve input overflow issue that's really what we fix right while you can say that you know remove hard coded value that's a very literal way of saying what change really it's the input overflow that kind of made us notice this was a problem so now that we have this we have the ability to create cards and everything this is where the next bug comes in you'll notice that all of these things have their own new like input bit that is not good no bueno why is that happening so the reason that's happening is because we created an input for every board column which is correct but we've tied it to a generic data property here at the very top which is new card item and what we really need is it for to be specific to the instance and so in other words we need every single column when it's pushed to come with a couple of things in addition to the item we actually need a basically new column sorry sorry new item name that's really all it is and so every every one of those things needs its own separate instance and so all we need to change actually is to say we're identifying here the column so column.newcard i or new item name that's what i called it all right new item name right so now that i save that we create the columns here one two three apple is good bananas is good and cherries is good and now we can create the card although now it's not oh i know why it's not liking it it's because inside of our method here where we go ahead and create the card we're looking for a new card item which no longer exists what we're actually looking for is the new item name property that's inside of the column that we pass in so we do column dot new item name this time just like that create create create and then apple and then create you can see that works bananas create that's good cherries create excellent so now we have individual items and then just because i think this is a default feature that's not really worth doing a whole con actually no let's just keep it simple so now that we've fixed this let's go and commit that that's nice and simple so there we go that looks clean to me so that would be a fix and the fix on here is the fact that basically let's see remove dependency on a single reactive data property for creating new card items that's basically what we did now just to tidy this up a little bit we're going to say if column dot new item name is true basically then we do this stuff otherwise we're not going to create an item because we saw there's an inadvertent bug here that we created a new item and we really don't want that so if i save this now create my columns i should be able to click nothing happens asdf that's good sfdc that's good and good so that is another fix i'm honestly just going to commit that small thing just like that and so this is the fix for preventing users from creating empty items and then the only other thing i think i needed to fix right here is we need to actually reset the actual item name so column.new item name equals empty string so to show that this works now let's go in apple and there we go create oh that did not work as i thought it might let me refresh that real quick apple here we go create create create apple create ah there we go okay that was just a caching thing bananas cherries excellent so that's resetting exactly as we want so just like that we have another feature that we've added feature reset new card item input there we go and the last thing i want to do just to make things really easy is that on the input when we go and input it we don't have to click enter card we can also do a key up dot enter and that will go ahead and run a create card on the column so just like that we have that and then let me go ahead and actually just move that down so it's a little bit cleaner and so to show that this works i can now do ramen oh wait did that not like it reset create item column column item name okay let's go ahead and let's say berries now and then create create ramen enter there we go bento okonomiyaki enter excellent that works exactly as we want it to which is excellent so i got another feature commit feature and the feature here is allow users to use enter key to create cards in the trello board okay now that we have this we actually have a fairly decent like this is fairly good now like if we have like a carrot board now uh carrot why does it say cherries though that's interesting what is this cherries coming from that's really interesting cherries oh the board name was hardcoded oh wait a second why did i hard code the board mounted this dot board name nope why did i do this oh board dot name oh that's right that's right that's right that's when i was gonna dynamically define the board i was gonna say why is that cherry thing exists okay then that's a quick refactor that's code that doesn't need to exist right now sorry no sure clean up unused code that's that excellent all right carrot workspace here berries excellent so let's see if this saves this home berries so this did not cache which makes sense because we aren't doing any state persistent which is totally fine okay excellent all right now the real question is where can we really go from here i mean technically now you can start doing things like tracking things so we have here we have the ability to create so we have three columns again apple banana cherries so theoretically you probably want the ability to move cards between them that's your next bit and so that's really a matter of yeah i mean we could run algorithms on that or like basically write ways to like move things around but to be honest i feel like this is a hot like a good high level stopping point for sort of showing you how like at a high level how this could be architected using nux3 to do some basic like we have a home page we have workspaces that contain different boards and then the only other thing though maybe the thing that would actually be helpful i just realized is for us to go ahead and let me go ahead and bump this over to go ahead and actually make the card sustainable i think no let's say that for another stream so okay so noob dev here with a question so for your commit message you usually use feature chore bug and refactor yeah so actually you know what let's talk about that i think that's a good way to kind of wrap it up because committed then is the thing that i sort of gave me this sort of initial inspiration to be honest and so let me go ahead and drop this or drop this let me put this in resources and i'll drop this in the chat [Music] so committed then is like a way to really like enforce this style but to be honest basically the idea behind this is let me see a committed zen wait here we go where's the documentation for committed zen here we go nope i'm wrong commands in it config config config config tutorials writing commits feature wow you think they would make this easier oh conventional commits here we go uh new conventional commits oh here we go this is really what i wanted yep okay so give me a quick summary feature fix feature fix breaking change scope body specification oh my gosh it used to there used to literally be a list of the types all right so for the sake because i apparently can't find it for whatever reason all right here we go so basically there is some people are using the feet for feature i guess that's okay honestly i don't mind typing it fully out so this is like a new feature like a new functionality on the app then we have a fix or in my opinion bug fix um again depending on if you want to distinguish i do like the fact that bug fix looks different uh so bug fix here so you know what i'm going to do i'm going to put the shortcut in parentheses that people seem to be using and so this here as you can imagine is to basically resolve undesired behavior in your app then there is refactor that doesn't seem to get shortcut and so refactor at this point basically saying to no new feature just optimizations on how the code is written or organized and i realize as i'm saying this i am actually going to go ahead and create an obsidian note for this and so this will be commit i'll just call it my commit philosophy inspired by committed okay so feature again we'll figure this out later but this will give me a chance to possibly write a blog post or video on this at some point so we said feature right that's the one there is feature there are bug fixes there are refactoring and then there are what we call there are chores actually no actually i'm actually a little bit on the fence by that one config so configurations are one of those things that like basically these are project level how do i say app changes that do not impact oh okay how about that impact dev workflow and not end user behavior so for example right like adding typescript you might consider a function out like a feature to your app but in my opinion like enabling type that's really more of a configuration thing your end user is not going to know the difference whether or not you use typescript or not that's config what other config things you know you enable prettier that's an example of config so the other ones so other things that some people will honestly see feature chore yeah my okay i guess chore is is technically one i'm a little on the fence about this one but these are random tasks that have no real impact on the code base so the chore is like the trivial stuff so an example might be deleting hello world if you're being like a true sort of like get storyteller with your logs then the chores are the things that they really don't impact your either way it's not really a configuration it's not a refactor it's not a bug fix not a feature it's like the other stuff like honestly i almost want to just call it miscellaneous because now you have this sort of like f b r c m like the scanning is a little bit easier and so i might call it these five to be honest because as we can see here the reason why i'm a fan of this kind of commit style is because if we look at the log now you'll see actually you know what i'm going to do i'm going to push github repo open view oh wait github repo view web done all right so check this out if we look at all the commits here what's really nice is you get a kind of a chance to see what happened when and there really is the story of what happened basically what we did together today from scaffolding the app all the way to like how i added the home page how i use typescript in the homepage so you can see here that again the story is nice and concise really simple and if anyone was were to undo it they know exactly what they're getting which i think is incredibly powerful so again lang ts and the interface here passing it in as i'm basically typecasting with that and so this here to me is also a lot more useful for to be honest like when you're reverting code and so when developers i find have a habit of lumping everything together it makes it trickier to go in and change or sort of pick things out that need to be reverted or basically deleted and so for me this sort of style of commits really helps with that kind of problem and also jumping to specific points as well and so we tried our best really in this particular stream to be as concise as humanly possible which is great so i think the only other thing i want to do before wrapping up is let's go ahead and deploy this actually because i have a feeling i'll be coming back to this and working on it so i'm gonna go ahead and initialize a new project for this and create a new site with netlify init go to bend codes and stream and then next next three trello mvp great and then yes it looks like i am this is my first time setting it up on this machine oh did not like it here we go there we go i'm logged in so now we can run npm run build dist yup fine created okay so to show that this works we should be able to see now if we've done npm ntl open done yeah new dev thanks for the question like i said i think it probably merits its own like mini lightning talk i would love to at some point create like call it a dedicated youtube video on explaining each one because i know that i'm probably doing some things that are kind of assumed at this point and why is it doing that all right ntl open see if this works ah beautiful so we can see here that it is currently being deployed oh it broke why did it break could not resolve global this from pages okay so this is gonna start to be a beta thing yup i had a feeling so the store is acting up it seems because if we look here it does work but looks like we have something to fix on this test okay that's all i find i'll fix that on another time but thank you okay so let's let's try this out so i'm going to switch over switch back over to intermission okay well that has been fun i i thought i could get well i could we got a lot of it on basically within the hour time span which is nice and then went over a little bit of time for explanation so i definitely think the 90 minutes is about about the right pace before builds with ben so make sure to keep that up in the future but it's been an absolute pleasure having you all um once again thanks jason for the raid and for everyone stopping by so with that um thanks everyone for hanging out today i will see you all later it's been fun bye

Channel: BenCodeZen

Views: 1,786

Keywords:

Id: jG9AamyzRuw

Length: 72min 28sec (4348 seconds)

Published: Mon Nov 08 2021