 Hello everyone, I'm Thor. Thanks very much for having me. Let me share my screen. We tested that this works. So this is me. All my sort of branding is around Thor web dev. So generally if you search for Thor web dev or put it on Twitter or anywhere, can you see my screen? Yes. Brilliant. Yeah, actually a little nugget here if you, you know, the preview, the GitHub profile read me thing. I found out that you can actually write HTML and CSS within SVG. I don't know if people knew this, but you can specify a foreign object within your SVG, and then you can actually write style and HTML. So like this whole animation is like a CSS animation written within an SVG. I thought that's pretty cool anyway. Yeah, so you can find me on GitHub on Twitter as well. I'm trying to get to the point where I have more followers that than people I'm following. So if you can help me make that happen. Thank you. But today we want to talk about SuperBase. So SuperBase is actually a Singapore based startup. It's backed by White Combinator. It was part of the summer batch. So they just completed the demo day. And yeah, they've recently been, you know, basically launched on kind of hack and use sort of unintentionally someone launched them and people have really enjoyed working with SuperBase and me as well. And it is kind of the open source fire base alternative. So what that means is sort of based around Postgres, which, you know, is an open source database that has, you know, decades of, you know, proving itself. So it's a very, very beloved and tested and battle tested database. And then building on top of that, we can actually see that here. If we jump into the repository. So this is kind of the sort of the SuperBase stack you can call it. And this is sort of how the hosted platform for SuperBase is currently set up. So at its heart is the Postgres database. Then we're utilizing go through for authentication Postgres for kind of automatically spinning up an API for your Postgres database. Real time is sort of a real time engine written in Elixir. Yeah, so an Elixir server that kind of listens to the Postgres changes. And then with the JavaScript client facilitates kind of the real time listening by WebSockets. And then PG API is kind of a restful API for managing Postgres. And so it really is, you know, a stack of open source. There's then Kong, which kind of is I guess the sort of the traffic API platform. But so the cool thing is we have a couple examples here. And so one example is the slack loan, which is pretty neat. And what I'm just going to do kind of in the next couple of minutes is sort of, you know, set up our own slack loan. And if you want to, you can, you can follow along or, you know, if you have two screens, you're welcome to do that. Otherwise, I think there will be a recording as well. So if you go to the alpha sign up, it's just app.superbase.io. You can sign up with your GitHub account. I'm already signed in here. And I've created a project called Talk.js. And what you get is, you know, just kind of a Postgres database that's set up for you. And you can see that at the moment there are no tables yet. So we kind of need to create our table schema. And so we actually have a couple of quick starts here where there's the slack loan quick start. And this is just, you know, Postgres SQL. So you can interact kind of with SQL with your Postgres database here. And so what we're doing is we kind of have an enum here, online offline status of the user. We have a table for our users. We have a table with the channel. So that's kind of the slack channels and then a table with the messages and sort of we defining the relationships here, where the references. So if you're familiar with SQL, you'll likely know what's going on. And then what's pretty cool here is that you can use a Postgres role level security policies to secure your data. And use that with the authentication piece. And so this makes sure that, you know, only if the user is locked in. So we have kind of this allow locked in read access policy. So only locked in users are actually able to see the messages to slack channels and you can think of this, you know, similar to like the Firebase security rules. It's just kind of powered natively by the Postgres security policies. And then we're just inserting some dummy data here. So let's actually run this to kind of seed our slack loan. So that was now successful. And also what happens in the background is that we now have our database tables set up here and we can actually go to the auto generated documentation. So we can see that here we have. Sorry, I think we've got some noise here, but so we have so Postgres auto generates kind of this swagger schema and then from the swagger schema, we can generate auto generate kind of the documentation here. So we can see we have the tables. We have our channels, our messages, our users, and we can then here see kind of the read. So that's, that's how we read. We basically say, okay, from the super, you know, using the super base client from the user table select star. So if you're familiar with with kind of sequel sort of translates fairly easily. And you can use kind of the filters here. You know, similar to how you use them with Postgres. So now that we have this spun up, we actually have. So if we wanted to, we could. No, I think it's in the API. So we could actually directly connect with our sequel with our Postgres database if we wanted to do that. But, you know, generally what we do is we'd use the API here so we have an anonymous key. So that's kind of our public key that we can use on the client and then we have the service role which is sort of our secret key. So the service role can actually access all the data by sort of going beyond the policy so not overwriting the policies but you know, not so is able to read the data without sort of authentication login. So this is sort of your your secret key. So the service role you'd only use on the server side in a secure environment, but then the and on key kind of the public anonymous key we can use on the client side and then that is powered by the security rules. And so what we can do now is just set up our, you know, basically static front end. So this is just written in kind of next JS. And so we can actually run it on code sandbox. If you're familiar with code sandbox, it's a tool I really enjoy for kind of prototyping or you know sharing examples with the community. I think it also supports felt and kind of all the different frameworks actually the code sandbox guys they've, they've bought a couple domains so like if you type react dot new, it actually opens a new react sandbox, which is pretty cool. You can do some nice prototyping. But what you can do as well as you can basically import kind of any project from GitHub into code sandbox. So that's what we're doing here. The source, you know, is on GitHub. You know, this examples here slack loan. And so as changes are being made to the slack loan, they will be reflected in the code sandbox as well. So that that is really cool. And what we can do now is we can just fork fork this example. So now we have our own fork here and you can see that we have some unset secrets. So we want to open the server tab. And we can see that we need our public super base key and our super base URL. So here, let's get our super base URL copied over. So it's here at the secret. And then here we need the so it's a next public. If you're familiar with next JS, then next next underscore public is the prefects prefix. That sort of makes the environment variable available on the client side. So we have that secret as well. And then our sandbox is restarting. So let's see if this works now. And let me copy this and try to find the chat window. Where are you, chat, chat, chat, more chat. Okay, fingers crossed that we're how we're doing our compiling. Okay, let's see. And so what we can do now is we can sign up. So I'm just for a test stock. And it would be awesome if you grab this from the chat and sign yourself up as well. So just put in your email password hit sign up. And let's not save that. And let's create a new channel maybe just say talk JS. And so if you're in there in the new channel. Let's maybe do a wave. Okay, anyone here. So what do you should, yeah, nice. See that this is all happening in real time. So you could now open this across different browsers. Actually, you know, let's do that. And I guess you all get the point that it's, that it's happening in real time. So I'm now here in a new browser session. So I'm not locked in. Let's do a new tester sign up. And so now, if I do, yeah, so I guess you get the idea. So that is then happening wire, the real time sort of API. So if you're if you're interested. So for example, you can see here, kind of the log in sign up just takes a username and a password. Like from sort of a developer experience point of view, it is actually, you know, really sort of neat. And we're, yeah, we're kind of working on different versions as well. I've made some kind of open source contributions for like TypeScript type definitions, which was really fun. And you can actually generate your types from the database with Swagger. So, you know, the same way that kind of your API documentation is generated. You can do the same and kind of pull down the types into like type definition so you can use them in your typescrowed project. You can also hear is kind of sort of similar to kind of an air table sort of experience you can select your different databases. And you could kind of add new databases or new sort of columns and rows as well. If you wanted to. And then also you can have you have the authentication, or maybe sorry, I shouldn't show everyone's email addresses, I do apologize. But yeah, you can so you can look at kind of all the users that were created there. Cool. Yeah, that was kind of the quick, quick demo. Another cool thing. So if you do. Yeah, if you want to, you know, kind of help help the guys out maybe give them a star that'd be pretty cool. Most of the team is is here in Singapore. If you'd love to get involved, you know, feel free to, like, let me know on Twitter or, you know, just kind of jump into the GitHub here. We actually have for Hectoberfest we've created a little project board here. And we kind of created some some issues and sort of task ideas. If you're not familiar with Hectoberfest, it's, you know, kind of throughout the month of October. If you contribute to open source projects that have sort of the Hectoberfest label and I think you have to, you know, contribute to like for issues with the Hectoberfest label then you can get a free Hectoberfest T-shirt, which is pretty cool. So we actually, we have a blog post kind of explaining explaining all of that. So yeah, that's sort of a little bit my open source community contributions here. And yeah, we actually have some events as well. So if you're around for that. So this is actually on Friday. So it's Singapore friendly time, which is not a cool thing with, you know, the team being based in Singapore, it's really nice. So there's a GitHub open source Friday live stream and then we have our super base Hectoberfest online meetup which we're running on YouTube on Friday, I believe that is next week. Also Singapore time, you know, grab a coffee, come join us and you know, we'd love for you to contribute if you if you want to. And I think that is all from me at this point. Sorry, it was at the end a lot of different plugs. So maybe we can go over to Q&A. Awesome. So does anyone have any questions? I can start. Pretty, pretty cool for been playing with Firebase and a few limitations right like the fire stores have been able to do this QL that sounds promising. So I had a question I'm just curious maybe out of ignorance which is why, why like a Postgres as in, I was thinking if I was to think out of the blue like I was thinking you have like a pop sub and, and I don't know how you keep it in memory so that is real time where it goes into this. Do you have insights on on the architecture? That's a good question. No, so I, I definitely came in when these choices were already made. I think sort of the original motivation was that, you know, Postgres is kind of if you look to sort of the enterprise world. It's actually a very, you know, scalable, very like true and tested database that, you know, has decades of sort of development behind it. And there is a big fan base for Postgres as well. And so I think for the founders, it was just they've used Postgres in previous projects, but sort of wanted to bring kind of the Firebase experience to Postgres to, you know, give you a sort of an easy start but then also kind of the piece of mind that, you know, it is powered by sort of this very scalable database that you, you know, could potentially eject at any point and sort of take anywhere else or, you know, kind of built kind of other projects on top and I think it was also kind of the open source ecosystem that already existed around Postgres. And sort of really the idea is kind of using open source and building, building on top of that. But yeah, it's a good question whether, I mean, there are certain projects, you know, like, I don't know if you heard of Prisma, Prisma.io, which is kind of a similar, not a similar idea, it's more sort of the, you know, trying to replace the ORM layer basically, sort of giving type safety and like kind of database agnostic sort of generating clients and stuff. And sort of more, Prisma is more focused on, you know, kind of the type safety and sort of more the ORM side of things, whereas I think SuperBase is more kind of focused on at least at the moment sort of embracing the Postgres ecosystem and sort of bringing kind of the client side, almost the Jamstack, you know, front-end developers, giving them sort of a robust backend tooling without necessarily needing kind of the backend knowledge. Just, sorry, I have to go, but I'm going to jump the queue and maybe that's the last question. It's going to be a quick one. Just, do you know if they have like a Python SDK or you have to just go to REST and circuits? No, so there is actually the community is currently building a good amount of Python stuff. So if you go to the SuperBase, to do SuperBase org on GitHub, there is actually SuperBase Python client being built. Yeah. Thanks so much. Cool. Yeah, no worries. Any other questions? Do you have any other questions? Please unmute your mic. I think there also will eventually be swag, so that should be, should be pretty cool if you're, you know, contribute for swag. Maybe you know this from the Gatsby, where the Gatsby swag store you can actually log in with your GitHub and then it sees if you have made contributions to Gatsby and you can get like free swag. So that would be cool to build. How do you get involved with SuperBase? How do you get involved? Yeah, I think you just go, you just go. I mean you. Oh, me personally? Yes. Right. Yeah. So a colleague of mine is a former colleague of one of the founders. So we actually met kind of earlier this year when the stripe office was still open. They were in for lunch and which is kind of mesh and yeah, since they had a kind of the off feature, it's been really, you know, I sort of really got excited about it and also that the team is based in Singapore and you know, contributing to open source. It really kind of helped me a little bit through the whole COVID stuff, you know, sort of having more local folks and, you know, it's exciting to have local startups. Yeah, definitely. Get a couple of questions in the chat. What is the pricing model? So at the moment, it is completely free. But yeah, I guess eventually there will be a pricing model. I guess that is generally the problem with startups, you know, you need to need to figure out pricing. So yeah, no pricing model yet. I believe, you know, for the hosted solution, it will be some sort of sauce, you know, either kind of monthly or sort of resource based billing. And, you know, for, yeah, kind of other pricing models, it's a good question, you know, feel free to get involved and make recommendations for pricing if you have thoughts. And it's their PHP support. It's a good question. There is, there has been a lot of requests. So there's actually an issue, I believe it's issue number five. It's frightening that I know that but it's like Mambo number five. So issue number five. And there you can vote for for your favorite client. So Dart is actually pretty, pretty high in the running. I think Python as well, Ruby. Yeah, Dart for Flutter, right? Yeah, that's true. That's the PHP. I thought someone was working on, maybe I'm lying. Let's see PHP. Okay, no, it doesn't doesn't look like anyone has. So yeah, if you're familiar with PHP, maybe that's something you might want to oh PHP is there. Oh, okay. Do you have a link? Where did you find PHP? That's cool. Okay, so it looks like PHP is there. There's a question from Paul. What's, oh yeah, yeah, PHP is in the discussion as a request. It's just not yet. It's not yet there as an actual client library. Yeah, okay. We usually needed to contribute categories of issues. Yeah. It's a good question. We sort of try to, if you go to the project board, maybe I can share my screen again. So there's kind of, there's a couple of projects is like the open source community. There's not too many of those, but then for the Hacktoberfest, so there's a variety of different kind of categories. And yeah, I think we need to figure out the smaller, doesn't look like we've got smaller engineering tasks. But so yeah, there's certain ways, you know, kind of like a migration sort of script for like Firestore or, you know, if you work with Redwood.js or Blitz.js sort of examples are like a nice way to contribute because it's something where you are necessarily joined on other folks, you know, if you don't kind of want to join an existing ongoing thing, then also we have like a couple design tasks. I think we actually have maybe we have a Notion page somewhere we still need to fill in the board. But yeah, I think you can also jump we now have it is in beta, I believe, GitHub discussions. And so you could jump in there and you could open a new discussion and kind of ask a question. And such, yeah, does that answer the question? What skills are usually needed to contribute? Yeah, I mean, I think there should be something kind of for for different skill levels. But yeah, I think kind of at the moment sort of the JavaScript side of things is kind of the largest and I think, for example, writing, writing an example would be a nice nice way to start contributing. Cool. Any other questions? Okay, if you have any other questions, please raise it now. Another question came in. Do you plan to support NoSQL? That is, that is a good question that probably should go on, you know, open that in the discussions that that would be super cool. I don't believe I mean, so Postgres has fairly like nice support for for JSON blobs, so to speak. So you can sort of work NoSQL within SQL, if that makes sense. But in terms of like a real sort of NoSQL database, I think it's not planned at the moment. But if you want to open a discussion around it. Yeah, do you have a specific database in mind? Like, do you mean NoSQL database per se, or more kind of, you know, NoSQL sort of translator, so you don't have to write in SQL, so to speak. Okay, NoSQL database. Yeah. I don't think it's planned at the moment. But yeah, if I'd love for you to open open a discussion and then we can get the team involved and see. Cool. Any other questions? If you're interested in contributing, you can also contact Thor on Twitter. Yeah. So Thor web dev, right? Yeah, correct. It's kind of Thor web dev throughout Leishan. Yeah, what's web dev in Mandarin? I need to go and check. Okay. Oh, thanks. Yeah. Cool. If anyone has any other questions, you can contact them on Lehi Tan on Twitter and also Thor web dev on Twitter. Thanks for joining in today. Mixed Mind will still be happening as well as November. And then for December, we're taking a break for Talk.js. So if you would like to give a talk, please feel free to submit it on the Github issues that I've showed earlier. It's github.com slash Singapore.js So just go in, pop in to the issue of the months that you would like to speak at and we will see you there. Okay, thanks a lot for the talks today. And thanks for all the questions, everyone. It was awesome.