Supabase Tutorial #1 - What is Supabase?

hey gang and welcome to your very first super bass tutorial [Music] sother my friends first things first what is Super Bass well Super Bass is what's known as a back end as a service meaning that it provides a whole host of different back-end services such as a database Cloud functions authentication and storage and then we can just connect to those back-end services from our front-end applications so that all the heavy lifting on the back end is kind of taken care of by Super Bass now if you've ever used Firebase before then it's quite similar to how that works and in fact Super Bass markets itself as a Firebase alternative but there are a few major differences between the two services the first one is that super bass uses a SQL database called postgres so it deals in rows and columns not documents like a nosql database such as the one used by firebasewood and the functions that the Super Bass client Library provides us with to interact with the database reflects SQL terminology so if you've used SQL before then those function names are going to sit very nicely with you if you've not then don't worry they're still very self-explanatory the second big difference between Super Bass and Firebase is that super bass only uses open source Technologies and it just connects them all together to provide a full back-end experience if you like so because it's all open source we could just take this package and dive into the code deploy it where we want and basically have full autonomy but Firebase is an open source so we don't get that option with that service and instead we're experiencing something called vendor lock-in so super bass has that extra advantage over Firebase if you need that extra control now I don't want to turn this into a video about Super Bass versus Firebase and compare the two too much um and I don't want to discuss which one's better than the other because honestly I think both of them are really good and they both have their own places in web dev it's down to you as a developer which one you prefer working with and which one works better with your application and it might be that you don't want to work with any of these and you prefer working with other tools instead it's all very dependent on what's best for you and your projects so in this series we'll be diving into how Super Bass works and how to connect to it from a front-end application in particular we'll be looking at the database and building a simple crud application that interacts with that database so that users can create read update and delete data to and from it and then in the future I will be making more advanced courses about how to use other features such as authentication and functions so this series is very much your introduction to Super Bass and how to get up and running with a database so for the front end in this course I'll be using react but you don't really need to know much about react to follow along with the Super Bass stuff so if you're not a react developer and you just want to learn about Super Bass then you can still work through this series and all of the Super Bass codes you can pretty much just carbon copy into whatever front end that you're using so definitely don't feel like you need to know about react to carry on and learn about Super Bass it's going to be a relatively short course and it's going to teach you all the basics pretty quickly so you can pick it up and run with it no matter what front-end libraries you're using and in the end we'll end up with a simple project like this super smoothies and this is reading data from the Super Bass database right here to Output all these individual smoothies and then we can edit those smoothies if we wanted to and we'll see that update right after we've made it we can also delete smoothies by clicking the trash icon and we can add new smoothies by using this form right here as well so this is the project that we're going to be building throughout this playlist and it's going to teach you all the fundamentals that you'll need to make a simple crud application now to begin with to save us boilerplating a whole new react site and making components for all of the different pages I've already prepped a starter react project and you can find it on the course files repo for this series the link to this page is going to be down below the video now to get the starter project make sure you select the starter project Branch from the branch drop down then hit the green code button and download a zip folder of the project incidentally if you want to access the course files for any lesson in this series then all you need to do is Select that particular lesson from the branch drop down over here and then hit the green code button again to download a zip folder of that lesson so once you do download a zip folder whether it be the starter project or a different lesson you'll need to install all the project dependencies for it to work using npm install so let's do that now for the starter project we just downloaded so I've unzipped that project folder and I've renamed it to Super smoothies as well so what I'm going to do is right click that and open it up with vs code and then this is our starter project right here the first thing we want to do though is we want to install all the project dependencies listed in package.json so let's open up a terminal new terminal and then to do this we say npm install and you need to make sure you have node.js installed on your computer already in order to do this because when node is installed npm comes along for the ride as well so let's do npm install to install all those dependencies okay so now those dependencies are all installed what I'd like to do is quickly run through the different files and folders in this starter project just to give you a quick bird's eye view of what's going on and then we can preview it in a browser so like all react projects we have our public folder and a source folder now the public folder has inside it the index.html file this is where eventually all the react component content is dumped and also in here we have a link to the Google fonts library because we're going to use a Google font later now that's the only thing we need to worry about inside the public folder inside the source we have a folder called pages and these are all the different page components I'll come to those in a second we also have the root component app.js and inside that we import these things from react router Dom because we're using the react router so we can have different pages so we import the browser router which wraps the entire application it pretty much needs to do that so that we can use the different components from react router Dom inside the application because we can't use these outside of the browser router inside that we have a nav with an H1 and then a couple of links using the link component to the different pages so I'll link to the home page and I'll link to forward slash create and this link right here is going to forward slash and when we go to forward slash we are going to render if we take a look down here this route which is the home component when we go to forward slash create we render the create component as the page and when we go to forward slash ID where this is a wrap parameter so it could change it could be one two three or 357 whatever the ID is we're going to render this component right here the update page all right so they're all our routes we have links in the navbar as well now then let me show you these pages so the home page itself is just a div with the class name of page all of the different pages are going to have this class so they can be styled the same way and also an individual one this one's called home and down here we just have an H2 so that's the template dead simple for the home page and the other pages are pretty much the same to begin with we have page and create for the classes H2 that says create for the content and then update very similar okay so they're the different pages pretty blank to begin with but we have all those set up with the different routes now so that it's all working all right we also have the index.js file which kick-starts the application and inside here we import the index.css file so that's this thing right here and we have some very basic styles for the application first of all we import a Google font and that font is pop-ins and then down here we declare some CSS variables the primary color and the secondary color we reset the margin on H1 H2 and H3 to set it to zero we have some stats for the body to strip out the margin give it a text color font family and a background color for the nav we give it the background color of the primary color up here this variable and then give it some padding and text align to the center every anchor tag inside that is colored very light gray a bit of margin and display inline block so they sit next to each other and then the H1 is white page classes which remember is for every page we give a Max width of 1200 pixels and then 20 pixels top and bottom for the margin Auto left and right and a padding of 20 pixels as well all the way around so that's a brief tour of the starter Project dead dead simple what I'd like to do now is preview this in a browser so to do that we're going to type npm start when we do that react is going to spin up a local Dev server so that we can preview this on localhost so now if you go to this address in the browser you should be able to see this project and here it is okay so we have the home page and you can see the homepage concept right here also up in the nav we have these links if we click on that it doesn't change because we're already on the home page I can go to this link right here and it should go to forward slash create which it does and we see create over here and if we go to something else like one two three remember that was the forward slash ID parameter and if we hit enter we should go to the update page which we do okay awesome so this is all working so that's the starter project up and running next I'm going to show you how to create a new Super Bass project and connect to that from our front end by the way if you want to watch this entire course now without YouTube adverts you can do it's all up on the net ninja website netninja.dev you can buy the course for two dollars to get instant access to all of it or you can sign up to net Ninja Pro and get instant access to all of my courses without adverts as well as premium courses not found on YouTube including my udemy ones that's nine dollars a month and you can get your first month's half price when you use this promo code right here so I'm going to leave this link Down Below in the video description for you to sign up and I really hope you enjoy this series and please do not forget to share subscribe and like the videos that really helps a lot and I'm going to see you in the very next lesson

Channel: Net Ninja

Views: 84,013

Keywords: supabase, supabase tutorial, supabase crash course, tutorial, supa base, supabase vs firebase, react supabase, react supabase tutorial, supabase database, supabase postgres, postgres, supabase setup, install supabase, supabase client library, javascript supabase

Id: ydz7Dj5QHKY

Length: 10min 27sec (627 seconds)

Published: Wed Aug 31 2022