Building a Full Stack App with Supabase and React
In this video, you'll learn how to build a full stack app with React, Supabase, and Postgres. We'll start by creating a new Supabase project, initializing a new PostgreSQL "posts" table, and adding rows for the post title and content.
Next, we'll install the Supabase library using NPM or Yarn, and configure a client to connect with the Supabase API. Using the Supabase client, we'll create a basic app that allows users to create and read posts from the Supabase back end.
By the end of this video, you should have a good idea of how to get up and running with building full stack apps using Supabase.
Nader Dabit: [0:00] In this video, you'll learn how to create a basic interactive application using Supabase in React. To get started, visit supabase.io and click Start Your Project to open your existing account or create a new account.
[0:13] Once we've authenticate it, 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.
[0:33] 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.
[1:03] 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.
[1:23] Now our database is ready to use and we can open our terminal to create our frontend 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 @supabase/supabase-js using either NPM or Yarn.
[1:48] 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 Supabase backend. For this, we'll create a file called client.js in the SRC folder. Here we'll import createClient from Supabase. Next, we'll export a variable called Supabase that we'll call createClient, passing in the Supabase app URL as well as the Supabase public API key.
[2:16] We can get the app URL and API key in the Supabase dashboard by clicking on Settings and then API. Now that our client is set up, we can open src/App.js.
[2:44] I'll first go ahead and remove some of this boilerplate code. We'll first import useState and useEffect from React to manage the local state as well as handle lifecycle methods. Next, we'll import the Supabase client that we've created in the previous step.
[3:08] The first state variable that we'll create is a post array that will handle the post return from the Supabase 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.
[3:35] Next, we'll create a function called fetchPosts 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 setPosts to set the post array with the data returned from Supabase. Finally, we'll console.log the post data just to check it out and see what it looks like.
[3:59] To invoke the fetchPosts function, we'll use the useEffect hook which will call the fetchPosts function when the application loads.
[4:11] The last function that we'll create is called createPosts 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 setPosts to reset the form fields and fetchPosts to update the UI with the new posts.
[4:36] 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 onChange handler to set the title value as the user types.
[4:58] Next, we'll do the exact same for content. To complete the form, we'll create a button and attach the onClick handler to createPosts to allow the user to create a new post. The last thing we'll do is map over the post and display them in the UI.
[5:25] 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 Supabase backend as expected.