Build Your First Bubble App — Building a Recipe Sharing App(Part-1)
Video tutorials are superb! However, written formats still have their charm!!! That’s why I thought of recreating a text version of your favorite “Build Your First Bubble App” tutorial.
Background: I learn by doing. When I started with my Bubble learning, I found the video tutorial quite useful. However, as a starter, I had to review the videos , go back and forth several times to follow and replicate the application. To help with this for fellow Bubble learners, I created this tutorial. I hope you guys will find this useful :)!
Avail $15 Bubble credit when you sign up and subscribe to Bubble using the link: https://bubble.io?ref=dew5wpeb
Now, Let’s get started!
We will be creating something like this, a ‘Dessert Book’ web application.
It will have the following features.
- A simple but professional UI.
- View submitted recipes.
- View details of a recipe.
- Users can Sign Up/Log in.
- They can add their favorite recipes.
- Like a recipe.
- Do stuff like update profile, reset email, reset the password, and forgot password.
Note: I have added the Bubble video references against each section. This will help you to refer to both the contents and follow.
Arrangement:
Considering the size of the tutorial, I have broken it down into 6 parts.
Part-1: Create a new application, design the database, and base structure
Part-2: Create application header, Sign Up, Log in, and Post a Recipe button
Part-3: Create a call to action, show recipes, and post recipe functionality
Part-4: Convert recipe card to a reusable element, user profile, and settings page (coming soon…)
Part-5: Set up privacy rules and build an upvoting system (coming soon…)
Part-6: Create a 404 page, reset password, and deploy (coming soon…)
Part-1: Create a new application, design the database, and base structure
1.1- Create a new application:
First create a new app in Bubble.
You can ‘Skip application assistant’ to keep things simple.
1.2- Create the Database:
We will start creating the application by creating the Database first. This will allow us to plan and structure the application beforehand. This is a popular development approach.
We begin in the data tab.
As the need for our features, we will create the following tables and their custom fields. We need just two tables for our application User and Recipe.
The User data type allows us to sign users up, log them in and log out. We will store their Name, a couple of lines about them, and their profile picture.
User
Name (text)
About (text)
Profile Photo (image)
Next, we need a way to store our desserts. In our case, we’ll make one more data type and call it Recipe. This will be used to store our recipes submitted by our users.
Recipe
Name (text)
Headline (text) — to show a one-sentence explanation of our recipe
Ingredients (text)
Photo (image)
Upvotes (number) — this will enable users to upvote their favorite recipes. We can default it to 0. This way, we can give each recipe a default upvote count of zero.
1.3- Base Structure
Once our database structure is ready, let’s move to creating our page structure. For this go to the ‘Design’ tab and you will see the blank layout.
By default, we landed on the ‘index’ page. You can view and navigate through your pages from the extreme left corner.
Double-clicking anywhere on the page opens the ‘Property-editor’ from where we can customize the properties of our page. Property editor enables us to make most of the things like data binding, create conditions, create/edit workflow, etc.
For our course, I have started with the following initial setup for the index page.
Width: 1080px, Height: 750px, Background style: Flat color and Background color: #FAFAFA
Inside the page, we will create a ‘Group’ to keep all our other elements together. We will set the Group width to 1060px, and height we can set to whatever for now. Then we will center it using Arrange -> Center horizontally.
This is our foundation page and we will clone this for other pages that we will need. Planning all the pages in advance will give us a roadmap to follow. That’s the reason why wireframes are an important part of any software planning phase.
In the Pages dropdown, let’s add a new page ‘recipe’. Ensure to clone it from the ‘index’ page.
Similarly, create two more pages ‘profile’ and ‘settings’. Now we are ready with the planning.
Continued…Part-2: Create application header, Sign Up, Log in, and Post a Recipe button
