Êtes-vous prêt à créer un clone Duolingo avec "no code"?
Translation: Are you ready to build a Duolingo clone with no code?

If your answer is ‘oui’ (yes), then you’re in the right place!

It’s never been easier to start building powerful software with Bubble. By using our visual programming tool, it’s possible to quickly design and build working software that goes beyond static experiences. Makers from around the world are using Bubble to build marketplaces, directories, and even social networks.

Throughout this post, we’ll uncover the process behind building a Duolingo clone using Bubble. Whether you’re looking to replicate the entire product, or you’re just interested in utilizing some of the core features from the platform, this guide will share how to start writing the workflows for your product.

The steps to building a Duolingo clone with no code include:

Get Started

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

Register your account on Bubble

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 Duolingo clone.

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 Duolingo, some of the core pages you’ll want to include are:

  • A backend portal to create new lessons: The process of adding a new lesson will include unique pages to select a language, a category, and also add new words
  • A language selection page: Where users can select which language they’d like to learn
  • A category selection page: Allowing users to select from a list of lesson categories within a language
  • A lesson page: Displaying a core lesson
Bubble Duolingo UI design with no code

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 Duolingo clone, you’ll only need to create one page to host each individual lesson. We can then write the necessary logic to display only the relevant content on each page when it’s needed (we’ll cover this in more detail soon).

Configuring your database

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 Duolingo as an MVP, we’ll need to create the following data types & fields:

Data type: User

Fields:

  • Name
  • Languages learning - List of languages. Note: Creating a field as a list based on a separate data type allows you to seamlessly integrate all of its relevant data fields.
Bubble no code Duolingo clone tutorial with user data type and fields

Data type: Language

Fields:

  • Name
  • National flag
  • Categories - List of categories
Bubble no code Duolingo clone tutorial with language data type and fields

Data type: Category

Fields:

  • Category title
  • Language
  • Image
  • Words - List of words
Bubble no code Duolingo clone tutorial with category data type and fields

Data type: Word

Fields:

  • English spelling
  • Foreign spelling
  • Is correct - With default as no
  • Category - Category
  • Picture
Bubble no code Duolingo clone tutorial with word data type and fields

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

Creating a new lesson word

One of the first features we’ll build is a back-end portal where admins can upload new words as lessons to our platform.

Note: Before this point, I’d recommend manually adding a list of languages and categories to your platform through  your bubble database. These categories could include topics like basics, travel, or people, and will be stored within each language.
Adding a new entry within Bubble’s no-code database

Once our platform has some basic data to work off, we’ll start by adding a page to select which language we’d like to create a lesson for.

The upload-language page will be used to first select a language we’d like to contribute to.

On this page, we’ll add a repeating group element to display a list of all the languages within our database.

The data type of this repeating group will need to be configured as a language, and the data source will search for a list of all the languages available.

Displaying a list of languages in a Duolingo clone built with no code

Now you’re ready to start structuring the dynamic content that will be displayed within each grid. Simply map out the top row with the relevant content you’d like to show, then this powerful element will populate the remaining columns based on your existing app data.

Displaying a dynamic flag in a no-code Duolingo clone

Sending data between pages

Within a repeating group, it’s also possible to create events based on elements in each individual row. This feature will become useful when building navigational features across your platform.

Once an admin has selected a language, we’ll need to display a list of the relevant categories within a language that they can contribute to.

To build this workflow, we’ll create a new trigger when the languages title is clicked.

Creating a new workflow in a no-code Duolingo app

When creating this workflow, use a navigation event to send a user to another page.

Sending a user between app pages using Bubble’s no-code editor

From here, select the destination page type to be the upload-category page.

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

Sending data between pages using Bubble’s no-code editor

When you’re directed to the category page, you can easily pull this event data and display the content that’s relevant to this language.

To build this function, you’ll first need to ensure that the destination page type matches the data property that you’re sending within the workflow. In this case, you’ll need to set the upload-category to a language property.

Configuring a mobile app page type to display languages

Next, we’ll need to configure the repeating group on this page to display the list of categories where the language is equal to the current pages language.

Displaying a list of languages inside a no-code Duolingo app

Once a user has selected a category to contribute to, we’ll build another navigation workflow, sending them to a portal where they can upload a new lesson (our upload-word page).

Sending data between pages using Bubble’s no-code editor

On our upload-word page, we’ll need to configure the page type to be a category, then add a combination of input elements; an image uploader, and a checkbox.

Adding a new word to a Duolingo clone app build with no code

Once we’ve added the content of a new word into the on-page input, we’ll trigger a new workflow when the create button is clicked.

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

Creating a new entry within a no-code database

We’ll then need to start adding the relevant fields within our database. Map each of the on-page input elements with their corresponding field in your database.

Bubble no code Duolingo clone tutorial creating a new word

When creating a new lesson word, we’ll need to start by adding the correct version of a word first. As the word is correct, we’ll make sure to select our ‘is correct’ checkbox element.

To register this as the correct word in our lesson, we’ll need to make changes to the word within our workflow - updating its ‘is correct’ status.

Note: When adding this event in your workflow, it’s important to add a conditional trigger, allowing it to only run if our checkbox has been ticked.

If the word has been marked as correct, we’ll then update its status to ‘yes’.

Creating conditional triggers inside a Bubble no-code workflows

Once a word has been created in our workflow, we’ll then need to add this term to our relevant category.

Once again, we’ll opt to make changes to a thing - the current pages category, adding to it the new word we just created.

Adding a word to a Duolingo language learning app clone

The final step we’ll add to this workflow is a function to reset all of the current page elements, allowing you to easily add an alternative word that isn’t correct into this lesson.

Bubble no code Duolingo clone tutorial resetting input elements

Displaying a language lesson

Once we’ve created a lesson on our back-end portal, we can focus on building the front-end experience for our end users.

The process of building the user workflows will follow a similar approach to our previous steps.

We’ll start by once again creating a dedicated screen for users to select from a list of languages they’d like to study.

To streamline the process of building this page, you can even duplicate our existing upload-language page.

Bubble no code Duolingo clone tutorial language repeating group

On this page, we’ll once again create a new workflow when a languages flag is clicked.

This workflow will send a user to our category-select page, sending with it the current cell’s language.

Sending dynamic data between pages using Bubble’s no-code platform

We’ll also want to include an additional event, adding the language itself to a users list of languages they’re learning.

For this step, we’ll need to make changes to a thing - the current user. The thing we’ll want to change is their list of languages learning, adding to it the current cells language.

Adding a language to a users list inside a Duolingo clone app

On our category selection page, we’ll configure the page type to be a language, allowing us to reference its unique categories we’ve created.

Bubble no code Duolingo clone tutorial language page configuration

Within our repeating group, we’ll search for a list of available categories where the language equals the current page’s language.

Searching for categories with a Duolingo clones list of languages

Now, when a category is selected, we’ll create one last navigation event, sending the user to our lesson-word page.

Within this workflow, we’ll also pass on the words stored within the current cell’s category.

Bubble no code Duolingo clone tutorial sending data between pages

Now, on our lesson-word page, we’ll start by configuring the page type to be a category.

Bubble no code Duolingo clone tutorial category page configurations

Next, we’ll start adding dynamic elements to our page to display the current lessons featured word.

As taken added our lessons featured word first through our upload page, we’ll opt to display the first item from the current pages category.

Bubble no code Duolingo clone tutorial language title

Next, we’ll add another repeating group to the page, only this time, we’ll set the content type to be a word.

When configuring the data source of this repeating group, we’ll search for a list of words where the category equals the same value as the current pages category.

Displaying a list of words in a Duolingo clone app build with no code

As the content within the repeating group will display a list of potential answers to our lesson, we’ll also opt to shuffle each of the items within our repeating group in a random order.

Sorting a list of Duolingo words in a random order

Within our repeating group cell, we’ll then add a words foreign spelling, and an image to associate with the word itself.

Displaying a dynamic list of words in a no-code Duolingo clone

Marking an answer as correct or wrong

Once a user takes part in a lesson, we’ll need to display if they’ve select the right answer to the current question.

Using icon elements, we can easily start to display both a correct and wrong label that will be trigger upon a specific answer.

As we’ll only need to display these icons when an answer has been selected, we’ll ensure these icons aren’t visible when the page is initially loaded.

Hiding page elements in a Duolingo clone app

Next, we’ll need to create a new workflow when the text of a repeating groups cell is clicked.

Bubble no code Duolingo clone tutorial creating a new workflow

For this workflow, we’ll set a condition to the trigger of the text. In this instance, our condition will define if the current cells word is indicated with a correct = ‘yes’ data field.

Marking a Duolingo word as correct in a no-code clone app

Once this trigger has been activated, we’ll then choose to show an element - our green icon.

Bubble no code Duolingo clone tutorial displaying icons

We’ll then replicate this same workflow, only this time, we’ll update the condition to identify when the word is correct = ‘no’, resulting in displaying the wrong icon.

Marking a Duolingo word as incorrect in a no-code clone app

Additional features

Now that you’re familiar with building custom data fields and displaying dynamic content, you can start getting creative with the experiences you build within your product. Additionally you can:

  • Build an experience bar as users complete new lessons
  • Display a list of a users lessons on a profile page
  • Add sound files to each word, allowing users to hear the pronunciation for each lesson. Note: We’ve previously covered how to work with audio files in the article below.
How To Build Spotify in Bubble with No Code Tutorial

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 your Duolingo clone without any additional costs.

Templates

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

Start Building

Bubble can help you build a Duolingo clone 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 streamline their no-code journey.

Bubble-CTA@2x-3