# Building a Todo App

A Todo app is the most basic app that any developer can create to learn the basic concepts of the system. So let's try to create simple Todo app. The basic requirements are -

* Add a new Todo in the system.
* List all Todo's created in the system.

## Prerequisites

This tutorial assumes you have created a new Project in Cosmocloud and successfully connected your database to it. You can run a Free Tier Project for this tutorial.

* [Steps to create a new Project.](https://app.gitbook.com/s/ZCdm9aJ8vkvDIIbg04AL/getting-started/2.-projects)
* [Steps to connect a Database to your Project.](https://app.gitbook.com/s/ZCdm9aJ8vkvDIIbg04AL/getting-started/3.-connect-your-database)

## Let's start building our Todo App

The first thing while building an App on Cosmocloud is to identify the Data Models and create them. For starters, we have only 1 Data Model **Todos** which might have the following schema -

* **id** - The Todo ID.
* **title** - The title of the Todo.
* **description** - The description of the Todo.

## Creating the First Model

To create a new Database Collection model, just navigate to **Application Layer -> DB Models** and click on the **Create** button. Name your model **Todos** and click **Create**.

<figure><img src="https://1493448952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvTMtDI5nM3rZwaURRww4%2Fuploads%2FnQyxCfBXVvHltqbWDcoB%2FScreenshot%202024-05-01%20at%204.41.37%E2%80%AFPM.png?alt=media&#x26;token=84b4be0a-82ed-48b2-b943-df1bf1b5722c" alt=""><figcaption></figcaption></figure>

## Defining the Schema

Once created, now let's start defining our **schema** as below -

<figure><img src="https://1493448952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvTMtDI5nM3rZwaURRww4%2Fuploads%2FqYipnuCy8r4uTznuf87S%2FScreenshot%202024-05-01%20at%204.42.35%E2%80%AFPM.png?alt=media&#x26;token=a0f09c68-f528-4304-b7a1-e55c9b3aa69f" alt=""><figcaption></figcaption></figure>

You would realise that we have not added an ID field. This is because Cosmocloud is powered by MongoDB, and **MongoDB automatically creates an \_id** field for you in your records. You would also see that we have marked these fields as **required** as of now.

{% hint style="info" %}
You can also use the **JSON to Schema** widget to quickly pass a JSON sample record, and Cosmocloud will automatically create the schema for you.
{% endhint %}

When done, click on **Save** button.

## Clicking CRUD APIs Quickly

Once done, now we can start creating our APIs. Navigate to **Application Layer -> APIs** and click on the **Create** button.

### Selecting the API Template

Yes, we can start creating the APIs from scratch and add our customisations as and when we would want that. But to quickly setup the CRUD backbone, we can start using the **CRUD APIs** template. Click on **Browse Templates** and select **CRUD APIs** inside it.

<figure><img src="https://1493448952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvTMtDI5nM3rZwaURRww4%2Fuploads%2FtSkpDhBz86EdCv4qorWe%2FScreenshot%202024-05-01%20at%204.45.11%E2%80%AFPM.png?alt=media&#x26;token=f11f1998-40a3-401d-8d07-bbe5ae4c2392" alt=""><figcaption></figcaption></figure>

### Select the Model for CRUD APIs

Next would be to select the Database Collection model we just created - **Todos** which will tell the system, which collection to create the CRUD APIs for. Selecting this model, click on **Next.**

<figure><img src="https://1493448952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvTMtDI5nM3rZwaURRww4%2Fuploads%2FgyJqpO7WIz7vSjYxc59E%2FScreenshot%202024-05-01%20at%204.45.49%E2%80%AFPM.png?alt=media&#x26;token=bccffbcf-c1be-48b0-9773-1686d678bece" alt=""><figcaption></figcaption></figure>

### Review and Deploy

Once on the last screen, you will be able to Review the APIs and Models Cosmocloud will **automatically create for you** using this template. For now, let's select all the APIs and Models.

<figure><img src="https://1493448952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvTMtDI5nM3rZwaURRww4%2Fuploads%2FplQZvBn4Slm3z10SnDZz%2FScreenshot%202024-05-01%20at%204.46.06%E2%80%AFPM.png?alt=media&#x26;token=7665fe30-beb2-462c-9690-25a39a256b20" alt=""><figcaption></figcaption></figure>

## Testing the Newly Created APIs

As soon as you clicked on **Create** button, Cosmocloud automatically created these APIs as well as deployed the same on Development Environment **instantly**.

> All this is powered using Cosmocloud's [Instant Deployments](https://app.gitbook.com/s/ZCdm9aJ8vkvDIIbg04AL/advanced-guide/performance-considerations/instant-deployments).

Now, let's start by creating our first **Todo**. Open the (POST) **Create API** api we just created. On the details page, you will find the **Deployment endpoint** along with it. Copy this and open **Postman**.

Before calling these APIs, you would need to find your **projectId** and **environmentId** to pass in the Headers. You can find the **Project ID** by clicking on the *Organisation Name* on top lef&#x74;***,*** which will take you to Projects listing page. You can find the Environment ID by navigating to **Application Layer -> Environments** and finding the ID for the *Development* environment. Once done, pass them in Postman like -

<figure><img src="https://1493448952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvTMtDI5nM3rZwaURRww4%2Fuploads%2FLM9iPO1xvRj7oBKiwVHO%2FScreenshot%202024-01-08%20at%2012.37.14%20AM%20(1).jpg?alt=media&#x26;token=22be4f9c-abec-44d6-842e-e9c8e926cd14" alt=""><figcaption></figcaption></figure>

Now, you can try out your API, you would need to pass the Request Body to this POST API which would accept the same schema as you defined in your Database Collection -

<figure><img src="https://1493448952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvTMtDI5nM3rZwaURRww4%2Fuploads%2FwW6t09amaZoqFK700mYH%2FScreenshot%202024-01-08%20at%2012.37.14%20AM.jpg?alt=media&#x26;token=827eea65-4253-4af0-8ca2-976ee26f0f4a" alt=""><figcaption></figcaption></figure>

Once created, you can see that you have the newly created record's ID in the response. Now let's try to list the Todos in our system. Open the **List Todos** API and copy the Development endpoint and paste on Postman. **Don't forget to miss the Headers or converting the request method to GET**.

<figure><img src="https://1493448952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvTMtDI5nM3rZwaURRww4%2Fuploads%2F5V22U1ynd2T5cOIXuyar%2FScreenshot%202024-01-08%20at%2012.40.57%E2%80%AFAM.png?alt=media&#x26;token=a5fa3041-5d38-45b4-99f0-88526e6da367" alt=""><figcaption></figcaption></figure>

## Conclusion

As you can see, we tried to create a basic CRUD app, for creating and listing TODOs. Similarly, you can also try out the **PUT**, **PATCH**, and **DELETE** APIs.

{% hint style="info" %}
Learn more about [customising the business logic](https://tutorials.cosmocloud.io/broken-reference) of these APIs here.
{% endhint %}
