What is a CRUD app and how to build one | Ultimate guideBy: Joe JohnstonJul 6, 2021 | 9 minutes readWe use CRUD apps every day. Most of the time, without noticing. They keep us organized, they help digitise business processes, and they’re critical to application development. But many of us are oblivious to what CRUD apps are, or how to build one. Within this post, I am to provide you with a simple and straightforward guide to the world of CRUD apps. The guide is broken down into three sections:What is a CRUD appHow to build a CRUD appWhy CRUD is importantWhat is a CRUD AppA CRUD app is a specific type of software application that consists of four basic operations; Create, Read, Update, Delete.At a high level, CRUD apps consist of three parts; the database, user interface, and APIs.DatabaseThe database is where your data is stored. A database management system is used to manage the database. There are several different types of database management systems (DBMS) that can be categorized by how they store data; relational (SQL), Document (NoSQL). If you are deciding what DBMS to choose for your CRUD app, here’s a list of the 14 best database management systems . Going forward, our content will focus on SQL. SQL databases consist of tables. Tables consist of records. Records consist of fields. Fields consist of data.User InterfaceThe user interface (UI) is what your users interact with. Due to the increasing popularity of applications, businesses are now prioritizing user interface design and user experience.APIsFinally, the APIs are how your application informs your database of what functions to perform. These functions can be modeled in different ways but they are designed to perform four basic CRUD operations; Create, Read, Update, Delete.CRUD operationsAs previously mentioned, there are four basic CRUD operations; create, read, update and delete. These four operations map to functions/statements, as seen in the following table:OPERATIONSFUNCTIONSCreateInsertReadSelectUpdateUpdateDeleteDeleteEach letter in CRUD can also be mapped to an HTTP protocol method:OPERATIONSHTTP PROTOCOLCreatePostReadGetUpdatePutDeleteDeleteLet’s dive deeper into each of the CRUD operations. We’ve used a library management app as an example to help with learning.CreateCreate allows you to add new rows/records to a database/table. If the record does not exist, the create operation adds it to the database.Recipe exampleCreate/add a new book to our library management appReadRead is the operation that allows us to see the recipe we just created. It does not alter data. It simply displays it. Read consists of a function that queries our database and fetches all our records, in this case, recipes. We can tailor our queries to pull back all recipes, or only recipes of a particular type (for example,, vegan recipes). We can also pull back a single recipe if we have a UID (unique identifier).Recipe exampleView the books within our libraryUpdateUpdate is the operation that allows us to modify existing data and records within a table. We can update a single field within a record or multiple fields at once. It is also possible to update multiple records at once too.Recipe exampleUpdate a book’s availabilityDeleteDelete is the operation that allows us to remove records from a table.Recipe exampleRemove a book from our library management systemTwo additional basic CRUD app examplesRecipe appCreate - Add a new recipe to my recipe appRead - View recipes in my recipe appUpdate - Update the carbonara recipe in our recipe app to use guanciale instead of baconDelete - Remove the carbonara recipe from my recipe appProject management appCreate - Insert a new task in your project management toolRead - View all open tasksUpdate - Mark a task as ‘complete’Delete - Remove a task from your project management appCRUD app ideasThere are several use cases for CRUD apps, including:Event management appStudent portalSports club membership appBook club appContent marketing calendarOKRs appTo-do appProject management appApplicant tracking systemCRUD platforms / frameworks / tech stacksThere are many, low code platforms, frameworks, or tech stacks that provide an effective workflow when creating CRUD apps. The following are options you might consider:BudibasePython and DjangoLAMP - Linux, Apache, MySQL, PHPSupabase and Next.jsMEAN - Mongo, Express, Angular, Node.jsHow to build a simple CRUD appBudibase is a low code platform that is designed for creating CRUD applications. From the frameworks, tech stacks, and platforms listed above, Budibase is the easiest and fastest way to build a CRUD application. For these reasons, we will use Budibase to build our CRUD app.OverviewA local library is currently using an spreadsheet to manage their catalogue of books, and they would like to upgrade to a CRUD application.Our app must:Make it easier to add new booksMake it easier to search booksMake it faster to check the availability of booksImprove the experience when updating book information, including availabilityMake it possible to assign users to booksImprove the experience around deleting booksBuilding our library management CRUD appThere are three high-level steps to building our CRUD app; setting up Budibase, create our data structure, and designing our user interface.Setting up BudibaseIf you are new to Budibase, click the ‘Get started’ button in the navigation (if on mobile, click the burger menu, then the ‘Get started’ button). Once you have Budibase setup, follow the actions below:Actions:Click the ‘Create new app’ button.Give your app a name. We are going to call our app the ‘Library management app’ - very original.Create your data structureBudibase has its own database and supports several others; including MySQL, PostgreSQL, Mongo, and more. For our CRUD app, we will simply use Budibase’s internal database - Budibase DB.Actions:Create a Budibase DB table, and call it ‘Books’Create a column within your Books table, and fill out the form:Name - TitleType - TextSelect ‘Primary’ under search indexesCreate another column within your Books table, and fill out the form:Name - AuthorType - TextSelect ‘Secondary’ under search indexesCreate another column within your Books table, and fill out the form:Name - StatusType - OptionsOptions 1 - AvailableOptions 2 - Not availableCreate another column within your Books table, and fill out the form:Name - Checked out byType - RelationshipTable - UsersDefine the relationship - One Users row -> many Books rowsColumn name in other table - BooksThat’s our database and table structure setup. Now let’s add a few records for testing purposes:Click ‘create row’Complete the form:Title - SuperfreakonomicsAuthor - Stephen DubnerStatus - AvailableChecked out by - leave blankClick ‘save’Click ‘create row’Complete the form:Title - Burning BrightAuthor - John SteinbeckStatus - Not availableChecked out by - leave blankClick ‘save’Click ‘create row’Complete the form:Title - Electric UniverseAuthor - David BodanisStatus - AvailableChecked out by - leave blankClick ‘save’Click on the Design tab (in the top navigation bar)Designing your user interfaceThe design section is where we create our User Interface. You will notice on the left-hand side of your screen, there is a list of screens/routes and components. These screens were autogenerated by Budibase. Budibase is smart enough to know that for each Budibase table you create, you will need a new, list, and detail screen, in other words, a create (new), read (list), update + delete (detail) screen. This makes it faster and easier to build CRUD apps. Let’s get started.Actions:Click the books/:id screenClick ‘Field group’In the settings panel, click ‘Update form fields’This should generate a form, with record details in it, and will allow us to update and delete individual records.Click the books/new/row screenClick ‘Field group’In the settings panel, click ‘Update form fields’This should generate a new form for adding new booksAdding searchClick on the ‘Container’ component under /booksAdd a form component (located within the component panel ((above the main screen))Drag the ‘Data Provider’ component (with children) inside the ‘New Form’ componentClick on the ‘New Form’ componentIn the settings panel (right panel), select the Schema dropdown, and select BooksUnder Theme, select ‘Lightest’Add a Text Field component (under Form in the component panel)Drag the text field component above the data provider component (and nested under ‘New Form’)In the settings panel, click the ‘Field’ dropdown and select Title.In the ‘Placeholder’ textbox, add a placeholder - we will use ‘Search title’.Find the ‘Margin’ section and change ‘Bottom’ to ‘20px’.Click the ‘data provider’ component in your left nav panelClick ‘Define Filters’Click ‘Add expression’In the first dropdown, select ‘Title’In the second dropdown, select ‘Starts with’In the third dropdown, select ‘Binding’And in the fourth input, click the little lightning boltA new drawer will appear. Select the ‘New Form.Fields.Title' option under ‘Columns’, and click ‘Save’Click ‘Save’ again (to save your new filter)You’ve successfully added search and we now have our final CRUD app that will:Make it easier to add new booksMake it easier to search booksMake it faster to check the availability of booksImprove the experience when updating book information, including availabilityMake it possible to assign users to booksImprove the experience around deleting booksAnd believe it our not, that’s us finished. Well done! Click the preview button (play icon) to view your CRUD app, or click Publish to push it live. Click the Books link, and there is your table with search.Tip - if you click the Books screen, and change the route to ‘/’ it will reroute to your homepage.Why CRUD is importantThe CRUD acronym is a great, memorable framework for building applications and constructing usable models. We can examine why CRUD is essential from two fronts; developers and end-users.For developers, CRUD operations are essential to app development. In a similar vein, REST, a superset of CRUD, is necessary for website development.For end-users, CRUD operations allow them to fill out forms, edit data, manage their admin panels and user settings.CRUD offers many other benefits including:Security controlIt is more performant vs. SQL statementsIt’s tried and testedIt’s a recognized pattern and recognizable by most devsIt simplifies the process and provides an easy framework for new developers to learnCRUD app templatesYou can find over 50 CRUD app templates on the Budibase template page. These templates are free, 100% customizable, and simple to install.View Budibase templatesAnd that’s the wrap. I hope you found value within this post and your understanding of what a CRUD app is and how to build one has improved. I wish you all the best on your development journey.