Building a Yelp-Like App

Using Bubble to create a location-based coffee shop directory.

Bubble
September 18, 2015 • 5 minute read
Building a Yelp-Like App

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 :)

Start building with a free account

Build your app on Bubble's Free plan. No need to upgrade until you're ready to launch your app.

Join Bubble

LATEST STORIES

blog-thumbnail

Bubble vs. AppSheet: Comparing the Top No-Code Platforms

AppSheet is a Google Suite tool that allows you to make visual interfaces and basic apps to visualize and interact with your external databases. Bubble is a full-stack, visual programming tool that allows you to create web and mobile apps. Here’s how to decide which is right for your project.

Bubble
January 24, 2025 • 24 minute read
blog-thumbnail

Introducing Changelog: Improved Coordination, Clarity, and Deployment Confidence

We’re excited to launch changelog in public beta — an improvement to version control that will make building smoother and more efficient for teams.

Kate McNally
January 16, 2025 • 2 minute read
blog-thumbnail

Bubble Ambassador Applications Are Now Open: Help Shape the Future of No-Code

Want to help shape the future of no-code? We’re seeking passionate builders and founders to join Cohort 2 of our Ambassador Program.

Federico Garcia Lorca
January 15, 2025 • 2 minute read
blog-thumbnail

How to Collect Customer Feedback (and What to Do With It)

Customer feedback helps you prioritize the right improvements and monitor your customer experience. Here’s how to get it and how to use it.

Bubble
January 14, 2025 • 11 minute read

The Essential Brand Elements: 15 Assets That Will Help Your Startup Stand Out

November 20, 2024 • 15 minute read

Build Your AI Agent on Bubble — No Coding Required

November 19, 2024 • 2 minute read

What Is User Acceptance Testing (UAT) and How to Do It Well

October 30, 2024 • 12 minute read

Web Content Architecture 101: 5 Simple Steps to Organize Your Site's Structure

October 25, 2024 • 9 minute read

Intuitive UX Design: 10 Great Examples and Why They Work

October 15, 2024 • 13 minute read

Build the next big thing with Bubble

Start building for free