DEV Community

Cover image for A really cool TODO app tutorial
Thomas Hansen
Thomas Hansen

Posted on • Originally published at aista.com

A really cool TODO app tutorial

Most TODO tutorials you find online are simple. In this TODO app tutorial we will create a rich TODO app, with several database tables, business logic, multiple users, and authentication and authorisation. Most importantly of course is that we will create our TODO app in 5 minutes. Above is a screenshot of what we will be creating.

As you can see in the above screenshot, we’ve got TODO items associated with users, we’ve got due dates, multiple components, in addition to all CRUD verbs. The app isn’t as complex or rich as ClickUp, but it’s definitely way beyond what most other TODO app tutorials will teach you. The database we will be creating our app around can be found below.

CREATE TABLE status(
  status_id integer not null primary key autoincrement,
  name text not null,
  description text
);

CREATE TABLE todo(
  todo_id integer not null primary key autoincrement,
  title text not null,
  created timestamp not null default current_timestamp,
  description text,
  username text not null,
  due_date timestamp,
  status integer not null references status(status_id)
);
Enter fullscreen mode Exit fullscreen mode

In the above database DDL SQL you can see that each todo item belongs to a status item. This concept is called a “foreign key” and implies that all your todo items belongs to a status item. This is the part that says “references” in the above script. If you want to reproduce the app, you can sign up for a LowCode CRUD cloudlet here. Once you’ve got a backend cloudlet, you’ll need to create a new SQLite database in it. Below is a screenshot of how to create your database.

Creating your TODO app database

Make sure you name your database todo, and paste in the above SQL into your SQL editor, and click the “Execute” button. When the SQL is done executing, you’ll need to click the “Refresh” button to purge your server side cache. Afterwards you can select your todo database. This should show you something resembling the following.

How your TODO app database looks like

When you are done creating the above database you can go to the CRUD generator and generate a CRUD API. At this point you’ll want to watch the following video to understand some crucial points about how to generate your CRUD API. You’d want to generate two sets of CRUD API endpoints for your todo table for instance, since you want to apply different “business logic” for different parts of your app. This is because we only want “admin” users to be able to create items for others. In addition we only want “guest” users to be able to edit the status of their own items, and not edit other users’ items at all.

As you can see in the above video, we applied several different settings for our TODO app. We also showed you how to download the generated Angular code and edit it locally using Visual Studio Code. If you have VS Code locally installed, and NodeJS installed, you can already start playing with the generated Angular code.

Notice, we only allow for creating one free demo cloudlet of each type in our hub. If you already have another Angular frontend cloudlet deployed, you’ll need to delete this cloudlet to be allowed to create another free demo cloudlet. As you generate your frontend, you should also only generate components for your TODO app related components in case you’ve already got other API endpoints in your backend. This makes the app simpler to understand and navigate.

Top comments (0)