Ionic Todo App

App created using the Ionic 5 framework, using a firebase cloud database to store to-do data. All CRUD operaations can be carried out using the Ionic UI.

Table of contents

• General info
• Screenshots
• Technologies
• Setup
• Features
• Status
• Inspiration
• Contact

General info

Note: Angular imports for Firestore are now from '@angular/fire/firestore'.

Todos are passed to/from the firestore database as observables.

Screenshots

Technologies

• Ionic/angular v4.4.2

• Ionic v5.7.0

• Angular v8.0.0

• Firebase cloudstore v6.1.1

Setup

• To start the server on localhost://8100 type: 'ionic serve'

Code Examples

• It was necessary to clear the setting for the firestore timestampsInSnapshots in app.module.ts - see below.

import { AngularFirestoreModule, FirestoreSettingsToken } from '@angular/fire/firestore'; @NgModule({ declarations: [AppComponent], imports: [ ... AngularFirestoreModule, ... ], providers: [{ provide: FirestoreSettingsToken, useValue: {} }], bootstrap: [AppComponent] }) export class AppModule { }

Features

CRUD operations:

• Create: Click '+' to create a to-do item.
• Read: Line items are displayed on the home page.
• Update: Click on item line to edit.
• Delete: swipe left and a coloured 'DONE' button appears on the right.

Status & To-do list

• Status: Working.

• To-do: Add more detail/styling to front page.

Inspiration

Project inspired by Simon Grimm´s Youtube video 'How to Create a Simple Ionic 4 App with Firebase and AngularFire'

Contact

Repo created by ABateman - feel free to contact me!