Supabase in 6 Minutes - Building a Full Stack App with Supabase and React

in this video you'll learn how to create a basic interactive application using supabase and react to get started visit supabase.io and click start your project to open your existing account or create a new account once we've authenticated we'll click new project and choose the default organization given to us here we'll give the project a name and a password and click create new project we'll wait a couple of seconds for the project to be set up before moving on to the next steps once your project has been successfully created click on database in the left-hand menu in the database dashboard click new to create a new table here we'll give the table a name of posts and click save this will create a new table with the primary key of id we can now inspect our new table by opening the table editor here we'll click new column to add a couple of new columns to our table the first column that we'll add is for a post title setting it to a type of text next we'll create a column for the post content and also set it to text now our database is ready to use and we can open our terminal to create our front end application here we'll create a new react application by using npx create react app once the project's created we'll change into the new directory and install at supabase slash supabase-js using either npm or yarn now we can open our project and start writing some code the first thing that we'll need to do is create a client that will interact with the superbase backend for this we'll create a file called client.js in the src folder here we'll import create client from supabase next we'll export a variable called supabase that we'll call create client passing in the superbase app url as well as the superbase public api key we can get the app url and api key in the superbase dashboard by clicking on settings and then api now that our client is set up we can open src app.js i'll first go ahead and remove some of this boilerplate code we'll first import use state and use effect from react to manage the local state as well as handle lifecycle methods next we'll import the supabase client that we created in the previous step the first state variable that we'll create is a post array that will handle the post return from the superbase api we'll also create a singular post variable that will allow us to store the user input as they type in their post title and post content next we'll destructure the title and the content so we can use them more easily in our component next we'll create a function called fetch post that calls supabase.from passing in the table name and then selecting every post from the table when the data is returned we'll call setpost to set the post array with the data returned from superbase finally we'll console.log the post data just to check it out and see what it looks like to invoke the fetch post function we'll use the use effect hook which will call the fetch post function when the application loads the last function that we'll create is called create posts that allows us to call the supabase api to insert an individual post input by the user once the post is created we'll call setpost to reset the form fields and fetch posts to update the ui with the new posts in the ui we can now create our form we'll first create a form input for the post title setting the placeholder and value to title and the change handler to set the title value as the user types next we'll do the exact same for content to complete the form we'll create a button and attach the on click handler to create post to allow the user to create a new post the last thing we'll do is map over the posts and display them in the ui to test everything out we can now run npm start when the app loads we should now be able to create posts and view them in our app when we refresh the app we see that the posts are fetched from the superbase backend as expected

Channel: Nader Dabit

Views: 26,835

Keywords: supabase, react, javascript, serverless

Id: ogEitL8RwtQ

Length: 6min 14sec (374 seconds)

Published: Thu Aug 05 2021