Quickstart: How to build To-Do App using React & Altogic?

Introduction

This article will cover how to code simple CRUD operations in a to-do app using React, and Altogic, a Backend-as-a-Service platform using its client library.

You can check out the demo.

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

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

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

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

Add the following directives to your index.css file.

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!

Conclusion

This article covered how to implement simple CRUD operations using React and Altogic Client Library. Thanks to Altogic, we can build most of the functionality with just a few lines of code.

You can check out the GitHub repository for the rest of the code. You can also clone it and build your app on top of it.