Creating a CRUD (Create, Read, Update, Delete) application has become essential for many businesses and individuals. However, the process can seem daunting, especially if you don’t have extensive coding knowledge. That’s where no-code tools like Baserow and UI Bakery come in handy.
Baserow is a versatile open-source platform that allows users to create custom databases and applications. The user-friendly interface for defining tables, relationships, and fields, makes it ideal for building applications that require data storage and retrieval.
UI Bakery allows you to build functional user interfaces that connect to Baserow, with features, including drag-and-drop interface design, pre-built components, and integrations with various data sources.
With Baserow handling the backend database and UI Bakery for the front end, you’ll be able to create a fully functional CRUD app. Let’s dive in!
What we’ll do
In this tutorial, we’ll walk you through building a CRUD application using these powerful tools. We’ll cover the following steps:
- Set up your development environment
- Design your database schema with Baserow
- Integrate Baserow with UI Bakery
- Create pages and layouts in UI Bakery
- Build CRUD functionality
- Testing and deployment
Prerequisites
To complete this tutorial, you’ll need the following:
Let’s dive in!
Building a CRUD app with Baserow and UI Bakery
1. Set up development environment
Before we dive into building our CRUD app, let’s ensure that our development environment is set up correctly. You’ll need to sign up for accounts on both Baserow and UI Bakery.
Once you’ve created your accounts, make sure you’re logged in and ready to start building.
2. Design Baserow database
The first step in building our CRUD app is designing the database schema using Baserow.
Once you log in, you can access the dashboard to add workspaces and databases. You can work with an existing workspace, database, or table, or set up a new workspace from scratch.
In this tutorial, we will set up a new workspace and create a database from scratch.
-
To create a new workspace, click on the + Create workspace button. Then, click on Add workspace.
If you’re just starting with Baserow, we recommend you read our article on how to create a workspace and how to add collaborators to a workspace.
-
Now that the workspace is set up, you can either create a database from scratch or choose a template from our template library. Let’s add a database to the workspace.
-
Click on the + Create new button to start creating a new database.
-
Select the “Database” option to create a database from scratch.
-
Next, add a new table or click on a table within the existing database to open it. A default table will be added to the newly created database.
That’s it! we’ve successfully created a new database.
Define the tables and fields required for your application, considering the data you’ll be storing and how they relate to each other.
3. Integrate Baserow with UI Bakery
Now that we have our database schema defined, it’s time to integrate Baserow with UI Bakery.
In Baserow, navigate to the settings page. Click on the Database tokens tab and generate a Database token.
Once you’re logged in to UI Bakery, create a new app or create from a template.
In UI Bakery, navigate to the Data sources tab and connect a new data source. Create a data source when you need to share the same URL or other settings between multiple HTTP Request steps.
Select HTTP API as the data source type and provide the necessary credentials to connect to your Baserow database.
Specify your Base URL, and HTTP request headers. Enter the database token generated in Baserow to set up authentication.
Click Connect Datasource to save the configuration.
The settings defined on a data source level in UI Bakery are sent from the backend proxy and are not exposed to the frontend user.
4. Create the interface in UI Bakery
With the data source connected, we can now start designing the user interface of the app. Consider the different functionalities you want to offer (Create, Read, Update, Delete) and design separate screens for each.
In UI Bakery, create new pages for each CRUD operation — listing data (Read), adding new rows (Create), editing existing rows (Update), and confirming deletions (Delete).
Here’s a basic layout for an inventory app:
- Home Screen: Display a list of products with their names and maybe preview images.
- Product Details Screen: Show detailed information about a selected product, including category, description, price, and the ability to edit or delete.
- Add Product Screen: Allow users to enter new product details.
Add elements such as input fields, buttons, tables, etc., and design the layouts using the drag-and-drop interface to create a user-friendly interface.
5. Build CRUD functionality
Once the interface is designed, we can start implementing CRUD functionality.
For each operation, define the necessary actions and workflows in UI Bakery. This may include creating records, fetching data, updating rows, and deleting rows from the Baserow database.
To interact with data in the Baserow database via API, use the Baserow HTTP data source and configure HTTP parameters.
Create an action and specify additional parameters required:
-
Method - HTTP request method - GET, POST, PUT, etc;
-
URL - Path of the API endpoint.
Base API URL was provided so you don’t need to specify a whole URL for each action. You can change it on the data source level once for all actions.
-
Body - The HTTP body can be specified as a JSON object or as plain text;
-
Query params - URL params added to the request URL;
-
Transform result - pass a JS function to transform the execution result or fix an error.
{{data}},{{error}},{{res}}variables represents the result of the request.
UI Bakery allows you to import API requests via cURL. Add an HTTP request action step, click Import CURL, and paste your cURL command into the field. The system will fill in the configuration automatically. Then Run Action and check the Result tab.
Create
Configure input fields in UI Bakery to collect user input for creating new records. Use the POST method to send data to Baserow and add new rows to the table.
Design a form screen for adding new data and include input fields for each relevant field in your Baserow table.
Set up an “Add” button. When clicked, this button will trigger an action to create a new entry in Baserow.
Use UI Bakery’s “Actions” feature to define what happens when the “Add” button is clicked.
Read
Configure the table component to fetch data from your Baserow table. Use the GET method to retrieve data and display it in the UI Bakery interface.
Update
Add editable fields to the UI Bakery interface to allow users to update existing rows. Use the PATCH method to send updated data to Baserow and modify rows accordingly.
Clicking an “Edit” button could navigate to a pre-populated version of the “Add Product” form with the existing product details.
Submitting the edited form triggers an “Update Record” action in UI Bakery.
Delete
Add a delete button or similar functionality to the UI Bakery interface. Use the DELETE method to remove rows from the Baserow table when the delete action is triggered.
6. Testing and deployment
Map the Baserow fields to the respective UI Bakery components. This tells UI Bakery how to display and interact with your data. For instance, a Baserow field named “Task Name” would link to a text field displaying the task name in UI Bakery.
Before deploying the app, test it to ensure it functions as expected. Test the app on various devices and screen sizes.
Once satisfied, publish the app to make it accessible to users.
Summary
That’s it! You’ve successfully built a CRUD app using Baserow and UI Bakery.
We covered everything from setting up your database to deploying the final product. This tutorial has provided a solid foundation for creating custom applications quickly and efficiently.
Other useful resources
The following articles may also be helpful:
- How to model your Baserow data
- How to connect Bubble to Baserow
- How to build a custom CMS with Baserow and Webflow
- How to build a custom CRM System with Baserow and ToolJet
- How to display Baserow data in your Flutterflow app
In case you’ve run into an issue while following this tutorial, feel free to reach out to ask for help in the Baserow community.
