Software as a Service Starter Kit - Wave - Tallstack theme

hey what's going on everyone in this video i want to show you how you can install the tall stack theme with your wave application and if you're not familiar with the tall stack you can go to tallstack.dev and the tall stack is tailwind alpine laravel and livewire and it just makes building applications so much fun and so much easier than before so i'm going to show you how you can easily install wav and then how you can install the tall stack theme so if we go to github.com actually i want to show you this real quick if we go to the trending this is super cool so wave has been trending for quite a while you can see it's 265 stars right now right below dogecoin so that's kind of cool so we're at about 2100 stars and we've just been getting a lot of stars recently and that's super cool because it will help move this project along and i did recommend before cloning the repo into a new folder but i'm going to actually suggest that you go to the tags and you can find the latest version so right now that is 2.0.1 and what we can do here is we can go ahead and just come down to the zip file and go ahead and just download that now i'm going to open this up and i'm going to call this wave tall stack and i'm going to move this into my sites folder okay and then i'm going to navigate to this in my terminal i'm going to go to cd sites and wave tall stack so to install wave we need to create a new database so i'm going to pop open table plus and go to my local host and then say that i want to add a new database and i'm just going to call this wave tall stack okay we've done that and i'm going to open this up in my code editor okay and then i need to go into the env.example and copy this and create a new file and just call this.env i'm then going to paste that in there and i'm going to change the url to wave tall stack and we will change the database to wave tall stack as well then we need to install the composer dependencies so we'll do composer install next we'll run php artisan migrate and then php artisan db seed and again all these instructions are in the github repo and just like that we've installed a new copy of wave so now if we were to go to wave tall stack we can see that we have our new application in front of us and this is using the default tailwind theme which you can totally use it basically has a tailwind it does have some alpine functionality and then of course it uses laravel but if you want to add some livewire magic in there you will probably want to upgrade to a pro account and you can gain access to the pro repo so if we go here and we go to pro support you can see that if you upgrade to a dev dojo pro account you will gain access to this new repo that we're going to have a bunch of new themes in there and then you can also join in on the discussions so i'm going to go ahead and go to that repo right now and if i go here i can go ahead and just download this pro repo and i'm going to open this up and inside of here we have a themes folder and then we have the tall stack theme so i'm going to go to my sites wave tall stack and this is inside of our resources views themes folder so you can see that we have the tailwind theme i can then move the tall stack theme into that folder and i probably will have a more streamlined way of installing new themes and then we will even have like plug-in support and a bunch of other cool stuff down the road but for now you just need to copy that folder into your themes folder and we can jump over to the documentation so if we go over to the documentation we can then go to features and go down to themes and here it says under the theme assets that we need to run npm install inside of a new theme so to install a new theme we then need to cd into that folder and we'll install the node dependencies by running npm install and after that's complete we can then run our asset watcher by running npm run watch okay and the last thing that we need to do is we need to activate the theme so let's go and log into our application and again our admin credentials is admin at admin.com this is all in the documentation as well and the password is simple enough password so we can then log in and we can go to our admin so we go up here and we go to the admin and then we'll go ahead and fix that we go over here to the left and click on themes and now you can see that we have the tailwind theme and then we also have the tall stack theme so let's go ahead and activate the theme and now let's go back to the main site and you can see that it looks very similar so it is using pretty much the same theme but it is using live wire in the back end and we can also create new live wire components and do a bunch of awesome live wire stuff to build our software as a service so let's go ahead and test this out if we go to our settings and let's go to the security you can see that this is actually powered by livewire so i can enter in my current password and then i'll enter in a password that does not match and if i click on update it's not going to do an actual server request it just did a livewire request and then printed out the error message okay so before closing out this video how about we create a new live wire component and then we add it to the main dashboard and maybe we kind of add like a task list or maybe like a task board i'm not going to add a bunch of functionality into it but i want to show you how you can create your own livewire component and then add it directly into your dashboard so let's go ahead and create the component okay so if i cd into that folder i can then run php artisan make live wire and i'm going to call this component task and it just created the class and the view for our new component okay now that we have our component maybe we also want to create a quick migration so i'm going to say php artisan make migration create tasks table and then finally i'll probably need a model to go along with that so i'm going to say php artisan make model task okay so now let's go over to our migration and add a few columns okay so we already have the id maybe we want to have a string which is the actual task itself and then maybe we also want to have a boolean value that is completed and we'll say by default this is going to be a zero and finally we'll say that we want to have an integer that is going to reference the user id who created this task and we'll set that to unsigned okay now that we have our migration let's run php artisan migrate and if we open up the database and we take a look we now have this tasks table okay so let's work on our component a little bit as you know whenever you create a new livewire component you have the class created inside of your app http livewire and we have our task list class component and then we also have inside of our resources views live wire we have our task list view okay so let's go ahead and just add a few classes here we'll say that we want this to be width of full and i want to create a container where we're going to add a new task so i'm going to say class gives a full width and actually want this to be a max width of we'll say 3xl we want to center that and we also want this to be flex and then i'll say i want this input of type text and i want to give it a placeholder and i'll say add new task now we're going to say class of width full and form input okay so i'm going to save that and then i'm going to go to my dashboard view so i'm going to say dashboard slash index and if i look inside of the tall stack theme this is the file that we want to edit so i'm going to click on that and i'm going to add my live wire component here so i'll just say at livewire task list let's save that let's go back to our dashboard and see what we're dealing with here okay so we now have this new input that says add new task how about i add a button over here and to add a button i'm actually going to copy some of the classes from our save button right here yeah let me just copy all these classes and let's jump back to the dashboard okay so now let's add the button so i'm going to give this a class of all this stuff right here i know that i have a margin top that i actually don't need and let's say that we want this to be flex item center and then we also want to give it a space of x three so we want a little bit of space between our input and our button so i know inside of our input i want to actually model so i'm going to say wire model and i want to model a public property called task and this is going to be the new task that we're going to add to the database i'm actually going to make this wiremodel.lazy because i don't want every single time that we type a new letter inside of the input i don't want it to do the ajax request okay and then for our button we'll say wire click equals and we want to call a method called add task okay so now we have all that in place let's jump over to our class and we need to add our public task and then we'll add this public function add task and in here we need to add our new task so when the user clicks on the add task button we then need to create a new let's say task equals new task and actually need to include this namespace and i think this actually just got put inside of the app folder yeah there's our app task so i'll just say use app task okay so we'll say task and ironically enough that is just task task i could have named that task name that might have made a little more sense but we'll just go with this this is going to be this task and then we'll say task user id is going to be the current authenticated user id and we'll say task save and then after we save we want to clear out the input so we'll say this task equals empty string let's go back and let's go ahead and possibly debug this so we actually don't even have any text inside of this button so how about i add some text that says add new task okay so let's save that go back here reload and we can see that that button is actually collapsing the text so i can add a quick class here called flex shrink zero so i don't want this to collapse the text and that looks a lot better so how about i'm going to add maybe a grocery list so i'll say milk click on add task say eggs add task and cheese and add task now let's look at our database if i reload we're going to see that we have each of those inside of the database so that's pretty cool we just added some simple ajax functionality with our livewire component maybe the next step is i want to print out all the tasks inside of our list so i need to first create the relationship inside of our app user model and i will say public function tasks and the user has many tasks so i'll say return this has many this is going to be app slash task class okay and then inside of our task list let's go ahead and display the current tasks that the user has added so i'm going to wrap this inside of a width full we'll say max-w 3xl and we want to center this and now let's do a simple for each we'll say for each user tasks and did i pluralize that yeah i did so i said tasks as task and let's go ahead and print this out this will be task task and maybe i want to add a div around this so i'll say div class equals full text sm and let's save this let's go back to our dashboard let's reload now you can see that we have our tasks in front of us so let's go ahead and add a few more so i'll say orange juice and sure enough that gets added awesome oh yeah okay so that's pretty cool we just went ahead and added a new live wire component and we just added a few tasks and then you can see that it automatically live updates and that's just some of the awesomeness that you get with a live wire and that you get with the tall stack theme in your wave application so that is it for this video i have a lot of cool things planned for wave and the tall stack theme is just one more addition that you will get if you upgrade to a pro account so make sure to check it out at devdojo.com pro and with a pro account you get a bunch of cool things including the tailwind page creator and of course the software as a service starter kit you can gain access to the premium videos and some premium themes and plugins down the road then you also have the ninja training program so if you're not familiar with development at all you can learn the basics like html css javascript php and laravel and then you can go into creating your software as a service with wave and then we also have some premium courses and episodes of course some ebooks and you can also gain access to sas adventure which is a 21 day program that will teach you how to create a software as a service from the ground up so really the idea behind this whole program is i want to teach you the skills to create your own software as a service and how all that functions underneath so thanks again for checking out this video be sure to check out the pro account if you want to gain access to some premium wave resources and i hope you guys have an awesome day and i will talk to you in a future video

Channel: devdojo

Views: 8,498

Keywords:

Id: jyb59ujcJZM

Length: 15min 25sec (925 seconds)

Published: Wed May 05 2021