Simple starter kit for building realistic app with Ionic 2

At the point I'm writing this article, Ionic 2 released its RC1 and is going to official release. This article is a continue of my series: Learn Ionic 2 with Authentication by JWT, Ionic 2: FormBuilder and Validator, Build JWT authentication server with Node.js, Express and MySQL. It put all these articles into a Todos System with 2 parts:

• Server: an enhancement of previous server in Build JWT authentication server with Node.js, Express and MySQL by adding new todos API allowing to get, create new and delete todos based on user role authentication. You can clone / download the source code of this server on my GitHub: https://github.com/vnheros/nodejs-mysql-jwt-auth
• App: a todo app which allows user login or sign up new account. After login successfully, it will displays a list of public todos or todos of user. User can add new todo or delete an existing todo. You can clone / download the source code of this server on my GitHub (tested with Ionic 2 RC1): https://github.com/vnheros/ionic2-todos-example

I think this is a simple starter kit for you starting your real apps with Ionic 2. Below are important things in this starter kit which I didn't mention in my GitHub.

1. My SQL DB
There are 2 tables: users and todos having script as below:

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(20) NOT NULL,
  `password` varchar(20) NOT NULL,
  `email` varchar(50) NOT NULL,
  `role` varchar(20) DEFAULT 'Regitered',
  PRIMARY KEY (`id`,`username`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

CREATE TABLE `todos` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `task` varchar(150) NOT NULL,
  `deadline` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  `public` tinyint(1) NOT NULL DEFAULT '0',
  `completed` tinyint(1) DEFAULT '0',
  `username` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8;

2. Design of todos app
Below are screens of this app:

The Welcome page containing Ionic login will appear first, then it will check if user is logged in or not by checking id_token stored in local storage. If user logged in, it will move to Todos List page which presents public todos and todos of the user. If user is not logged in yet, it will navigate to Todos Login page for signing in or signing up. Todos List has 2 buttons, one on top for logging out and one in bottom for adding new todo.

3. Step to generate source code for the app
For Ionic 2 RC1, you should install its app-script to avoid some issues when running the app (read this post for more info).

Install @ionic/app-scripts and update your ionic 2:
#npm install @ionic/app-scripts@latest --save-dev
#npm install -g ionic

Generate providers then replace by the source code from my GitHub:
#ionic g provider Auth
#ionic g provider Todos

Generate pages then replace by the source code from my GitHub:
#ionic g page Welcome
#ionic g page Login
#ionic g page Signup
#ionic g page NewTodo

Add folder helpers then add file jwt-helper.ts (used to parse JWT in the app), add folder validators and add file password.ts (used to validate a password input when signing up). You can copy them from my GitHub.

From Ionic RCx, you will need to add pages and providers into app/app.module.ts to use them in your app. See my file on GitHub for example.

There are some another things in the source code which you can discover easily in the source code.
That's for to day and wish you have fun Halloween. Remember turn on the light.
Any comment is welcome.