Open SaaS, the Free, Open Source, SaaS Boilerplate with Superpowers

All right, we're live. GM GM, everybody. Welcome to what's going to be another great DevNTell here. So if you don't know, DevNTell is a 30-minute podcast for builders to showcase something they're passionate about or have been working on in Web3 or otherwise. This can be an awesome project you've been working on, demonstrating unit testing best practices, automation goodies, smart contracts, how to structure projects, etc. Basically, if you've got a passion for something, this is your opportunity to share it with the community. And I am happy, happy to have back on, after a long hiatus, Vince, who is actually an OG Developer DAO member lurking, we'll say, but welcome to the show, Vince. Great to have you back on here.

You remind me that I'm an OG. Even though I'm not in the DAO anymore because of... well, I don't want to talk about it, it's embarrassing, but I got my wallet hacked. But I haven't been in the DAO for a while, but you just reminded me that... you know the little emojis like emoji, comma, emoji? That was my idea that got accepted, so I feel very proud of that accomplishment—the brick comma rocket ship, or whatever it is, yeah, I forget.

Excellent, love it. So I guess beyond that, if folks aren't familiar with yourself, do you want to give a brief intro?

Sure. Like a lot of people in Developer DAO know, there's like a big focus on... and Narb and I were just talking about it, a big focus on developer relations. So I'm a career switcher and I got my first DevRel job actually in the Web3 space through Developer DAO, and I'm still in the DevRel space for a full-stack framework called Wasp, which is a lesser-known one but we're growing fast. So if you haven't heard about it, you'll hear about it today because I'll be presenting Open SaaS, and I used Wasp to build it, so, yeah, that's a little bit about me.

Awesome, awesome. And yeah, I've been looking a little bit into Wasp and seeing your posts on Twitter about Open SaaS, and that's kind of how it piqued my interest. I was like, I'm waiting for Vince to finish this out to get it to a point where he's ready to share, and I'm going to reach out, and low and behold, we are here today. But yeah, I guess do you want to get right into the content?

Yeah, sure, for sure. Okay, so thank you Narb for the invitation and the introduction and everything. Open SaaS is... it's nothing special and it is special at the same time because you guys have probably seen there's like a million paid SaaS boilerplate starters out there these days, and I thought it was kind of crazy. People on my team were talking about it, how they're selling these things for anywhere from $300 to $1,000 depending on which one you buy, and there are a million of them all over the place, and it's just a boilerplate starter. So why don't we create our own and open source it? And that's exactly what we did, and it's pretty cool. It's gone over way better than we expected. As you can see here, we've got at the moment over 3,500 stars, which is, yeah, it's been fun to see that grow so far.

And what can I say about it? It's a SaaS boilerplate starter for React and Node.js that leverages Wasp as the full-stack framework, and that's the reason why it has superpowers. Wasp is essentially a DSL, so it's got a config file and a compiler, and Wasp is able to generate and maintain the boilerplate for you that you would normally have to code yourself, like authentication, for example. One of those annoying things, like you've done it a million times, but it's a ton of boilerplate. Well, Wasp through its compiler can actually do that for you in an opinionated way. But yeah, before I get too much into Wasp itself, let's talk about Open SaaS. The features... I made a very cool promo video, which you guys should take the time to watch, I had fun making that. The great draw of Open SaaS is that it is as open source as we can possibly make it. We try to focus on other open source tools. Wasp is open source, we went with... you can choose Google Analytics or you can go with an open source alternative like Plausible. So, at the core is kind of an open source philosophy.

Like I said, we've got DIY auth, so you don't have to use any third-party providers like Clerk or Auth0, which can be really costly. You own your auth, which is great. Full-stack type safety, we'll get into that. There's Stripe integration, but in the future plans are Bitcoin and crypto payments. We've got a full admin dashboard that's pulling all your analytics from Plausible and revenue statistics and things like that, email sending, we've got some demo apps with OpenAI function calling, file uploads with AWS (pre-signed URLs are already set up in there as examples so you don't have to do all the configuration from scratch). Wasp builds to a React and Node app, so you can deploy it anywhere easily. You're not locked in and paying crazy fees for hosting providers; you choose the hosting provider you want. An optional blog with Astro, and I went ahead and documented everything as well as I could. So, those are the features.

And yeah, let me see, I wrote down here a little game plan. We would do a short demo first, so why don't we do that? We just talked about the features. Here we have... I'll just log out. Here we have login, and it's loaded with Google, GitHub, and email/password. Here is the AI demo app. So, it's using OpenAI function calling, which is a really cool feature so that you're able to return JSON in the format that you want, so you always get a consistent answer. So I created this scheduler, right? I wrote something stupid here, but you add a few tasks, give it the hours that you're going to work on for those tasks (maybe three hours for one, one and a half for another) and how many hours during that day you're going to work, and you click generate, and it will generate a kind of plan and break down each of those tasks into subtasks for you. So it's like, not a crazy example that you might want to build a SaaS around, but it's just going to get you started, maybe spark some ideas for how you can use function calling and the OpenAI API to build a SaaS app.

So let's try that in action and see how good it actually is at the moment. Let's put 'Learn Wasp' on there, let's put 'Watch DevNTell video', and 'Write a blog post about DevNTell and Wasp', and those are pretty good. We'll do one and a half for that one, we'll do two for that one, we'll say that's going to take us five hours. We'll generate. At the moment I've got it set up using GPT-3.5, so it's probably not the best, but there you go, it sent back... puts it in priority for you, breaks them down, and gives you a nice little to-do list so you can be organized and stuff. All the code is there, it's yours to check out, change, delete, whatever you want to do with it. Same with file upload, it's just showing you how to use AWS S3 with pre-signed URLs. You've got Stripe hooked up at the moment with webhooks and everything. You basically just put in your product IDs and you're good to go. And then, full-on documentation. So, everything like Stripe integration, how to do it all, walk you through everything step by step. And another nice feature is the admin dashboard, which is actually hooked up to analytics at the moment and hooked up to the Stripe test products so when people check out and stuff... so like, this is all the people trying out Open SaaS, the deployed version, and we see that we've had 280 people make payments with the fake test products, so we've gotten a sweet revenue of almost 12 grand here. And then you can also see the Plausible analytics like where the site traffic is coming from, mostly coming from Google, GitHub, directly, Medium, and Dev.to, Product Hunt, Reddit. So all this is hooked up, users table, a bunch of components in here that you can use. So yeah, that's like a huge win right there. All you have to do is put in your analytics script and hook up your API keys and client IDs for Stripe, and you get all this information as well.

So yeah, that's pretty much the features of Open SaaS. Beside that, it's open source like I said, so anyone is free to open issues, contribute. We've had a few contributions already, we've got a bunch of issues lined up, we've already knocked a bunch of issues down. Yeah, what more can I say here? I thought maybe next, if you guys got questions or anything, just feel free to leave them in the comments or in the chat. I'll be happy to answer them on the fly. But if not, I will go over the WTFs. So we kind of did that already, what is Open SaaS? And a lot of people kind of are skeptical, like why would you build this and give it away for free? And the first reason I kind of already mentioned was like, we just think it's kind of crazy that there isn't an open source, community-maintained good SaaS boilerplate out there, and all these other ones people are selling for a grand, it's just kind of crazy. And the other reason is, Wasp as a framework we think is like, perfect to build SaaS apps, so this is a great way for us to get people kind of onboarded and using Wasp, of course. And what do we expect from you? Well, if you would like to contribute, like I said, we don't have crypto payments at the moment, but I've been researching some stuff, so I know Developer DAO, you guys are probably way more in tune with this stuff than I am, so even just dropping an issue saying, 'Hey, this would be the best route to go for Web3 payments,' I would really appreciate that. That would be cool, and I can look into doing that, or if you're feeling helpful, helping out would be awesome. So yeah, before I continue Narb, how does that sound so far? Any questions from your side?

No, this looks really, really cool, man. I guess one question for me is... so is it like a one-line kind of command to get your own SaaS up and running? And essentially... and maybe you'll be showing that later on, but is the idea that once you have this thing spun out, you get the dashboard, the OpenAI connectivity, and the Stripe payments all out of the box? Or is there... sweet. And I was going to add, as well as the documentation, I know the docs you showed at the end there were how to configure Stripe and whatnot, but essentially, are those the ongoing docs that the user can configure to be their own set of docs for their SaaS?

Right, the like... the thing is, the docs that it comes with, it also has like a template version. Like, everything you see on the deployed version of Open SaaS is what you would get when you clone the template or fork the template. So, yeah, your SaaS can have those docs, and you can configure them however you want and change them however you want. And with that also comes a blog as well and stuff. So yeah, everything I just showed you is what you're getting as well when you get the template.

And there are two cool ways to get the template. So, GitHub has this nice 'use this template' feature where you can just... you'll get a clean version with one initial commit of the current version of it, which is nice. And the thing that makes Wasp really cool is that like, if you start a new Wasp app via doing something like 'wasp new' command, you'll actually... you can enter your project, you say 'SaaS', and you'll get this list of cool templates that you can use. And you can see here, we've got 'SaaS', and 'SaaS' gives you the most current version of Open SaaS. So you see right there, you can check out Open SaaS. So those are the two ways you can pull the project, the template, and get it. Yeah. So since we're talking about... since we're in the editor here, why don't I show you a little bit of what gives Open SaaS superpowers, how Wasp is like connected in all of this, and what that's all about.

So for example, I'll just go ahead quickly, first thing, and show you what is your command center when you use Wasp as a framework, and it's the `main.wasp` file. So we have this like JSON-like syntax, and it's just a simple config file where you're saying, 'This is my app, here's the title, here is just some scripts in the head, like we've got OG tags and stuff like that, and your analytics script might be in there, for example.' And this is the kind of auth I want. This is like a really powerful... this is where Wasp really shows its power, and this is why I say it's a SaaS template with superpowers. So you just define this object like: `auth`, what's my user entity in the database? It's `User`. What methods do I want? Right now we've got username and password. So let's go ahead and start up the app. And Wasp gives you a really great way to start a dev Postgres instance, right? You've got Docker started already, Docker running in the background on your machine, and you just write `wasp db start`, and it'll start a Postgres instance for you that you can connect to. In a different terminal, we can write `wasp start`, and this is going to start our app. And remember, you've got a Node app and a React app on the client. So with that, we've got the template, Open SaaS template, running with a local development Postgres instance, which is really sick because you don't know how many times like, 'Oh, what is it again to start a clean Postgres instance, all that stuff?' And you can just Ctrl+C, start it and stop it like this, which I really love, that's such a time saver. So right, we said we've got auth with username and password, right? So we go to login, very simple username and password, you can sign up and all that stuff. But let's say we want to give it the good old Google OAuth because, you know, we all love Google. So we put that, the app will recompile, and then we should see... if it happens correctly... let me make sure the app is running, and it is. All right, there we go. So when it recompiled, we get Google right away. And because I have in my environment variables, I have the Google client ID and stuff like that and the secret, I can go ahead and I should be able to log in right away with Google. But I'm not. Maybe restart? But basically, of course, something has to go wrong when you're presenting, right? But basically, what I can show is that when Wasp does the compilation in the background, it's giving you access to... it's generating a component for you, which is the login form here. So we just import the login form, and we put it on our page there, and when we change the auth methods that we want—we say we want Google or we want GitHub—then it will automatically regenerate that login form right here, and then spit that out, and that's why we can see the changes on the fly there. And I can log in with Google. So, that shows you kind of quickly in a nutshell how having an abstraction layer, this config file as an abstraction layer on top of your full-stack app, can make things really simple, can simplify a lot of things for you.

So, the cool thing about that is that it's not just limited to auth, right? We've got like a bunch of things we can do. We've got, for example, you can write the operations or your back-end functions without having to configure your entire server. So, what that looks like is pretty simple. We've got like a queries file here, and we've got, for example, I've created this 'get all tasks by user' function for the AI demo. And that's just, you know, it's a pretty simple CRUD function. It's taking all the tasks via Prisma. It's just saying return all the tasks for this user, right? And by writing that and typing it in a file, and then giving... defining it as a query, and we tell it where it is, now this gives Wasp the ability to create the server for us, inject that function, and also make it available to us on the front-end, right? So, with that, because we've defined the 'get all tasks by user' function in the `main.wasp` file, we can go to our demo app page, and we can import it here—Wasp gives it to us, we can import 'get all tasks by user'—then if you use React Query, this will look familiar because this is React Query, we use query, and then we get the tasks, the type's inferred correctly on the front-end. And so we didn't have to do anything—we didn't have to set up tRPC, we didn't have to set up and configure our Express server, for example. We just gave the function to Wasp via the Wasp file, and then we can import it on the front-end with type inference and everything else, which is awesome because it's typed in the back-end. So, that's another huge time saver there of Wasp.

And let's see... you have the same thing with cron jobs. We can just define a function, and we can tell Wasp, for example, that we want to run that 'calculate daily stats' job, which is the function that's running the admin dashboard—that's pushing the stats to the admin dashboard, basically. This runs every hour. So it's just a function that gets and parses a bunch of the data from Stripe and from my Plausible analytics, and it puts it all together in some nice objects, saves them to the database, and then makes it available on the admin dashboard. So, this is all you need. We're configuring PG Boss in the background in Wasp for you; all you have to do is give any asynchronous function to this job definition here and with the correct cron schedule, and it'll run automatically for you because we're using a Postgres database, right? So it will run via PG Boss, which is a job scheduler for Postgres. So, another cool thing, really nice, right? I just write the function, I just tell it what to return, and I don't have to worry about configuring the job and stuff like that. So, makes your life a lot easier when you're building a SaaS because you don't have to depend on some third-party cron service or something like that as well. I really like that, it's one of my favorite features. Let's see, where's our scheduling here? Oh, another cool little experimental feature that we've got that I really like, that will become more useful in the future but is just nice for now, is Studio. So, because you have this central config file that is like the instructions for your app, we can do some pretty cool stuff with it, and that is show you a schematic of your entire app and how each... here's your job, right? How it runs, what your queries and actions are like, which entities they're connected to in the database, and what kind of auth your app is using, and all this stuff, and spit it out in this nice, cool, fun graphic. But the cool thing about this is that in the future, this will actually enable you to build some new components, edit some components, generate components just through a little visual studio here and some other cool little features like that. So yeah, let me check real quick and see what else. So yeah, and another thing to mention is that in comparison to other frameworks where they claim to be full-stack but they're not really because they're either serverless or they don't really interact with the database, Wasp does and it's truly full-stack and allows you to deploy wherever you want because it builds out to a Node and a React app. And yeah, that's about it for Open SaaS and Wasp. Like I said, the future plans are just to keep improving it. I'm working on some end-to-end tests right now, and hopefully, we can get some Bitcoin and ETH payments in there soon, better SEO, some nice different landing page designs and stuff like that. So yeah, or any other features you guys might want to see, just let us know, drop an issue in the GitHub. You can find it on opensaas.sh or, yeah, it'll take you here, and yeah, that's about it.

That's quite a... quite a bit of a feature set built into one framework, that's actually, like, amazing. Well done. Yeah. And I guess on top of that, a lot of the time a person needs an API key to be able to interact with those types of APIs, is there plans to add API key generation as well?

API key generation to Open SaaS? Yeah, so say you expose a REST API, and then the person needs to authenticate themselves with a client ID and API key. Instead of building that out for themselves, potentially that can be another little component that you can add in here. Yeah, that actually sounds pretty useful for a SaaS, right? That's a cool idea, I want to do that. Please leave an issue, and I will look into that. I think that's actually something I hadn't considered. And yeah, that's the benefit of having this open-source is that we can get cool ideas in and, yeah, deliver that to people so they can get SaaS apps going, make some money. Yeah, that's one of the biggest places I think a lot of people struggle with in creating REST APIs, is they can create the API, but then they're like, 'Oh, now I need to have like an API key and client ID, like how do I manage that?' Having that out of the box would be pretty cool. That's a great idea, yeah, let's do it. I think that sounds like a great idea, I want to do that. Sweet, there you go, you heard it on DevNTell. Yeah, yeah.

And I guess, before we conclude today, what's the best way for folks to reach out to you or anybody on the Wasp team if they have questions or want to start contributing to Open SaaS? Obviously, they can open an issue here, but is there any other forms of communication?

Yeah, Discord for sure. And I think we have our Discord in the documentation right up here. So you can hit up the repo, our Twitter, but we have a questions forum in the Discord and we have a dedicated Open SaaS channel. Oh, and another thing we're thinking about doing is creating a five-day kind of course. So like, build an app with... or I'm thinking of creating a video where it's like build, walk-through of building a SaaS app with Open SaaS. So there will be like a dedicated Discord channel for that, too, anybody who's like going through that course can get help. So we've been answering a lot of questions in Discord, we reply as quickly as we can. So, oh, another cool thing to mention is we've got people using Wasp and Open SaaS in really cool places—in the Port of Barcelona, we've got it being used internally at some big companies for internal tools, and we've got a bunch of people who have built stuff with Open SaaS and sold, like had little micro-SaaS acquired for a few grand and things like that. So yeah, it's being used in production, being used in enterprise scenarios down to indie hacker scenarios. So, that doesn't mean it's perfect, still could use... Open SaaS could still use some tweaking and polishing for sure, but I'm working on it every week and people are contributing, so it's only going to get better.

Awesome. I love to hear that. And yeah, any folks that are viewing this DevNTell or part of Developer DAO, if you want to get started with a SaaS, this seems like the most easiest way to get from zero to one. So definitely, you'll want to check that out, and we have all the links to all these resources in the YouTube description below, so definitely check that out after you check out this video. But with that, I just want to thank you so much, Vince, for coming on, really appreciate you taking the time to come on.

Thank you.

And before everybody leaves today, I'd like to present you with the QR code to scan to claim your NFT from being an attendee on DevNTell today. So what you want to do is scan this with your regular QR code scanner, yes, yes, and fill out the form accordingly, and you will be air-dropped an NFT on the Base network within a couple days, and you'll have an hour and a half from now to be able to claim that. So again, get out your regular QR code scanner, scan this bad boy, fill out that form, you'll get air-dropped your NFT for being an attendee today.

And to sign us off, I want to wish everybody a very happy Friday, happy weekend wherever you may be. If you're in ETH Denver, enjoy the festivities there, and we will catch you back here next week for another great episode of DevNTell. All right, y'all. Cheers.