Todo List App

In this tutorial, we will create a simple TO DO list application to organize tasks using Infinable. We will cover layout design, responsive design, data management and connecting data to UI elements.
Create a TODO List with Infinable

1. Create the layout of the app

We will first create the layout and the visual components before considering connection with data.

We will use the default "Home Page" to display the list of tasks and another page "Create Task" to create a new task. We focus in this tutorial on a mobile layout and we want to make sure that the design adapts to different screen sizes.

2. Define the data model of the app

The data model of an application is where we store all the data used in the app. In our case, we have one data source called "Tasks" with the following fields:

  • Title: (type: plain text) the title of the task that will appear in the list of tasks: e.g. "Meet with Doctor"

  • Done: (type: boolean (Yes/No)) an indicator telling whether the task has been completed or not

We could have used additional data sources like a "User" data source to manage accounts and make sure users see the tasks that they have created and not allow the tasks.

3. Connect data with the UI elements