Bubble lesson of the day: building Yelp! For now, we’re going to program a simple version that focuses on coffee shops. On Bubble, such an app takes about 30 minutes to build – starting from a white page!

Here is the working app: https://bubble.i0/site/coffeesearcher/index

And here is the ‘source code’: https://bubble.i0/page?id=coffeesearcher

Getting Started

How are we going to structure our app? We need two pages: one for the submission of coffee shops, and one to display them on a map.

Let’s start with our first page. We need an input for the coffee shop name, an input to type the address, a picture uploader, and a dropdown to rate on a scale from 1 to 10. We’re also going to add a map, so that the user can make sure she typed the right address. Finally, a button ‘Submit’ will allow users to actually save their entry.

So here is our white page. Let’s add a background texture. I usually use this website http://subtlepatterns.com to get some nice textures (free). First, I click on the white page to change the background. Then, I pick ‘image’ and upload the texture i took from subtlepatterns.

Bubble style menu, black on dark gray, for uploading media.

Alright, let’s start building our page. Here is what it looks like after adding the 2 inputs, the drop down element, the picture upload button and the map.

Bubble app designer window with a map image and editing tools.

Making The Page Work

First, I need to make the input type “address” (so that the input will make sure anything typed there can be understood by Google Maps). I do this simply by picking “Address” in the Content Format section in the Property Editor.

Editing window in Bubble, black on dark gray, with options to edit appearance.

I also want to have the map display the address that has just been typed. To do this, I double click on the map and define the address of the marker as “Input Address’s value”.

Black on dark gray apperance editor window in Bubble.

Last, I had to enter the options for the drop down menu. In this case, these are options 1 to 10.

Programming The Workflow

Okay, now let’s add a button ‘Submit’ below the different elements and move to the workflow part. What do we want to happen when the user clicks on Submit? We want to save this new coffee shop. So let’s double click on the button and click on ’Start/Edit workflow’.

Black on dark gray Bubble creator window with options to edit a button.

This takes us to the workflow page, where we define what the app does. The action we want to happen then is ‘Create a new thing’ in the Data part. In this particular case, the new thing is a coffee shop.

Click on ‘Create a new type’ and type coffee shop.

Black on gray computer window with option to create a new coffee shop in Bubble.

Now, what are the fields that are going to describe our coffee shop? Well, these are related to the inputs I’ve drawn: the name, the address, the picture, and the rating. I can create these fields in the ‘Settings’ tab. I have to be careful about two things: the type of the address field should be an address (!), and the rating should be a number.

Bubble app editor page with option to choose inputs, fields and data types.

Let’s get back to our action. The logic here is to say where the data we want to save is coming from. This is the content of the inputs.

Here is what it looks like:

Bubble app input field for Yelp-like app.

And we’re done for the submission part. Now, our users can save coffee shops. If I press preview, I can start using my app!

Map with red markers showing user-generated coffee shop content.

Creating A Display Page

Now, we want to create another page to display what has been submitted. This is actually going to be much faster. Begin by clicking on ‘New page’ in the application menu and name it ‘search’.

Bubble app editor window, orange on white, to create a new page.

Let’s apply the same background fix with the texture. Now, I’m going to add a map element that will pretty much take up the whole page.

Bubble app editor screen with map of New York City.

The only thing I need to do here is define which list I should display. First, we want to display a list of markers.

Bubble app map editor window, black on dark gray.

Then, we pick the type ‘Coffee Shop’ as that’s what I want to display in my map. Let’s click on data source to define the list we want to display. In this case, we’re just searching for all coffee shops, so let’s not add constraints.

Bubble app appearance settings menu with New York City map image.

The last thing we want to do is display some legend on that map with the coffee shop rating (so that we can see the highest rated coffee shops)!

Black on dark gray settings window for adding map legend.

And we’re done! Here are some coffee shops I submitted, but feel free to enter yours :)

Finished Yelp-like app map with red markers and addresses.

That’s All!

Here is the working app: https://bubble.is/site/coffeesearcher/index

And here is the ‘source code’: https://bubble.is/page?id=coffeesearcher

In about 30 minutes, I’ve built a Yelp-like app. I can add plenty of other features. For instance, I can refine the search based on current location within a range of miles. I could also allow users to sign up and type comments about places, or even message people that like the same places and have a coffee date :)