Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tech-andgar/ionic-angular-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.
https://github.com/tech-andgar/ionic-angular-todo-app
angular ionic ionic-framework todo
Last synced: 25 days ago
JSON representation
📋 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.
- Host: GitHub
- URL: https://github.com/tech-andgar/ionic-angular-todo-app
- Owner: tech-andgar
- Created: 2024-09-07T22:40:20.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-09-09T04:47:38.000Z (5 months ago)
- Last Synced: 2025-01-10T05:16:41.411Z (about 1 month ago)
- Topics: angular, ionic, ionic-framework, todo
- Language: TypeScript
- Homepage:
- Size: 32.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# # :zap: Ionic Todo App
## Overview
This project is a Todo App developed with Ionic, TypeScript, and Angular. It features a robust interface for managing todo items, including creating, reading, updating, and deleting them, as well as performing batch operations and managing resources. The app uses a Firebase cloud database for data storage and the [Ionic framework](https://ionicframework.com/docs) for its UI. The API is designed to be flexible and consistent, supporting various implementations while maintaining a unified interface.
- All CRUD operations can be performed through the Ionic UI.
- **Note:** To open web links in a new window, use _ctrl+click_ on the link.
## :page_facing_up: Table of contents
- [# :zap: Ionic Todo App](#-zap-ionic-todo-app)
- [Overview](#overview)
- [:page\_facing\_up: Table of contents](#page_facing_up-table-of-contents)
- [:cool: Features](#cool-features)
- [📦 Installation Offline](#-installation-offline)
- [:camera: Screenshots](#camera-screenshots)
- [:signal\_strength: Technologies](#signal_strength-technologies)
- [🌳 Project Structure](#-project-structure)
- [:floppy\_disk: Setup / Installation](#floppy_disk-setup--installation)
- [Usage](#usage)
- [Key Components](#key-components)
- [📚 API Reference](#-api-reference)
- [TodosApi](#todosapi)
- [Todo Retrieval Methods](#todo-retrieval-methods)
- [Todo Modification Methods](#todo-modification-methods)
- [Todo Deletion Methods](#todo-deletion-methods)
- [Batch Operations Methods](#batch-operations-methods)
- [Resource Management Methods](#resource-management-methods)
- [:computer: Code Examples - Implementation Details](#computer-code-examples---implementation-details)
- [LocalStorageTodosApi](#localstoragetodosapi)
- [🧪 Testing](#-testing)
- [⚠️ Performance Considerations](#️-performance-considerations)
- [:clipboard: Status \& To-do list](#clipboard-status--to-do-list)
- [Contributing](#contributing)
- [:file\_folder: License](#file_folder-license)
- [:envelope: Contact](#envelope-contact)
## :cool: 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 colored 'DONE' button appears on the right.
- Batch operations (clear completed, complete all)
- Observable-based API for reactive programming
- Local storage persistence
- TypeScript for type safety
- Abstract API design for flexibility in implementation
## 📦 Installation Offline
- [ANDROID APK (UNSIGNED)](./docs/installer/android/)
- [IOS IPA (UNSIGNED)](./docs/installer/ios/)
## :camera: Screenshots
## :signal_strength: Technologies
- [Ionic/angular v8](https://ionicframework.com/)
- [Ionic v8](https://ionicframework.com/)
- [Angular v18](https://angular.io/)
- [Firebase cloudstore v10](https://firebase.google.com/)
## 🌳 Project Structure
```
todo/
├── src
│ ├── app
│ │ ├── app.component.html
│ │ ├── app.component.scss
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ ├── app.routes.ts
│ │ ├── core
│ │ │ ├── domain
│ │ │ │ ├── api
│ │ │ │ │ └── todos_api.ts
│ │ │ │ ├── exceptions
│ │ │ │ │ └── exceptions.ts
│ │ │ │ └── model
│ │ │ │ ├── category.model.ts
│ │ │ │ ├── json_map.ts
│ │ │ │ └── todo.model.ts
│ │ │ ├── language
│ │ │ │ ├── language-switcher.component.ts
│ │ │ │ ├── language.service.ts
│ │ │ │ └── model
│ │ │ │ └── language.model.ts
│ │ │ ├── settings
│ │ │ │ └── settings-dropdown.component.ts
│ │ │ └── theme
│ │ │ ├── theme-switcher.component.ts
│ │ │ └── theme.service.ts
│ │ └── features
│ │ ├── categories
│ │ │ ├── data
│ │ │ │ ├── infrastructure
│ │ │ │ │ └── local-storage-api
│ │ │ │ │ └── local.storage.categories.api.ts
│ │ │ │ └── repository
│ │ │ │ └── categories-repository-impl.ts
│ │ │ ├── domain
│ │ │ │ ├── infrastructure
│ │ │ │ │ └── categories_api.ts
│ │ │ │ └── repository
│ │ │ │ └── categories_repository.ts
│ │ │ └── presentation
│ │ │ └── category-list
│ │ │ ├── category-list.page.ts
│ │ │ └── category-list.service.ts
│ │ ├── home
│ │ │ └── presentation
│ │ │ └── home.page.ts
│ │ └── todos
│ │ ├── data
│ │ │ ├── infrastructure
│ │ │ │ └── local_storage
│ │ │ │ └── local.storage.todos.api.ts
│ │ │ └── repository
│ │ │ └── todos-repository-impl.ts
│ │ ├── domain
│ │ │ └── repository
│ │ │ └── todos_repository.ts
│ │ └── presentation
│ │ ├── components
│ │ │ ├── category-badge.component.ts
│ │ │ ├── category-filter.component.ts
│ │ │ ├── stats
│ │ │ │ ├── stats.component.ts
│ │ │ │ └── stats.service.ts
│ │ │ ├── todo-list-item
│ │ │ │ ├── todo-list-item.component.ts
│ │ │ │ └── todo-list-item.service.ts
│ │ │ ├── todos-overview-filter-button.component.ts
│ │ │ └── todos-overview-options-button.component.ts
│ │ ├── edit-todo
│ │ │ ├── edit-todo.page.ts
│ │ │ └── edit-todo.service.ts
│ │ └── todos-overview
│ │ ├── todos-overview.page.ts
│ │ └── todos-overview.service.ts
│ ├── app.config.ts
│ ├── assets
│ │ ├── i18n
│ │ │ ├── en.json
│ │ │ └── es.json
│ │ ├── icon
│ │ │ └── favicon.png
│ │ └── shapes.svg
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── global.scss
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── test.ts
│ ├── theme
│ │ └── variables.scss
│ └── zone-flags.ts
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json
```
- `todo.model.ts`: Defines the `Todo` interface
- `todos.api.ts`: Contains the abstract `TodosApi` class
- `local-storage-todos.api.ts`: Implements `TodosApi` using local storage
## :floppy_disk: Setup / Installation
1. Clone the repository:
```shell
git clone https://github.com/tech-andgar/todo-api-project.git
```
2. Navigate to the project directory:
```shell
cd todo-api-project
```
3. Install dependencies:
```shell
pnpm i
```
or
```shell
yarn i
```
or
```shell
npm i
```
4. Add firebase access credentials in:
`environment.ts`
5. Run the development server on _localhost://8100_:
``` shell
ionic serve
```
6. Create build artifacts in `www` folder:
``` shell
npm run build
```
## Usage
To use the Todo API in your Angular application, inject the `TodosApi` service into your component or service:
```typescript
import { Component } from '@angular/core';
import { TodosApi } from './path-to-todos-api';
import { Todo } from './path-to-todo-model';
@Component({
selector: 'app-todo-list',
template: '...'
})
export class TodoListComponent {
todos: Todo[] = [];
constructor(private todosApi: TodosApi) {
this.todosApi.getTodos().subscribe(todos => this.todos = todos);
}
addTodo(todo: Todo) {
this.todosApi.saveTodo(todo).subscribe(success => {
if (success) {
console.log('Todo added successfully');
}
});
}
}
```
## Key Components
1. `core/domain/model/todo.model.ts`: Defines the `Todo` interface.
2. `core/api/todos.api.ts`: Abstract class defining the API for managing todos.
3. `data/api/local-storage-todos.api.ts`: Concrete implementation of `TodosApi` using local storage.
4. `features/todo/`: Contains components, services, and module for the todo feature.
## 📚 API Reference
### TodosApi
The `TodosApi` abstract class provides the following methods:
#### Todo Retrieval Methods
- `getTodos(): Observable`
- Provides an Observable of all todos.
- `getTodo(todoId: string): Observable`
- Retrieves a todo by its ID.
#### Todo Modification Methods
- `saveTodo(todo: Todo): Observable`
- Saves a todo. If a todo with the same ID already exists, it will be replaced.
- `saveTodoAt(todo: Todo, index: number | null): Observable`
- Saves a todo at a specified index. If a todo with the same ID already exists, it will be replaced.
#### Todo Deletion Methods
- `deleteTodo(id: string): Observable`
- Deletes the todo with the given ID.
#### Batch Operations Methods
- `clearCompleted(): Observable`
- Deletes all completed todos.
- `completeAll(isCompleted: boolean): Observable`
- Sets the `isCompleted` state of all todos to the given value.
#### Resource Management Methods
- `close(): Observable`
- Closes the API client and frees up any resources.
## :computer: Code Examples - Implementation Details
### LocalStorageTodosApi
The `LocalStorageTodosApi` class implements the `TodosApi` abstract class using browser's local storage for persistence. Key features include:
- Uses `BehaviorSubject` to manage the stream of todos
- Implements all abstract methods from `TodosApi`
- Persists todos to local storage after each operation
- Retrieves todos from local storage on initialization
Example of saving a todo:
```typescript
saveTodo(todo: Todo): Observable {
const todos = [...this.todoStreamController.value];
const todoIndex = todos.findIndex(t => t.id === todo.id);
if (todoIndex >= 0) {
todos[todoIndex] = todo;
} else {
todos.push(todo);
}
this.todoStreamController.next(todos);
localStorage.setItem(LocalStorageTodosApi.kTodosCollectionKey, JSON.stringify(todos));
return this.getTodo(todo.id).pipe(map(todo => !!todo));
}
```
## 🧪 Testing
To run the tests for this project:
```shell
ng test
```
We use Jasmine for unit testing and Karma as the test runner. Key areas to test include:
- Individual CRUD operations
- Batch operations
- Edge cases (e.g., deleting non-existent todos)
- Local storage persistence
## ⚠️ Performance Considerations
- The current implementation loads all todos into memory, which may not be optimal for large datasets.
- Consider implementing pagination or virtual scrolling for better performance with large lists.
- Local storage has limited capacity; for larger applications, consider using IndexedDB or a backend server.
## :clipboard: Status & To-do list
- Status: Working.
- To-do:
- [ ] Implementation Firestore
- [ ] Implementation Feature Flag
- [ ] Testing
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the project
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## :file_folder: License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
## :envelope: Contact
Repo created by [TECH-ANDGAR](https://github.com/tech-andgar), email: