Bubble for Beginners: Creating a Complete Note-Taking App! (Part-1)

Key Takeaways

Hello everyone and welcome back to our channel AI Tech Feed. In this tutorial, we are going to build a simple yet powerful functional note takingaking app from scratch using the no code platform bubble. This project is perfect for beginners and will cover the fundamentals of database setup, UI design, and workflows. So, let's dive in. First, from your bubble dashboard, click the create new project button. A pop-up will appear asking you to name your project. We'll call this one my note app. Next, you will need to choose a starting point. Since we are building this from the ground up, select create a blank app and then click get started. If a pop-up appears offering premium features, we'll stick with the free version for this tutorial. Just click on start with basic features. Give it a moment to load and once it's ready, you will see the main bubble editor database configuration. The foundation of any application is its database. Let's set ours up now. Navigate to the data tab. On the left hand side of the screen, click on the data tab. You will notice the user data type is automatically created for us. Next, create a new data type. We need a dedicated type for our notes. In the new type input box, type note and click create. Next, add fields to the note type. Now that we have our note data type, we need to add fields to store its information. We'll create three new fields. First, click create a new field. Then, name it title and set the field type to text. Next, create another field named content. And also set its type to text. Finally, let's add a field to track when the note was created. and set the field type to date. Great. Our database is now structured and ready to hold our notes. Designing the user interface. Now let's design the front end of our app. Click on the design tab on the left to open the visual editor. Click on the index button at the top left and select the new icon. Then click on the web page option. A pop-up will appear titled new web page. In the page name section, enter design page. Then click create. Now you are on the design page. Input fields. From the element palette, drag an input element onto the canvas for the notes title. In the properties panel on the right, change the placeholder text to note title. After clicking the placeholder note title, change the placeholder color to black. Below this, drag a multi-line input element for the main content and change its placeholder to add note. After entering the placeholder, add note. Change the placeholder color to black. Displaying the notes. To show a list of our notes, we'll use a repeating group element. Drag one onto the canvas and resize it to take up a good portion of the page. In its properties panel, we need to connect it to our database. Set the type of content to note. Set the data source to do a search for and select note. This tells bubble to search our database for all entries of the note type and display them here. Designing the repeating group cell. Now we need to design how each individual note will look inside the repeating group. Drag a text element into the first cell of the repeating group. Hold the edge of the repeating group. Drag it and adjust its size. Go to the layout section of the repeating group. In the cells container layout, select fixed. In its properties, click insert dynamic data and choose current cells notes title. Drag another text element below this for the content. And for its dynamic data, select current cells notes content. Add a final text element for the date. Set its dynamic data to current cells, notes, created date. To make it look clean, click formatted as and pick a simple format like 82325. Month, date, and year. Select the design page in the layout section. Change the height to 1267 and keep the width as it is,80. Adjust the repeating group section according to the new height. Hold the edge and drag it until it fits within the design page section. You will also need to adjust current cells note title, current cells note content and parent groups thing. Building the workflows, the logic. With our design in place, let's make it functional by building workflows. Drag a button element into the canvas below the input fields and change its text label to delete. Select button A and change its text label to add note. And that wraps up part one of our note takingaking app project. So far we have set up the project, built the database, and designed a clean user interface to display our notes. In the next part, we'll bring this app to life by adding workflows so that we can actually create, display, and delete notes in real time. Don't forget to save your progress and I'll see you in part two where we make everything functional. Subscribe to AI Tech Feed for more such awesome videos.