Skip to main content

A React ToDo App using low code API’s of Hypi

Hypi’s low code APIs can be used to develop various kinds of data-driven applications.

Here, let’s look at React ToDo app developed using low code APIs of Hypi. The ToDo App’s front end provides the below functions:

API Set up​

Hypi’s command-line interface facilitates using Hypi APIs with the client application. Check this Hypi CLI guide on how to synchronize Hypi APIs with the client application.

Create Account​

To start using ToDo App, you need to create an Account with Hypi. Provide username, password, and email id to create an account. Authentication takes place using Hypi’s createAccount mutation.

Log in to Account​

After creating the account with Hypi, you can login to ToDo App. Login into the Hypi account using saved credentials. Hypi’s loginByEmail function is used to login into the account and start the session.

Add Task details​

Add task details like task title, person, status and save the data on Hypi’s low code backend. The details are stored in GraphQL data type - ToDos.

type  Todos {
 title: String
 person: String
 date: DateTime
 status: String
}

upsert mutation is used to create the data.

Retrieve the ToDo list​

The list of ToDo tasks gets displayed on the front end. Hypi’s find function is used to retrieve the entered data from ToDos objects.

Edit/Delete task details​

You may edit a task to update the status or other details. Upsert mutation is used to edit the saved ToDo data.

You may delete a task as well. The task gets deleted using the delete function of Hypi.

Important files​

Graphql/queries.js : Consists of graphql queries and mutation

Views/ AddToDOForm.js, Dashboard.js, Login.js, SignUp.js : Consist of implementation of important functions discussed above.

The full code of React ToDo is available on Github. The live application is embedded here. You can fork and use it as a starting point.

https://github.com/hypi-universe/example-apps/tree/main/reactjs/todo/v1

Read More...