Its time to start adding functionality

Step 1

In the command line run this command: 

ionic generate page Contacts

Open the login folder in assets and replace the two files in 'src/pages/contacts' with contacts.html. contacts.scss
Then replace the code in src/pages/contacts/contacts.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {UserServiceProvider} from '../../providers/user-service/user-service';


/**
 * Generated class for the ContactsPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-contacts',
  templateUrl: 'contacts.html',
})
export class ContactsPage {

  public contacts: any;

  constructor(public nav: NavController, public userService: UserServiceProvider) {
    this.contacts = userService.getAll();
  }

  // on click, go to user timeline
  viewUser(userId) {
    this.nav.push("UserPage", {id: userId})
  }

}

Replace the code in src/app/app.component.ts 

  public pages = [
    {
      title: 'Home',
      icon: 'ios-home-outline',
      count: 0,
      component: HomePage
    },
    {
      title: 'Contacts',
      icon: 'ios-person-outline',
      count: 0,
      component: "ContactsPage"
    },
    {
      title: 'Message',
      icon: 'ios-mail-outline',
      count: 2,
      component: "ChatsPage"
    },
    {
      title: 'Logout',
      icon: 'ios-log-out-outline',
      count: 0,
      component: "LoginPage"
    },

  ];

Step 2

In the command line run this command: 

ionic generate page ChatDetails

Replace all the contents in the src/page/chat-detail folder with the ones in the assets folder

Step 3

In the command line run this command: 

ionic generate page Chats

Replace all the contents in the src/page/chats folder with the ones in the assets folder

Step 3

In the command line run this command: 

ionic generate page User

Replace all the contents in the src/page/user folder with the ones in the assets folder

Step 4

In the command line run this command: 

ionic generate pipe BadWord

Replace all the code in the src/pipes/bad-word.ts 

import { Pipe, PipeTransform } from '@angular/core';

/**
 * Generated class for the BadWordPipe pipe.
 *
 * See https://angular.io/api/core/Pipe for more info on Angular Pipes.
 */
@Pipe({
  name: 'badWord',
})
export class BadWordPipe implements PipeTransform {
  /**
   * Takes a value and makes it lowercase.
   */
  transform(value: string, ...args) {
    return value.replace("Bootay", "Flowers");
  }
}