/ionic-angular-todo-app

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

Primary LanguageTypeScriptMIT LicenseMIT

⚡ Ionic Todo App

  • App created using the Ionic framework, using a firebase cloud database to store to-do data.
  • All CRUD operations can be carried out using the Ionic UI.
  • Note: to open web links in a new window use: ctrl+click on link

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

📄 Table of contents

📚 General info

  • Note: Angular imports for Firestore are now from '@angular/fire/compat/firestore'.
  • Todos are passed to/from the firestore database as observables.
  • Todos are now sorted by priority using this.todosCollection = db.collection<Todo>("todos", ref => ref.orderBy("priority")); in todo.service.ts

📷 Screenshots

todo items shown on ionic frontend and Firestore database todo items shown on ionic frontend and Firestore database

📶 Technologies

💾 Setup

  • npm i to install dependencies
  • Add firebase access credentials in environment.ts
  • To start the server on localhost://8100 type: 'ionic serve'
  • npm run build to create build artifacts in www folder

💻 Code Examples

  • It was necessary to clear the setting for the firestore timestampsInSnapshots & add merge: true in app.module.ts to avoid errors - see below.
import { AngularFirestoreModule, FirestoreSettingsToken } from '@angular/fire/firestore';
@NgModule({
  declarations: [AppComponent],
  imports: [
     ...
     AngularFirestoreModule,
     ...
  ],
  providers: [{ provide: FirestoreSettingsToken, useValue: { timestampsInSnapshot: true, merge: true } }],
  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. Add ESLint. Limit priority number to 1 to 10

👏 Inspiration

📁 License

  • This project is licensed under the terms of the MIT license.

✉️ Contact