How to Build a CRUD React Application With Supabase Cloud Storage
React has revolutionized the way developers build user interfaces for web applications. Its component-based architecture and declarative syntax provide a powerful foundation for creating interactive and dynamic user experiences.
As a React developer, mastering how to implement CRUD (Create, Read, Update, Delete) operations is a crucial first step toward building robust and efficient web solutions.
Learn how to build a simple React CRUD application, utilizing Supabase Cloud Storage as your backend solution.
Supabase Backend-as-a-Service Solution
Backend-as-a-Service (BaaS) providers, like Supabase, offer a convenient alternative to building a fully-fledged backend service from scratch for your web applications. Ideally, these solutions provide a wide range of pre-built backend services that are essential for setting up an efficient backend system for your React web applications.
With BaaS, you could use features such as data storage, authentication systems, real-time subscriptions, and more without the need to develop and maintain these services independently.
By integrating BaaS solutions like Supabase into your project, you can significantly reduce development and shipping time while still benefiting from robust backend services.
Set Up a Supabase Cloud Storage Project
To get started, head over toSupabase’s website, and sign up for an account.
Set Up a React CRUD Application
Create a React application, navigate to the root directory, and create a new file,.env, to set some environment variables. Head over to your Supabasesettingspage, open theAPIsection, and copy the values forproject URLandpublic anon key. Paste these into your env file:
Next, run this command to install Supabase’s JavaScript library in your React project:
Configure the Supabase Client
In thesrcdirectory, create a newutils/SupabaseClient.jsfile and the code below:
This code creates a Supabase client instance by providing the Supabase URL and a public anon key, allowing the React application to communicate with the Supabase APIs and perform CRUD operations.
You can find this project’s code in thisGitHub repository.
Implement the CRUD Operations
Now that you have successfully set up Supabase’s cloud storage and your React project, implement the CRUD operations in your React application.
1. Add Data to the Database
Open thesrc/App.jsfile, delete the boilerplate React code, and add the following:
This code defines anaddProducthandler function that asynchronously inserts a new record into theproductstable in the cloud database. If the insert operation is successful the page will reload to reflect the updated product list.
2. Read Data From the Cloud Database
Define a handler function to fetch the stored data from the database.
This code asynchronously fetches the data from the database. The fetch query retrieves all the data from the products table, limiting the results to a maximum of 10 records, and updates theproducts’state with the retrieved data.
TheuseEffectReact hookruns thegetProductsfunction when the component mounts. This ensures that the products' data are fetched and rendered when the component is initially rendered. Finally, add the code that renders input JSX elements on the browser to allow users to add products to a Supabase database and display the existing products fetched from the database.
The fetched data in theproducts arrayis passed as props and dynamically rendered within theProductCardcomponent using themapfunction.
3. Update and Delete Existing Data in the Database
Create a newcomponents/ProductCard.jsfile in the/srcdirectory. Before defining the handler functions, let’s see the states and JSX elements you will implement in this component.
This code creates a reusableProductCardcomponent that displays product information and allows for editing and updating the product details in the Supabase database.
The component receives aproductobject as a prop, containing information about the product to be displayed, and renders a card div with different content based on the editing state.
Initially, since theeditingstate is set tofalse, it displays the product’s name, description, and buttons to delete or edit the product. However, when a user clicks theeditbutton, the editingstate is set totrue, this will render the input fields with the current values pre-filled, allowing the user to edit and update the product’s name and description in the database. Now, define theupdatehandler function. Add this code below the states' declaration in thecomponents/ProductCard.jsfile.
This code defines an asynchronous handler function that updates the product’s data in the Supabase database. It uses thesupabaseinstance to perform the update operation by specifying the table, new values, and a condition based on the product’s ID and reloads the window after a successful update. Finally, define theDeletehandler function.
Use Supabase for Streamlined Backend Services
Supabase offers a convenient way to streamline backend services directly from the client side, eliminating the need for writing complex backend code. Apart from data management, it also provides support for various backend services such as a secure authentication system.
Now that you have learned about Supabase’s integration with React, go ahead and explore how you can integrate it with other client-side frameworks and discover how it can enhance your development experience across various platforms.
Enable fast project set up with Supabase in React.js applications.
Flagship price, mid-range phone.
Goodbye sending links via other apps.
These are the best free movies I found on Tubi, but there are heaps more for you to search through.
It’s not super flashy, but it can help to keep your computer up and running.
The best features aren’t the ones being advertised.
