Quickstart: How to build To-Do App using React & Altogic?
Tags: react, webdev, javascript, tutorial
Published: 2022-06-16 10:44:35



## Introduction

This article will cover how to code simple CRUD operations in a to-do app using [React](https://reactjs.org/), and [Altogic](https://altogic.com/), a Backend-as-a-Service platform using its client library.

You can check out the [demo.](https://altogic-react-todo-app-quickstart.vercel.app/)

## What are the features of the to-do app?

 1. Create a to-do

 2. Update to-do status

 3. Delete a to-do

 4. List all to-do’s

## Set up the backend

## Create App

We can create an app with the [Altogic Designer](https://designer.altogic.com/) fast. To create an app via the **Designer**:

 1. Log in to **Altogic** with your credentials.

 2. Select **New app**.

 3. In the **App Name** field, enter a name for the app.

 4. And click **Next**.

![Define App Credentials](https://cdn-images-1.medium.com/max/2384/0*X2I--OPprgURevkd.png)

 1. Choose **Blank App** template, and click on **Next**.

 2. Click **Create** on the “*Confirm & create”* tab.

![Template Apps](https://cdn-images-1.medium.com/max/2388/0*YXXcM04OnLJ-2XvI.png)

Here, you can customize your subdomain, but not necessarily to do, **Altogic automatically creates one for you,** your `envUrl`. You don’t need to worry if you lost your `envUrl`; you can get it from the **Environments** view of **Designer**.

![Getting the environment URL](https://cdn-images-1.medium.com/max/2800/0*rEGLYvRP7m2wVMW2.png)

After creating our app, we need `envUrl` and `clientKey` to access our app via **Altogic Client Library** to create a web application.

To get the `clientKey` we need to enter the app which we have created before and;

 1. Click on **App Settings** at the left-bottom of the Designer.

 2. And click on the **Client library keys** section.

![Getting the client key](https://cdn-images-1.medium.com/max/2800/0*bY1Y-KsMwkVZ8Sbl.png)

We can create new `clientKey` from that page, but thanks to **Altogic** for creating one `clientKey` automatically for us, so let’s copy the existing `clientKey` from the list.

## Create todo model

 1. Click on **Models** on the left sidebar.

 2. Click **New** on the right of the screen and select **model.**

 3. Set model name as **todo**

 4. Ensure that **Enable timestamps** are selected to store the creation date of the blog post.

 5. Click **Next.**

![Define model properties](https://cdn-images-1.medium.com/max/2384/0*rFbSDC-1W5agsD4n.png)

**Altogic** provides basic **CRUD** endpoints and services with the related model by default when you create a new model. Since we use **Altogic Client Library,** we won’t use these endpoints.

![Default endpoints](https://cdn-images-1.medium.com/max/2384/0*4hZWJQv5N54LcKvE.png)

We created our first model, ”todo”. We have to define the model properties `name`, `dateTime` for the due date, and `status`. Since we created the **todo **model, we should define the **name** property as *Text,* `dateTime` as *Date-time,* and the `status` as *Boolean.*

 1. Click on the **todo** model on the *Models* page.

 2. Click on **New Field** on the right-top of the page.

 3. Select **Text Field→ Text.**

 4. Set model name **name.**

 5. Ensure that the **Required field** is selected.

 6. Click **Create.**

![Create text field](https://cdn-images-1.medium.com/max/2388/0*TDN5D8FJ-MXuKRcJ.png)

 1. Click on **New Field** on the right-top of the page.

 2. Select **Boolean.**

 3. Set model name **status.**

 4. Ensure that the **Required field** is selected.

 5. Set default value expression **false.**

![Create boolean field](https://cdn-images-1.medium.com/max/2384/0*CyVMfkrfJxAslLWy.png)

 1. Click on **New Field** on the right-top of the page.

 2. Select **Date-time.**

 3. Set model name **dateTime.**

 4. Ensure that the **Required field** is selected.

 5. Set default value expression **DATEADD(NOW(),5).**

![Create date-time field](https://cdn-images-1.medium.com/max/2388/0*B5IanJ2TjmD6FDZn.png)

We completed the database design and the model definition on **Altogic** without any coding and complex configuration. Let’s move on to the front-end development.

## Set up the front-end

### Initialize a React app

We can use `create-react-app​` command to initialize a React app:

    npx create-react-app quickstart-todo

Then, install the Altogic package.

    cd quickstart-todo
    npm install altogic

### Set up the environment variables

Environment variables are used to secure your secret keys, reuse them in different places and reduce production mistakes. Create a `.env` file in the root directory of your application, open the file in your editor and paste the following.
{% gist https://gist.github.com/yasink7/2e9a853c4198278a4c3401e81ea6e741.js %}
Replace `YOUR-APPLICATION-ENV-URL` and `YOUR-APPLICATION-CLIENT-KEY` with the `envUrl` and `clientKey` values you retrieved while setting up your backend.

Next, create a file to create the **Altogic Client** instance.

    mkdir helpers
    cd helpers
    touch altogic.js

This creates an `altogic.js` file in the **helpers** directory. Open the file in your editor and paste the following.
{% gist https://gist.github.com/yasink7/4fc0bf0e8bc793187ed79fa93e2f07ff.js %}
Here, you need to enter the `envUrl` and `clientKey`.

Now, install **Tailwind CSS** and create tailwind.config.js

    cd ../
    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p

Add the paths to all of your template files in your `tailwind.config.js` file.
{% gist https://gist.github.com/yasink7/604a6edea1fa21253e72f6de5459e7b2.js %}
Add the following directives to your `index.css` file.
{% gist https://gist.github.com/yasink7/215c8990b69084f05325fd2dc20aea83.js %}
## Development

Since Altogic reduces the complexity of the backend development process, we will code our to-do app with just one main component: `App.js`

**Feature & Function Matching:**

* Create a to-do → `altogic.db.model("todo").create(todoInstance)`

* Update status of the to-do → `altogic.db.model("todo").object(todoId).update({FIELD_NAME:newValue})`

* List all to-do’s → `altogic.db.model("todo").get()`

* Delete a to-do → `altogic.db.model("todo").object(todoId).delete()`

We’ve covered all **Altogic Client Library Functions** that we used in our app. Let’s code it together!
{% gist https://gist.github.com/yasink7/cfed7f61548660860eb20eea163e4e9a.js %}
## Conclusion

This article covered how to implement simple CRUD operations using [React](https://reactjs.org) and [Altogic Client Library](https://clientapi.altogic.com/v1.3.1/modules.html). Thanks to [Altogic](https://altogic.com/), we can build most of the functionality with just a few lines of code.

You can check out the [GitHub repository](https://github.com/altogic/altogic/tree/main/examples/react-quickstart-todo-app) for the rest of the code. You can also clone it and build your app on top of it.