Create a SaaS in 10 minutes

hey what's up guys tony here from the dev dojo and i'm going to show you how you can create a sas application in 10 minutes and the title may be a little clickbaity because we're actually not going to create a full sas in 10 minutes but what we are going to do is we are going to use this wave software as a service starter kit and then we're also going to design it with a tool called tails so you'll have a fully designed and fully functional sas application that you can start creating in under 10 minutes so wave is an open source software as a service starter kit that comes with billing user profiles authentication and just a bunch of stuff out of the box so let's go ahead and go to the github repo and then i'm going to scroll down to the installation steps so i'm going to clone this into a new folder and my new folder i'm going to create an application called watchdog and this is the premise behind this is kind of like a website monitoring and protection service we're not going to actually build out the software as a service but i kind of wanted to have a name for the application i'll also add a logo and you can kind of see it come together so we'll call this a watchdog okay we'll then need to cd into that folder and we'll open this up in our code editor okay and let's go back to the instructions step one says that we need to create a new database and to save some time i've already created a new database and just called that watchdog then we need to copy the env.example and change a few environment variables so our application is not going to live at wave.test it's actually going to live at watchdog.test and the database is going to be watchdog instead of wave so then step three is to run composer install and finally we can run php artisan migrate and then php artisan dbc okay now we should be able to visit our app at watchdog.test and you can see we have a new software as a service right in front of us so this is the starter theme it is a tailwind css theme and we're going to go ahead and modify it to kind of fit the needs for our application so instead of the wave logo how about we modify the logo and add our own so i actually have a logo that i've kind of whipped up so what i'm going to do is i'm going to copy this svg code and i'd like to go to this website called omg svg it basically rips out anything you don't need from the svg code okay so i'm going to copy that and inside of my code editor this is going to be inside of my resources views themes and the theme is tailwind and this is inside of the partials and the header.blade.p and then if i look through this file i can see that this is where the logo should go and we have the default svg right here so how about i just replace that and i'm going to save this and if we go back and reload you're gonna see that we see that there and it's pretty large so we don't need the logo to be that big so what we can do is we need to change the view box which is actually going to be the width and the height so we're gonna say 0 0 4 15 61 and then we need to give the class and we'll say h 9 w auto let's reload that and that looks quite a bit better maybe we even want to bump it down a little bit to h-6 let's try h8 okay that looks quite a bit better so we're starting to change the way that the default page looks now let's go ahead and go all in and let's create a new landing page for our software as a service so the service that we're going to use is called tails and if you were to visit devdozer.com tails this is a tailwind css page creator so you will need a pro account if you want to access all of the templates but you can still access a few free templates with a free account so let's go ahead and say that we want to add a new hero section so we can kind of scroll through and see the ones that we like and i think i'm going to go with this one right here so the reason why i'm not adding a header is because we're just going to keep the current header that's on the site so we have the hero section and then maybe we want some logos let's add some logos and then maybe some features and you can go through all this content and kind of find the blocks that you like and then drag and drop them and then you'll be able to copy and paste this into your project so let's find some features let's go with that one maybe we need a call to action let's use this one and let's go with a pricing and we may actually include the default pricing that's already in wave but let's just drop that there and then maybe we want to include an faq section and let's use that right there so now we have the page laid out and i want to show you that right now we kind of have this color scheme of the black and purple so if you look at the logo we have this purple color so let's go ahead and modify our page to have a purple color scheme let's go down let's click on this and you can see that the button changes and so does a lot of the cta and our buttons right here and the background for the faq okay so now what we can do is we can export the page and i can either copy the html or i could download the html how about i just copy that and i'm going to go into my home.blade.php and this is the file that we're going to modify and add our new design so i'm going to scroll down and as you can see we have the pricing already right here so i'm going to keep that in there and just paste this in and then we'll probably need to remove the pricing that i added before which was this one so before we take a look at what our page looks like we need to run our asset watcher because we've just added some new classes and tailwind may not know about all these classes yet so first what we need to do is we need to cd into our resources views themes and our tailwind folder and then we need to run npm install to install our node dependencies okay and after we've done that we can now run npm run watch to start our asset watcher and now check this out if we go to our software as a service and reload we're going to see that we have our new page in front of us we have our faq we have our pricing and the users can now sign in or sign up for our service so once you install you can log in with the admin credentials which is admin admin.com and password as password and this is what a user would see when they log into your application they have their dashboard in front of them and this is where you will add the logic for your software as a service so this is maybe where you would say hey enter your website and we will start monitoring and protecting your website they can also then go to their settings and they can check out the different plans that you have available so right now it says that i'm subscribed to this plan but you can switch plans you first need to sync up your paddle payment platform and you can learn about how to do all this in the wave documentation so that's it we just built the main building blocks for your software as a service in about 10 minutes so now it's up to you to start creating the actual functionality for your software as a service and then you'll be able to get into a whole different room which is marketing your sas and learning about all the other stuff that's outside of building your software as a service but it's a lot of fun i would definitely encourage you to start building start creating start learning and i hope you have a great time creating your sas application with wave and designing it with tails i will be sure to post the links below this video but until i see you in the next video i hope you have a great day and i will talk to you later

Channel: devdojo

Views: 30,756

Keywords:

Id: w_rSMEeqhK0

Length: 8min 11sec (491 seconds)

Published: Tue Apr 20 2021