---
name: Cloudant-todo-list
title: Creating a web-based To-Do list
description: Create a simple web-based to-do list to get familiar with the basic IBM Cloud features.
last-updated: 2023-04-06
---

> ## Documentation Index
> The table of contents for this documentation set is at https://cloud.ibm.com/docs/Cloudant?format=markdown
> The index for all IBM Cloud docs is at: https://cloud.ibm.com/docs/llms.txt
> Use these files to discover more information as needed.

# Creating a web-based To-Do list
{: #web-based-todo-list}
{: toc-content-type="tutorial"}
{: toc-services="Cloudant"}
{: toc-completion-time="1hr"}

Create a simple web-based to-do list to get familiar with the basic IBM Cloud features.
{: shortdesc}

## Objectives
{: #objectives-web-based-todo-list}

1. From this tutorial, you learn how to create a basic website that interfaces with your IBM Cloud database to read and write data.

   The project is a simple to-do list, where you can see a list of notes. You can add and delete notes. Each of your notes has a tag, and you can filter your notes by tag.
   {: tip}

1. To create this to-do list, your application needs to be able to read and write to the database. To read to-dos in "newest first" order and to filter by tag, your database needs to have some secondary indexes. Now, we can create all of that.

You can complete the tutorial in less than an hour. It doesn't cost you anything over your current IBM Cloudant bill (so it's free if you are on the IBM Cloudant Lite plan).

The website that you create is served from your local machine, so no other services are required apart from IBM Cloud.

After you complete it, you have a basic understanding of how applications can interface with IBM Cloudant through an IBM Cloudant SDK (in this case, NodeJS).

## Before you begin
{: #prereq-web-based-todo-list}

You need the following implements to complete this tutorial:

1. An IBM Cloudant service instance and some service credentials. You can create the instance and credentials in the IBM Cloudant Dashboard by following the [Getting started with IBM Cloudant](https://cloud.ibm.com/docs/Cloudant?topic=Cloudant-getting-started-with-cloudant&format=markdown) tutorial. Be sure to make a note of the APIKey and URL when you create your service credentials.
2. Ensure you have access to a Mac or Linux™ terminal.
3. Download [Git](https://git-scm.com/downloads).
4. Download [Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).


## Get the code
{: #get-the-code}
{: step}

1. Open your terminal.
2. Type the following command:

   ```sh
   git clone https://github.com/IBM-Cloud/todo-list.git
   cd todo-list
   ```
   {: codeblock}

## Prepare the environment and run the website
{: #prepare-environment}
{: step}

In this step, you install all the code dependencies and environment variables you need to run your website.

1. Ensure you are in the `todo-list` directory.
1. From your terminal, run the following command:

   ```sh
   npm install
   export CLOUDANT_APIKEY="<the_apikey_from_prerequisites>"
   export CLOUDANT_URL="https://<the_url_from_prerequisites>"
   npm run start
   ```
   {: codeblock}

When you run this command for the first time, your code detects that no database exists. The code creates a database for you with some indexes (by date and by tag) and some sample data.
{: note}

## Check out your website!
{: #visit-website}
{: step}

Now, you can check out your website.

1. From your browser, go to `https://localhost:8080`.

   You can see your to-do list with a couple of items on it:

   ![Your to-do list](images/todolist.png){: caption="Your web-based To-Do list" caption-side="bottom"}

1. Add or delete notes, or you can filter by tag by clicking one of the tags.

## Understanding the code
{: #understand-code}

### Database and Index creation
{: #database-index-creation}

The backend script (`server.js`), on start-up, tries to connect to the `todo` database by using the `getDatabaseInformation` method. If it doesn't find it, it attempts to create it by using the `putDatabase` method.

After you create the `todo` database, it creates two indexes by using the `postIndex` method. The first creates an index on the timestamp field (the creation date of your note), so it can retrieve all notes in reverse chronological order. The second index is on the tag and timestamp so that it can filter by tag and return a date-ordered list for a known tag.

### Using the database
{: #using-the-database-todo}

The front end is using the popular [express](https://expressjs.com/) framework to display a webpage and call service endpoints in your backend when you click different actions, like create, delete, and filter.

For example, when your webpage is first loaded, it calls the `GET /todolist` endpoint. The `GET /todolist` endpoint uses the `postFind` method to query the database for all documents (by using the index created after the `todo` database), and then orders the notes by timestamp, and returns them to the front end for display.

Filtering by tag uses the same `postFind` method, but by using the second index, you create and delete notes by using the `postDocument` and `deleteDocument` methods.

## Summary
{: #summary-todo}

IBM Cloudant allows rapid development of web applications, as its HTTP API is modeled by the [Node.js SDK](https://www.npmjs.com/package/@ibm-cloud/cloudant) and is easy to integrate with your own code. You create an IBM Cloudant database and add JSON documents that model your own data. Remember to create secondary indexes to help service your query access patterns so that query performance remains quick as your data volume grows.

If you don't fancy writing JavaScript, we have SDKs for [Java&trade;, Python, and Go](https://cloud.ibm.com/docs/apis/cloudant/cloudant-gen1), plus our [HTTP API](https://cloud.ibm.com/docs/apis/cloudant/cloudant-gen1). Don't forget. The [IBM Cloudant Dashboard](https://cloud.ibm.com/docs/Cloudant?topic=Cloudant-connecting&format=markdown#ibm-cloudant-dashboard) is a great way to explore your databases, create and modify documents, and refine your index and querying skills.

You can find more best practice guidance in our [blog](https://blog.cloudant.com/2019/11/21/Best-and-Worst-Practices.html) and [documentation](https://cloud.ibm.com/docs/services/Cloudant/getting-started.html?format=markdown). For a video guide to IBM Cloudant and its capabilities, see the course in our [learning center](https://cloud.ibm.com/docs/Cloudant?topic=Cloudant-learning-center&format=markdown).