Getting started with Budibase

Many start-ups, businesses, and aspiring entrepreneurs are faced with the challenge of promoting their product(s), especially when they need to promote their product by creating a web app or a mobile app, which can be expensive and time-consuming, especially if they’re not a developer.

But, personally, I managed to achieve this using a low-code development platform called Budibase. Low-code development platforms such as Budibase help create web and mobile applications without coding and instead, rely on graphical user interface and configuration.

But what exactly is Budibase and how do you use it? Let’s dig in.

What is Budibase?

Budibase is a low-code development platform that helps you build a business software app in minutes — 50x faster than development!

It’s a completely open-source project and you can write some code to improve and build a better web app.

Also, it’s free, although, you might pay for hosting and workflows, depending on your usage. You can check the price here.

Budibase has great documentation and a hard-working community.

Here are some of its best features:

• You can build and ship Single Page Applications (SPAs) with developer-friendly internal tools and a great responsive design and usability
• Budibase is open-source
• You can connect or import data from external DB (MongoDB, CouchDB, PostgreSQL, mySQL, Airtable, Google Sheets, S3, DyanmoDB, or a REST API). Also, you can operate data within Budibase GUI
• You can generate or develop amazing screens with powerful components
• You can automate processes or implement backend logic to your Budibase project. For example, if you need to know when someone updates data or deletes a record in your database, Budibase will send an email when it happens
• You can deploy your app simply on the Budibase Cloud or your own self-hosting with Docker or Digital Ocean

Budibase is a powerful platform for various of businesses from start-ups to large enterprises. You can use it for:

• IT and engineering
• Consultancy
• Transport and logistics
• Education
• Retail and marketplaces
• Finance

Now, let’s create a simple Budibase project together.

Create your first Budibase app

First, we should create an account on Budibase and answer several questions. Upon successful sign-up, you’ll navigate to Budibase Hosting Portal:

Let’s download a specific builder for your OS and copy API Key to deploy your app.

Next, open the builder and create a new Budibase app by clicking the button Create New Web App on the top right side. Let’s create the simple tech store web app.

Lastly, we are going to create the first user for our web app. If we don’t add the user, we can’t log into our system, so add a user with the email “[email protected]” and role “admin.”

Above, when we added a new user to our system, we already created a Users table. Budibase will store all users’ data here.

Managing Budibase data

On the top side of the Budibase builder, you’ll see four main sections to work with a web app:

• Data: section to manipulate your database. This part often called the backend
• Design: section to build your user interface. This part is often called the frontend
• Automate: section you can automate process or workflows
• Deploy: section to deploy your web app on Budibase

Before developing a user interface, we should create a database structure. Our tech store will store and display technical products.

First, create a Products table with columns:

• Name: product name with data type Text
• Price: product price with data type Number
• Brand: company name with data type Options. It is the incredible type with string/text selection
• Image: product image with data type Attachment for static files
• Available: Boolean type for available in the store
• Description: tech product description

Let’s click the create table button:

Designing your app with Budibase

Budibase builder has a left, middle, and right panel section.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

The left panel contains your screens and layouts, and screens contain all of our screens. When we create the Products table, the Budibase generates four screens for us:

• home: main screen
• products/:id : edit product row screen
• products/new/row: create new product screen
• products: all products list screen
  

The layout is a master template where your content is consistent throughout your app.

Budibase’s design has a public and private side. The private side are pages you work after logging in. The public side is a screen everyone has access to. For example, our app has a login page.

The middle panel shows your page with components, while the right panel manages your page and component styles and settings.

Let’s click the Preview button on the top right side and add several products to the database via our web app.

Next, let’s change the home screen and remove the Video Container component and display all available products. So how we can do that? Fortunately, Budibase has View virtual tables. We can get data without changing the data within database. Budibase manipulates data via:

• Filters: filter data with particular conditions
• Groups: group data by your columns
• Calculations: calculate data with formulas

It may seem complicated the first time, but if you read the docs and practice, it’ll become easier.

Now, let’s create the Availables view with the filter Available equal true.

When Availables view is ready, add the Repeater component with Stacked List.

Above, we’ve updated Stacked List borders, padding, and background properties. It is simple. You can make different styles via powerful tools and settings. Feel free to play around and trust your imagination!

Deploying the app in Budibase

Great! We have completed our first Budibase web app. Now, we need to deploy our web app. When we deploy it, Budibase hosts it on AWS. Deploying with Budibase is simple.

First, open a hosting portal and copy API Key for your deployment. Then open the settings modal window by clicking on the top right side Settings icon and past key.

Next, click the Deploy App button. That’s it.

Congratulations! Your first Budibase web app is now live.

Conclusion

If you need to build a web application in minutes without knowledge of software development, Budibase is the best way for you. It’s an incredible, low-code open-source platform for building web applications.

Thanks for reading. I hope you found this piece useful. Happy coding!