How To Build A No Code SaaS (Everything You Need)

in this video we're gonna go over some of the most important tools that you need in order to get started with no code and building your web app right now so we're gonna split this up into a couple of different categories number one we're gonna go into the design tools so what you need to actually get started with design we're gonna go into the web builders and then we're gonna go into integrations and after that we're gonna show you some real-life examples of web apps and some things that you can do with these no code apps or these no code tools and before we get started if you're new here my name is arno ross i do design content on this youtube channel and i also cover a lot of no code web building things like that everything that i'm going to talk about in this video is going to be in the description so if you need anything in this video that's where you can get it so first things first here with design it's critical that you have something like figment now figma is the industry standard as of right now it used to be something called sketch but sketch is now out of the out of the picture because people like a free version of sketch and you can also collaborate so what figma is in a nutshell is it's a design program that you can use in order to build your website your application your mobile app whatever it is you need something in order to craft that or in order to start imagining what it's actually going to look like and something like figma will allow you to do that now figma is perfect for the actual design part of it and then luckily fig jam so part of figma is great for sharing notes and brainstorming and doing that kind of thing with stickies that's what you're going to need figma for so figma is the most important thing for design now in terms of actual designing something there's so many templates and ui kits that already exist that are top of the line built by great professionals that can get you started right now without having to draw a single shape or a single square so i recommend starting with untitled ui and building up from there so untitled ui is this great ui kit built for figma to create these amazing pages that you see here in order to build uh marketing pages but they also have a few application based designs see that you have a graph here and you have other other things that you can do i'm not going to get too into it but i've made a specific video on this ui kit and i recommend that you watch it if you want to get into it now this one is a very premium one and there's a lot of free examples as well so if you want to go ahead and check them out in the description now once you have your design completely done it's ready to go you're going to want to build it somehow and if you want complete customizability then i recommend something called webflow now webflow is something i cover a lot in this channel it's my web builder of choice it's the program that i believe will solve 90 of the problems that you might have and we'll get you there without code in the slightest so if you need inspiration into what you can actually do with webflow i recommend that you watch this playlist here because i've covered a lot of websites and some really great examples on what you can actually do but i need to be fair and webflow isn't the only player in the game there's also bubble now bubble i've used in the past and it's not my favorite but it's also an option and it's regarded as the second best or one of the best options to use with this no code movement and so bubble works a lot more like figma would where you can sort of drag and drop the shapes and the images and everything without needing to use too much css or too much actual planning the numbers and planning how you're going to build it you can kind of just drop things in and it works how you would build it in figma but it's not my preference i prefer webflow there's also bravo.com now this is great if you want to build mobile applications without any code and they're still a pretty young company they're still pretty new they started in 2019 so not a ton of experience and and real life examples but i mean there's no there's over 71 000 projects created so they're starting to build a huge huge community already so one of the last ones here is going to be card now card is great for a one-pager a very simple portfolio type of of page you don't need a lot of crazy designs you want something very simple and that's the way to do it i wouldn't even look into anything else if you want only a very simple almost like a cv i would just pay the twenty dollars a year fee that you need and then that's that's all you need because the previous examples i've explained are pretty pricey but if you want to go into that then that's how you can do it now we've covered some of the most popular web building platforms but there are many many many other examples like wordpress shopify woocommerce wix things like that but i'm not going to get too into that i'm only going to get into the things that i personally have used and like and will suggest to you guys to build because i know that there's a lot of out there so this is what i recommend for you guys to get started and building your first no code application so i'm going to talk a lot about web flow in this video and web flow integrations products examples and hopefully that is how you guys will get started because that's what i would recommend for you guys to do so the first integration that you're going to need with web flow and this whole no code movement is going to be f and suite now f and suite is essentially an extension of webflow right so what f and suite does is they have a service or a software where they can add capabilities to your website whether that's going to be in the actual building of a website so they'll add capabilities to webflow or they'll add capabilities to your actual published site so to give an example webflow itself doesn't have too many ways to display a collection or a list of items like t-shirts right so then what f and suite will do is they'll you can add a very simple line of code and within that integration you will now be able to add a search filter you'll be able to add a load more you'll be able to add a different way of displaying those items and so f suite is a great tool to learn if you want to get into the whole no code system and here they have some great examples of sites that that they built and sites that actually feature the fn suite system so i recommend that you check out this link and again everything here is going to be in the description so don't worry about it next up is going to be notion now notion isn't necessarily a no code tool like web flow is or f and suite or all that but it's one of the most important tools that i have in my arsenal now without notion i wouldn't be able to plan anything i wouldn't be able to to collaborate with my with my programmers with my designers with other people that work in my team so notion is what i use to be able to plan all my projects on my pages to be able to collaborate with clients even with freelance clients and so i can't recommend notion more notion is probably the most important tool that i have in my kit and i can't recommend it enough next up is going to be a form app now i know what you're thinking why do i need a format but doesn't webflow have a format doesn't wix doesn't every essential web platform builder have a form section and the answer is yes but if you want to give a better experience for that form like you can see here in the right side part of the hero then you can start to imagine what you can do with this form it's essentially giving your audience or your customers a better experience when they're filling out a form and like it says here in the h1 there's a better way to ask right so you can have a very regular form like i do in my personal website but if you want to have a better experience for your clients for your services for whatever form it is that you're building i recommend using something like type form now one of the benefits of typeform is that you can actually send it as a single link like you would have a google survey back in the day well this is the same thing except way better it's a much nicer design it's a much nicer feeling and one of the pluses is that they're from barcelona so that always sits well with me so i recommend that you guys check out typeform for that better experience when you fill out a form one of the current downfalls of webflow is that it doesn't have a native member login or a member payment system and what member stack does is it allows you to have this functionality here it's almost like a login get started sign up kind of functionality well that's what member stack is now without member stack i wouldn't be able to have a website without a login functionality so until webflow decides to put their boots on and actually build this and release it member stack is going to be the king in this world and i recommend that you guys get started with member stack until webflow decides to come out with their own thing now even if i didn't have webflow member stack is what i would use if i was building a membership site just because of how easy it is that they've made it to be able to create this functionality on websites and no code websites this is pretty much a godsend and i can't recommend it enough now within building no code apps there's a couple important things that that you need to have number one it's going to be obviously your website your your builder and number two is going to be a database right so you need to have a database that you can load all of your information whether it's going to be prices of houses or prices of cars or whatever it is that you want to build you need to be hosting that information somewhere right so airtable is the place to go for this airtable is the king in this game and it is the best database to use now number one it's free so you can get started for free without having to pay anything and you can connect your airtable table directly to webflow directly to wherever you want to connect it to without even using another software so you can connect directly to webflow using airtable with i mean it's a simple plugin but you can do it directly within the actual software so there's no third-party elements involved and we'll get into that in the next step but airtable is the best place to get started with creating a database and being able to organize that database inside of webflow whether it's by shoe size by car size by tire size or whatever thing you want to organize it by airtable is the way to go if you want to start with a database and again similar to all the previous examples i can't recommend it enough now i just briefly talked about using a third-party software to connect airtable with webflow or whatever app you want to use and the two most common players in this game is going to be zapier and make previously integromat now we'll get into the integromat secondly but zapier is the easiest way that you can start connecting databases to a web app so to explain zapier in a nutshell it's an automation tool so if you want to have for example a automation where a client signs up for a premium package okay well then when that happens send them an email and then if they reply to the email then send them another email and another email and then a form or something like that well then you can do exactly that just by using zapier so you have an automation machine that can figure out a lot of the problems for you and this will speed up your build process a lot this will free up your time a lot if you have a lot of clients coming in or if you have a lot of of tasks that you have well then this can clear up a lot of your time that you would be spending on pretty nuanced stuff and you can go on the zapier site to get some more examples like here when i'm assigned a new task add it to my to-do list and then remind me the next day that's just a very simple example that zapier has here but there's a lot that you can do with zapier there's so much that you can use you can use pretty much every single productivity software whether it's webflow or google drive gmail trello slack and here they have an example here but you can pretty much use zapier to automate almost anything and the way it works is that you can connect it to webflow and another product and they will essentially talk to each other so zapier is one of the best parts of the no code system because you can automate a lot of things and make.com or previously integromat does the same thing in a different system now i previously like to use zapier more just because that's what i'm most familiar with but a lot of people also use make and i don't see anything wrong with it i know that it's more advanced there's a lot more things that you need to understand about the platform about the way it works but i recommend that you start with zapier first and if you want to get into more advanced systems then you get into make or integromat now that is pretty much all the apps that you need in order to get started with no code so just to summarize we've got the design softwares like figma we've got the web builders like webflow we've got the integrations like f and suite and type 4 and airtable zapier all of that and then we have some real life examples so what i'm going to show now are some examples that have been built using these systems so using either web flow wix whatever it is using some sort of integration with airtable or zapier and then being able to connect the two so this is some of the real life examples that you can build using all these integrations that you wouldn't be able to do simply with a web flow or a wix or whatever you need to be able to connect those those apps so number one is makerpad and makerpad is a great website to get inspiration on no code apps and makerpad itself is a library of no code applications and how you can actually do it with tutorials and stories and blog posts like here using bubble to build a digital greeting card service so they kind of explain how you can build a lot of these apps but one thing to note is that makerpad itself is a zapier product so zapier itself built this no code library using no code tools so i think that's a great way to actually show off what you can do just by building this this system so we have different tutorials here we can filter by different things whether it's guides or blog posts we can type what we want to see here we can sort by by name by oldest we can clear filters so all this we could do using the systems that i previously just explained so the way that i would build this would be we design and build or whatever on webflow we added these filters using f and suite and we host all this database using airtable so with those three things if if i'm correct so we've got webflow we've got fn suite and airtable those three things we can build an entire app and also we need member stack in this case to have a sign in sign up and also be able to charge our members a fee for using it but that's how i would build this particular thing and that sort of thinking builds the next two as well so the next one is dwelido.com now these are houses or pre-built houses that you can buy for a certain fee and they're all over the world and this is a just a great site in terms of design i'm pretty sure i've showcased it before on the channel but this is the same thing it's a website that uses a database using airtable or whatever it is and it connects the two and there is no signups here there is no no logins but that's essentially how they did it and how how the idea works now lastly is an example built by an actual fellow youtuber so this is unicornfactory.new zealand and this is essentially a freelancer marketplace like if you can imagine an upwork or a fiverr but for great designers in new zealand or great freelancers in a specific area now he's got videos explaining exactly how he's built unicorn factory and what the tools that he used are so i'll leave a link to his channel down down in the description so you guys can actually see that but this is a website using the same systems so we've got a web builder we've got something to host the database and then we've got something to communicate between the database and the web builder so that in a nutshell is what you need to build and to get started with a no code web app if you guys enjoyed this video then please do let me know down in the comments because then i'll also obviously be able to know if you guys want to see more no code videos then also let me know because i don't really do them i only do design but if you want no code then i'll start doing those as well thank you guys so much for watching this video and if you guys enjoyed again leave a like and comment and i'll see you guys on the next one

Channel: Arnau Ros

Views: 121,826

Keywords: no code saas, no code saas builder, no code saas app builder, no code saas ideas, no code saas development, no code tools, best no code tools, best no code, best no code app builder, best no code app builder 2022, best no code website builder, best no code game engine, best no code marketplace builder, best no code website builder 2022, best no code tools 2022, best nocode tools 2022, best no code design 2022, best no code examples, the best no code

Id: cL8bJVPgnDw

Length: 14min 7sec (847 seconds)

Published: Mon May 30 2022