Build Your Next Web App 10x Faster with RapidAPI

TL;DR: Back end development can be complex and time consuming. In this tutorial you will learn how to do it in minutes using the RapidAPI platform. RapidAPI lets you create a full back end for your app without writing any code.


This tutorial will walk you through creating an online to-do list app with RapidAPI. While doing this, you will learn how to develop back end software on the RapidAPI platform. In the app you can create a to-do list which will have its own URL. Afterwards you can add items and mark them as done, and share the list with your friend. You can see a working demo of the final app here.

What is RapidAPI

RapidAPI is an online platform that lets you create a back end for your web or mobile app without writing a single line of code. Every web or mobile app has two parts:

  • Front end: Runs on the user's device. In charge of showing the user interface (UI) and reacting to the users actions. For example: showing a button and then reacting to a click on it.
  • Back end: Runs on servers. In charge of storing data (e.g. user details, product lists, etc...) and performing actions (authenticating users, sending push notifications, etc...).

When using RapidAPI, you construct the back end logic using blocks. Each block represents a basic action done in the back end. These are things like saving to a database, sending a notification or accessing an API. The back end is hosted on the RapidAPI servers and you can use it from your app.

Each project in RapidAPI also has a database for saving data. The app will use the database to save the lists and the to-do items. We will also create actions to add new items, mark items as done and get all the items in a given list.

As we will be building a web app in this tutorial, we will also host the front end static files (e.g. the HTML, CSS and JS) on the RapidAPI servers. We will then be able to access them online. Any web app hosted on RapidAPI gets a domain name so you can share it with friends.

Creating your first RapidAPI project

If you don't have a RapidAPI account, you can sign up here.

Once you have entered RapidAPI, create a new blank project. You can name it whatever you want.

01-rapidapi-create-project-1 02-rapidapi-create-project-2

Next up we will upload the front end files to RapidAPI. We have pre-created the whole front for this tutorial with HTML, CSS and JS. You can find the front end files on GitHub. Once you are in the repository just download the files as zip.


We will upload these files to RapidAPI so they will be hosted online. Switch to the Endpoints tab of your project and choose File. Just drag and drop the zip you downloaded from GitHub and all the front end files will be uploaded and hosted on RapidAPI.


Now that the front end files are hosted online you can actually access the front end from your browser. Open the /index.html file and click preview on the top bar. The main page of the app will open. You will be able to move to a list, but not to create any items or fetch any items. This is the job of the back end which we have not yet built.

Creating our first back end action

The most interesting part of the back end are the actions. These are things like: signing up a user, adding an item to a to-do list or fetching an item from a to-do list. The first action we create will save new to-do items to lists.

First, we need a database collection where we can save the items. Just switch over to the database tab to see your database. Each database is made out of collections. A collection is like a bucket that can hold documents. For example, a system with user registration may have a collection called users. Each user will have a document in this collection holding its basic information.

Let's create a collection called items. Each to-do item (in any list) will be saved into this collection. Just press the Create new collection button and call your collection items.


Now we create the actual back end action for adding new items. Switch back to the endpoints tab and create a new back end action called item.


Open your action. You will see the block editor. On the left you have all the packages of blocks you can use. This action has to save a new item into the items collection in the database. To do that, we will open the database package and drag in the block.


For the collection, we will save to the items collection we created. The next step is to define the document that will be saved. We will add 3 fields (all of them strings):

  • Item: the actual text for the to-do item being saved. This will be sent along in the body of each request being made to the back end action, under item. Each request has a body where data can be passed. To get the value from the body, we will just put in #body.item. This will just be replaced with the value passed in the body of the request.
  • List: the name of the item's list. We save this so we can search for all the items in a certain list later. This will also be passed in the request body so we will just use #body.list.
  • Status: the status (todo or done) of each item. We will set it to todo by default for any newly created items.

The block should look like that by now:


As you will be able to see, the block has 2 possible outcomes: success and error. We will need to put a block for each one of them to tell the system what to do. For error we will use the response.sendMessage (you will find it under response in the left menu) block. It will send back a message to the web app. The message will be "There was an error".

The status field is for an HTTP status code. These are predefined number codes that tell the app what happened. You may be familiar with the 404 code which means 'Item not found'. We will set the code to 500 which is common for a server error.

For success we will use the same block to send a success message. The message will be "success" and the status 200 which is common for success.


Now that we have a fully working back end action let's test it out. Use the run button on the right side of the top menu to open the run menu. Within the panel, open the body part of the request and set 2 arguments: item and list. These will be used for the #body in the block. Once this is done press Send. You should see the success message.


You can head back to the database screen and see the item saved there.


Let's see it in action! You can head back to the preview of the index.html file (the URL should be Enter a list and create a new item. You can then go to the database and see it was saved there. You will still not see the item in the actual list. That is because we haven't created an action for getting items. That's our next task.

More back end actions

The next action we will create will be used to fetch the list items from the server. We will create a new back end action and call it /list.

We want to find all the items in the database matching a certain list name. We will use the database.find block and query the items collection. For the query, we will check for documents where the list attribute matched the supplied list name. Thus, where the list attribute is == to #body.list. The find block can also be set to sort, skip and limit the amount of the results, but we will leave these options empty as we don't really need them right now.

Finally we will have to set the to argument. This is just a name for a variable where the results will be saved. We will call it items. Down the road we will be able to write #items and it will be replaced by the found items.


If any errors arise we will just return a Server error message with a 500 status like we previously did. If nothing was found, we can just return an empty array [] with a 200 status (the list might be empty so this is not an error). If something is found we will return the items by using #items and a 200 status.


You can again use the Run menu to check it. If you put the same list name you created the item with you should see it. You can even head back to the actual app and test it there ( Now you will be able to create new items using the first action we created, but also see previous items that are being fetched using this new action.

The last action we need is to mark items as done. Whenever a user ticks an item on the list, we want to save it as done. That way, it won't reapear when the list is reloaded. The 'status' field each list item has is marked as todo by default. When an item gets done, we change it to done. To do so, create a new back end action called /item-done.

To update the item in the database use the database.update block. The collection will again be the items collection where all the items are saved. You will see the block has 2 major parts:


This is the query that will be used to find all the documents we want to update. It works in the same way as the database.find block. Each document in the database gets a field called _id automatically whihc is unique by default.

When we want to refer to a specific document to be deleted, the easiest thing would be to use it's __id. If we used item you could have the same item in multiple lists. Even if we use both list and item, you may have the same item multiple times in the same list. __id is guaranteed to be unique. We will just pass the id in the body so we can compare the _id field with, using the == operator.


This is the actual operation that will be performed on the documents. It can do many complex updates like:

  • Increasing or Decreasing a value
  • Appending strings
  • Pushing to arrays
  • More...

For now though, we will just use the = which changes the value of a field. We use it on the status field, and set it to done.

The end result should look like that:


For both the success and error blocks, just use the auto suggested response.sendMessage block. It will have an appropriate message and status code by default.

That's it! You now have a fully working back end for your todo list app. Heading to you now have a fully working todo app. You can create items, see them and mark them as done. The front end is hosted in the cloud so you can send the link to your friends and they can all access it.

How does the front end connect to the back end?

The front end you uploaded on the first step automatically connected to the back end actions. Each back end action is exposed through a REST HTTP Endpoint. That means it has a URL and a method, and you can make requests to it from any device. For example, the item action we made, which is used to create new items in a list, gets the URL: Each action is also a POST endpoint by default.

If you open the script.js file uploaded in the first step, you can see a request is made to this URL whenever you create a new item:

$scope.addItem = function() {

    var listName   = urlParam('list');
    var item       = $scope.newItem;
    $scope.loading = true;

    //This is where the request is made
    $', { 
        list : listName,
        item : item
        .success(function(data, status, headers, config) {
            $scope.loading = false;

            $scope.getListItems(urlParam('list'));  // Reload data with new item
            $scope.newItem = "";                    // Clear text field
        .error(function(data, status, headers, config) {
            $scope.loading = false;

            alert("There was an error adding the item. We truly apologize");


Also, whenever the page loads a request is made to the endpoint corresponding to the list action we created.


So by now you have a fully functional todo app you can use to collaborate with friends. You have learned how to quickly create the back end for it, host the web app online and configure the database. Using RapidAPI for the process gave us some advantages:

  • Time - you didn't have to spend time writing code - just drag and dropping blocks. Also, it was not neccessary to learn a new proggraming languge.
  • Immediate deployment - as you were creating the back end actions they were deployed to the servers and run imidiatly. Thus, you could use the web app right away.
  • Security - as you may have noticed, the web app and cloud actions all use https://. This means they work with SSL. This helps keep your app secure. SSL is built in by default in all RapidAPI project.
  • Scale - RapidAPI's servers are deployed all over the world and at large numbers. That means your apps deployed on RapidAPI are very scalable.

This content is sponsored via Syndicate Ads.