How To Build A Zocdoc Clone With No Code

When you’re feeling under the weather, applications like Zocdoc help simplify the process of finding a suitable specialist.

If you’ve caught the no-code bug, however, getting familiar with tools like Bubble is often the best prescription.

No-code tools have continually become more powerful, making it easier for anyone to build software without any development experience. Tools like Bubble are the forefront of the no-code industry, empowering makers of all backgrounds to get started on their development journey. Without touching a single line of code, our customers have used Bubble to build directories, social networks, and even on-demand mobile apps like AirBnB and Instacart.

Throughout this post, we’ll uncover the process of using Bubble to build your own appointment scheduling app, just like Zocdoc.

Whether you’re looking to build a dedicated appointment scheduler, or you’re just interested in utilizing some of the core features from Zocdoc, this guide will share an inside look into building an MVP without using code.

The steps to building Zocdoc with no code include:

Get Started

Before you start, you’ll need to first register your free Bubble account. Click the button below to get started, then you can follow along as we build our product together.

We also recommend completing our introductory lessons, which will guide you through the step-by-step process of the most common Bubble features. This will help you get a running start when building your Zocdoc clone.

Note: When building an application that processes sensitive user data, it’s imperative to have a clear understanding of the local privacy laws and how to follow these standards accordingly. We’ve also created a privacy guide to help you properly secure your application throughout the building process.

When kickstarting your project, you can choose to begin by wireframing your product design, or building the necessary fields within your database.

In this case, we’ll start by using Bubble’s visual design tool to shape the user-interface of our platform. If you’re replicating a version of Zocdoc, some of the core pages you’ll want to include are:

• Create profile page: Where doctors can create their featured profiles
• Home page: Allowing users to search for featured doctors
• Results page: Displaying a list of doctors relevant to a users search
• Profile page: Displaying the full details of a doctors profile
  

A major feature within Bubble is the ability to send data between pages. This allows you to create one generic version of a page, then dynamically display the relevant content from your database when it’s required.

In the case of your Zocdoc clone, you’ll only need to create one page to host your doctor profiles. We can then write the necessary logic to display only the relevant doctor on each page when they’re needed (we’ll cover this in more detail soon).

Once you’ve mapped out the display of your product, you can focus on creating the necessary data fields to power your application. We’ll rely on these fields to connect the workflows behind your product.

Bubble’s pre-built database makes it easy to create different data types with unique fields. When building your Zocdoc MVP, we’ll need to create the following data types & fields:

Data type: User

Fields:

• Name
• Phone number
• Appointments - List of appointments. Note: Creating a field as a list based on a separate data type allows you to seamlessly integrate all of its relevant data fields.

Data type: Doctor

Fields:

• Name
• Bio
• Photo
• Servicing zip code
• Speciality
• Office address
• Booked appointments - List of appointments
• Reviews - List of reviews

Data type: Timeslot

Fields:

• Date (text)
• Doctor
• Time (text)
• Time-slot (number)

Data type: Appointment

Fields:

• Date (text)
• Doctor
• Location
• Patient
• Time-slot taken (number)

Data type: Review

Fields:

• Content
• Doctor
• Rating

Building workflows

Now that you’ve structured both the design and database of your application, it’s time to start stitching everything together and making your app functional.

In Bubble, the main way to do this is with workflows. Each workflow happens when an event occurs (e.g. a user clicks on a button), and then runs a series of “actions” in response (e.g. “sign the user up”, “make a change to the database”, etc.)

Create a doctor profile

The first core feature we’ll build is a back-end page for doctors to create and list their profiles on our directory.

On the create profile page, you can start building this feature by using a combination of input fields, including; free-text fields, image uploaders, and search boxes.

We’ll also need to add two separate rows of input fields for doctors to submit their available appointment times.

Our first row of input fields will be used to list the time slot number for a session time. As this value will need to remain fixed, we’ll select to disable this input, but set the initial content as a numbered list.

The second row of input fields will allow doctors to add the starting time of each available session.

Once a doctor has added the relevant details within each input, they’ll click the submit button to create a new entry in the database. This button click will be the necessary action to trigger your workflow.

Using the workflow editor, select to create a new thing within your database. In this instance, we’ll be creating a new doctor.

You’ll then need to start adding data to the relevant fields within your database. Map each input field you’d like to create against its corresponding data field.

After creating a new doctor, we’ll also need to create a new time slot for each available session they’ve listed.

We’ll also add a condition to this event, ensuring that a time is only added when an a sessions input field is not empty.

These session times will also be linked back to our new doctor.

We’ll then replicate this event for each session time slot.

Once this workflow has run, a new doctor will be added to the platform.

Create a search navigation

Once we’ve added available doctors to our platform, we can build a search function on our home page, allowing users to discover a relevant specialist.

On the home page of our platform, we’ll add two separate search box elements, as well as a date/time picker.

We’ll then need to configure our search box elements to match the same fields as the search elements on the create profile page.

From here, we’ll create a new workflow that parses a users search parameters, then sends this data through to our search results page.

To power this workflow, we’ll create an event trigger when the search button is clicked.

As we’ll need to add a unique search query to our URL string, we won’t be sending a user to a page with this workflow, but will instead be opening an external website. This will allow us to customize the URL path between pages.

The URL we’ll be sending the user to will be the current website's home URL + the URL path of our search results page + the date/time pickers value + the specialty search boxes value + the zip code search boxes value.

Note: When adding the date/time pickers value, we’ll need to customize the formatting in which we structure the date. By default, dates are separate by slashes, which indicate a separate page in your URL. To resolve this, we’ll format our date as a custom style: dd-mm-yyyy.

This workflow will now send all of the relevant data through to our search results page.

Display a dynamic list of doctors

Once a user has searched for doctors by a unique criteria, we can display a list of results on our search results page. This can be achieved by utilizing our repeating group element.

Repeating groups integrate with your database to display and update a list of dynamic content.

When using a repeating group, you’ll need to first link the element to a data type within your database. In this instance, you’ll classify the content type as a doctor.

We’ll also update the data source of our repeating group to display only the doctors that meet the parameters of our unique URL string. We’ll pull a list of relevant entries from our database based on the data from the URL path.

Once selected, you’ll also need to configure this data source as the path as segment list, not parameter.

Once this data source has been configured, you’re ready to start structuring the dynamic content that will be displayed within this grid. Simply map out the first column with the relevant content you’d like to show, then this powerful element will populate the remaining columns based on your existing data.

Schedule an appointment

Having the ability to schedule appointments with doctors is one of the core features within Zocdoc.

Using Bubble, it’s possible to build this experience using a combination of repeating group and popup elements.

We’ll start by adding a repeating group on our results page within our existing doctors repeating group. As this element will be used to display appointments times, we’ll configure the data type to be a time slot.

Within the data source, we’ll then search for all of the time slots where the doctor is the same as the current cells doctor.

Next, we’ll display each of the doctors available time slots within our yellow buttons.

Within this repeating group, we’ll also need to extract the date that was passed through to our results page, allowing us to store this information with an appointment when it’s scheduled.

Using an input field, we can update the initial content to display the date from the current pages URL path.

As we won’t want to show this element to end-users, we’ll uncheck the box that displays this input when the page is loaded.

Now that we’ve configured the layout of our repeating group, we’ll need to add a popup element to our page, allowing users to enter their details for an appointment.

When creating the popup, we’ll configure the content to be a time slot, but leave the data source empty.

After creating the popup element, we can start building the workflow to schedule an appointment.

When a yellow time slot button is clicked from our initial repeating group, we’ll trigger a new workflow.

Within this workflow, we’ll need to start by making changes to a thing. The thing we’ll want to change is the current cells timeslots, date (text) - updating it to the same value as our hidden date input field.

Next, we’ll need to display all of the data from the selected time slot onto our popup element.

After sending the data to this popup, we’ll finally show the element itself.

Once a user has entered their details within the popup input fields, we’ll finally have all of the necessary data to create a new appointment.

Let’s then create a new workflow when the schedule button is clicked on our popup.

Within this workflow, we’ll start by creating a new thing - a new appointment.

After creating the appointment, we’ll then need to add this to a doctors list of scheduled appointments.

By making changes to a thing, we can update the parent groups, doctors, time slots - adding to it the new appointment.

We’ll then replicate the same event, only this time, we’ll be adding the appointment to the current users list of booked appointments.

Finally, we’ll then close the popup element.

The last thing we’ll need to do is update the constraints of our time slot repeating group, removing any times that have already been scheduled within a doctors list of booked appointments.

Viewing a doctors profile

As Zocdoc’s search results page only displays an overview of each doctor (including their name, image, and appointment times), we’ll also want to display the full details of their profile on a separate page.

This additional content will need to be hosted on your dedicated profile page.

To power this event, you’ll need to start by creating a workflow that redirects a user to your profile page when the doctor's image is clicked.

Within this workflow, use a navigation event to send a user to another page. From here, select the destination page type to be the profile page.

You’ll then need to send additional data to this page so the Bubble editor knows which specific doctor to display. The data you’ll need to display is that of the current cell’s doctor.

On our profile page, we’ll then need to update the page type to reflect the data being sent through this workflow.

In this case, you’ll set the profile page to a doctor property.

From here, you can then start adding dynamic content into your page elements, displaying the information from the doctor that has been sent in your workflow.

Create & display user reviews

The final feature we’ll need to build for our MVP is a function to support user-generated reviews for each doctor.

We’ll get started by adding the necessary input fields on our doctor profile page.

Clicking the submit button below these input fields will trigger our workflow. Within this workflow we’ll want to create a new thing - a new review.

Map each of the on-page input fields with the data fields for your review.

Once a review has been created, we’ll use the repeating group element to display each entry.

This time, the data source of our repeating group will search for reviews where the doctor is the current page’s doctor.

Once again, we’ll map out the top cell of the repeating group to display the relevant content - including the review’s content, the rating, and the creation date.

Additional features

Once you’re familiar with creating custom data fields and displaying dynamic content, you can start getting creative with the experiences you build. Additionally, you can:

• Send user reminders/notifications about appointments
• Create a dashboard for doctors to review their upcoming appointment.

Privacy & Security

Now that you have the basics of your app, don't forget to start setting some privacy rules and conditionals to keep your data secure - starting with roles in the 'Privacy' section of your Data tab. You can also check if you're unintentionally exposing any data with an API checker.

Launch

Hiring a developer or dev team to build this application would cost thousands, if not tens-of-thousands of dollars. As you launch and grow in users, our paid plans allow you to host the product on your own custom domain, starting from as low as $25 per month. Some templates and plugins may cost more, but you can build all the functionality of Zocdoc without any additional costs.

Templates

If you don’t want to build your Zocdoc clone from scratch, you can purchase one of the templates made by our community members. Some similar templates include:

• Medley - Medical Center by Zeroqode
• Bookings & Appointments By Zeroqode
• EzDoc - Appointments Book by Ez Code

Start Building

Bubble can help you build an appointments application or any other product you choose! It’s never been easier to build something incredible without having to code.

Ready to join the no-code movement? Register your free account here and get started today.

If you’d like additional help when building your product, our thriving community forum is a great place to source actionable advice and resources. Any maker is also encouraged to ask questions within the community to help simplify their no-code journey.