Video details

Building a Slack clone using Supabase | Thor


Thorsten Schaeff

Speaker: @thorwebdev (
"I'm a Developer Advocate at Stripe working with many different technologies on the web to grow the GDP of the internet and enjoy contributing to open source projects where I can."
About the talk: Supabase is a Singapore based, Y Combinator backed startup, building the open source Firebase alternative. Supabase adds realtime and restful APIs to your Postgres database without a single line of code.
This will be a quick demo on how to get started with as your data and authentication backend when building Jamstack apps as well as a quick look at how you can contribute to the Supabase project during Hacktoberfest.
Event Page:
Produced by Engineers.SG Recorded by: Michael


Hello, everyone, I'm Thor. Thanks very much for having me. Hello. Let me share my screen. We tested that this works. So this is me. All my sort of branding is around. Thor wept off. So generally, if you search for Thor wept, therefore put it on Twitter or anywhere. Can you see my screen? Yes. OK, well, brilliant. Yeah, actually, a little little nugget here, if you you know, the preview, the GitHub profile, Rehame thing, I found out that you can actually write e-mail and see us within SFG. I don't know if people knew this, but you can specify a foreign object within your switchy and then you can actually write style and e-mail. So like this whole animation is like a. See this animation written within an CFG. 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 than people I'm following. So if you can help me make that happen. Thank you. But today we want to talk about our super base. So Super Base is actually a Singapore based startup. It's backed by Y Combinator, was part of the summer batch. So they just completed the demo day. And yeah, they've recently been basically launched on kind of hacker news, sort of unintentionally. Someone launched them. And people have really enjoyed working with Super Bass and me as well. And it is kind of the open source firebase alternative. So what that means is sort of based around postgrads, which is an open source database that has 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 super base stack, you can call it. And this is sort of how the host of Platform for Super Bass is currently set up. So at its heart is the progress database. Then we're utilizing gotra for authentication, postgrads for kind of automatically spinning up an API for your postgrads database. Real time is sort of a real time engine written an elixir or is it real to its own Alexa server that kind of listens to the postcrisis changes? And then with JavaScript client facilitates kind of the real time listening via WebSocket and then PJI API is kind of a restful API for managing postcrisis. And so it really is a stack of opensource. There's then khong, which kind of is, I guess the sort of the traffic API platform. But so the cool thing is we have a couple of examples here. And so one example is the slack clone, which is pretty neat. And what I'm just going to do kind of in the next couple of minutes is sort of set up our own clone. And if you want to, you can you can follow along or 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 Apter super based on it so you can sign up with your GitHub account. I'm already signed in here and I've created a project called Talk Jass. And what you get is, you know, just kind of a postscript 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 this Lachlan quick start. And this is just, you know, PostgreSQL so you can interact 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 just like select channels and then a table with the messages and sort of redefining the relationships here with the references. So if you if you're familiar with school, you'll likely know what's going on. And then what's pretty cool here is that you can use a post crest roll level of 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 select channels. And you can think of this similar to like the firebase security rules. It's just kind of powered natively by the PostgreSQL security policies. And then we're. Just inserting some dummy data here, so let's actually run this to kind of seat our selection. 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. Oh, right. Sorry, I think we've got some noise here, but so we have. So PostgreSQL Auto generates kind of this swagga schema. And then from the Swiger 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, OK, from the using the supervisor client from the user table select star. So if you're familiar with what kind of sequel, it sort of translates fairly easily and you can use kind of the filters here, you know, similar to how you use them with PostgreSQL. So now that we have this button up, we actually have. So if we wanted to, we could. Now I think it's in the API so we could actually directly connect with our school, with our Postgres database if we wanted to do that. But generally what we do is we 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 overriding the policy. So, you know, not so is able to read the data without sort of authentication login. So this is sort of your your secret key. And so the service role you'd only use on the server side in a secure environment, but then add 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 Ratton written and kind of next year and so we can actually run it on our code sandbox. If you're familiar with Code Sandbox, it's a tool I really enjoy for kind of prototyping or sharing examples with the community. I think it also supports faults and kind of all the different frameworks. Actually, the code sandbox guys, they've they've bought a couple domain. So like if you type reactant you it actually opens and you react sandbox, which is pretty cool. So you can do some nice prototyping. But what you can do as well as you can basically impart kind of any project from GitHub into Code Sandbox. So that's what we're doing here. The source is on GitHub in this example to Lachlan. 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 for 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 supervisor key and our supervisor out. So here, let's get our supervisor out, copied over. That is here at The Secret, and then here we need the next public, if you're familiar with next year, the next next underscore public is the Prefect's prefix that sort of makes the the environment variable available on the client side. So we enter 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, Jentsch, or. Chat's. OK, fingers crossed that we're. How are we doing our compiling? OK, let's see. And so what we can do now is we can sign up, so I'm just Thor and start and, you know, would be awesome if you grab this from the chat and sign yourselves up as well. So just put in your email password head sign up and. Let's not save that and let's create a new channel, maybe just say talk. And so if you're in there in the new channel, let's maybe do. Wave to. OK, anyone here? So what are you sure? Yeah, nice to 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. I mean, I guess you all get the point that it's. That's happening in real time, so I'm now hearing a new browser session, so I'm not locked in. Let's do. A new testor. Sign up and so now. If I do, you know. Yeah, so I guess you get the idea. So that is then happening via the real time sort of API. So if you're if you're interested. So, for example, you can see here kind of the lock in sign up. It just takes a username and 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 swagga. 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 definitions so you can use them in your typescript project. You can also is kind of sort of similar to kind of an er 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. Oh maybe. Sorry, I should show everyone's email addresses. I do apologize but yeah you can. So you can look at kind of all the uses that were created there. Cool. Yeah, that was kind of the quick, quick demo. Another cool thing. So if you yeah. If you want to, you know, kind of help help the guys out, maybe give them a star, that'd be pretty cool. So, yeah, most of the teamers 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 Oktoberfest. 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 October Fest, it's, you know, kind of throughout the month of October, if you contribute to open source projects that have sort of the October 1st label. And I think you have to, you know, contribute to like four issues with the October 1st label, then you can get a free Oktoberfest 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 Singapore friendly time, which is not a cool thing with the team being based in Singapore, it's really nice. So there's a GitHub open source Friday livestream, and then we have our supervisor October Fest Online Meetup, which are 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. Also. So does anyone have any questions? I can start pretty, pretty cool or been playing with fire bees and a few limitations, I like the fire stories of being able to do this. Cool. That sounds promising. So I had a question. I'm just curious maybe out of ignorance, which is why why? Like Posterous us and I was thinking if I were to think out of the blue, like I was thinking, you have like a pop song then and I don't know how you keep it in memories. So that is real time that it goes. Go to this. Do you have any insights on on the architecture? That's a good question. So I, I definitely came in when these choices were already made. I think so. If the original motivation was that, you know, postgrads is kind of if you look to sort of the enterprise worlds, it's actually a very, you know, scalable, very true and tested data base that has decades of self development behind it. And there is a big fan base for postcrisis as well. And so I think for the founders, it was just they fused Posterous in previous projects, but sort of wanted to bring kind of the firebase experience to Posterous to give you a sort of an easy start, but then also kind of the peace of mind that, you know, it is powered by sort of this very scalable data base that you could potentially eject at any point and sort of take anywhere else or, you know, kind of build kind of other projects on top. And I think it was also kind of the open source ecosystem that already existed around postcrisis 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 Press material, which is kind of a similar not a similar idea. It's more sort of the. You know, trying to replace the the overarm layer, basically sort of giving type safety in like kind of database agnostic sort of generating clients and stuff, so that's sort of more personalized, more focused on, you know, kind of the type safety and sort of more the OEM side of things. Whereas I think superbanks is more kind of focused on, at least at the moment, sort of embracing the postgrads ecosystem and sort of bringing kind of the the clean sites, almost the jam stack, you know, front end developers, giving them sort of a robust back and tooling without necessarily needing kind of the back and knowledge. Makes sense, just sorry I have to go, but I'm going to jump the queue and maybe that's the last question is going to be a quick one. Just do you know if they have, like, a python is the key or you have to just go through rest and sockets? No, sir. There is actually the community is currently building a good amount of python stuff. So if you go to the super base to do super base ark on get up, there is actually super base python client being built. Yeah. Thanks so much to endorse. Any other questions? If anyone has any other questions, please, I'm Mike. I think they also will eventually be swag, so that should be should be pretty cool if you. You know, contribute for swag, maybe you know this from The Gatsby, where The Gatsby swag store, you can actually log in with your getup 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 the public? How do you get involved? Yeah, I think you just go. You just go. And then you owe me personally. Right. Yeah. So a colleague of mine is a former colleague of one of the founders. So we actually met of earlier this year when at the strike office was still open. They were in for lunch and which is kind of mash. And yeah, since they had a kind off our 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 start ups. Yeah, definitely. Get a couple questions and 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 that I guess is generally the problem with start ups, you know, you need to need to figure out pricing. So, yeah, no pricing model. Yes. I believe, you know, for the Holsted solution, it will be some sort of Sarsae, 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 if you have thoughts and it's their 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 clients, a is actually pretty, pretty high in the running and Python as well. Ruby Yadong for Flatirons. Yeah, that's true. You know, it's the I thought someone was working on. Maybe I'm a lying. Let's see BHP, OK? No, it doesn't doesn't look like anyone has. So, yeah, if you're familiar with him, maybe that's something you might want to be, is there? Oh, OK. Do you have a link, where did you find him? That's called. OK, so it looks like it's there. There's a question from Paul. What's. Oh, yeah, he is in the discussion as a request. It's just not yet. It's not yet there as an actual Klein library. Yeah, OK, um, OK, what skills are usually needed to contribute categories of issues? Yeah, that's a good question. We sort of try to if you go to the project board, maybe I can share my screen again. Um. So there's kind of there's a couple of projects like the open source community, um. OK, there's not too many of those, but then for the October 1st, so there's a variety of different kind of categories and. Yeah, I think we need to figure out the smaller. Just look like we've got smaller engineering tasks, but so, yeah, there are certain ways, you know, kind of like a migration sort of script for like fire store or, you know, if you work with radwaste Jessopp let's share sort of examples are like a nice way to contribute because it's something where you aren't necessarily reliant 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 fill in the porch. But yeah, I think you can also jump. We now have it is in Asia, I believe, get up 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. Four different skill levels. But yeah, I think kind of at the moment, sort of the JavaScript side of things is kind of the the largest and I think, for example, writing writing an example would be a nice, nice way to start contributing. A cool. Any other questions? OK, if you have any other questions, please raise it now. Another question came in, how do you plan to support no sequel that is that is a good question that probably. Should go on. You open that in the discussions that will be supercool, I don't believe I mean, so Postcrisis has fairly nice support for it for Jason Blob's, so to speak. So you can sort of work no sequel with an sequel, if that makes sense. But in terms of like a real sort of no sequel database, I think it's not planned at the moment. But if you want to open a discussion around it, do you do you have a specific database in mind? Like, do you mean no sequel database persay or more. Kind of. You know, no sequel's translator, so you don't have to. Right, and sequel, so to speak, OK, no sequel database. Yeah, yeah, I don't think it's planned at the moment, but yeah, 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 so on Twitter. Yeah, there's a tall threat there, right? Yeah, correct, it's kind of Thore wept throughout lation and everything. Yeah. What's swept deaf and. Mandarin. Oh, no, no, I need to go and check. OK, thanks. Yeah, cool. So if anyone has any other questions, you can contact them all the time on Twitter and also Sareb death on Twitter. Thanks for joining in today. Next man who mangoes to be happening as far as November and then four December, taking a break for touchiest. So if you would like to give a talk, please feel free to submit it on the GitHub issues that I've sure earlier. It's called slash Singapore Jets. Slash top. Yes. So just going up in to the issue of the month that you like to speak at, and we will see you there. OK, thanks a lot for the talk today and thanks for all the questions. Everyone is awesome. If anyone.