{"id":15098136,"url":"https://github.com/jcardonamde/to-do-list_app","last_synced_at":"2025-04-14T23:08:59.631Z","repository":{"id":256680381,"uuid":"850511631","full_name":"jcardonamde/To-Do-List_App","owner":"jcardonamde","description":"This repository contains the technical test implementation for creating a To-Do List application using Ionic and Angular 18.","archived":false,"fork":false,"pushed_at":"2025-03-24T01:05:40.000Z","size":4454,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-14T23:08:49.688Z","etag":null,"topics":["angular","firebase-hosting","firebase-remote-config","html-css-javascript","ionic","ionic-framework"],"latest_commit_sha":null,"homepage":"https://todo-list-app-4cd44.web.app/home","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jcardonamde.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-01T01:37:17.000Z","updated_at":"2025-03-24T01:05:43.000Z","dependencies_parsed_at":"2025-01-02T02:24:46.289Z","dependency_job_id":"0c22625f-eb11-45c3-a9a9-de2556ae74c4","html_url":"https://github.com/jcardonamde/To-Do-List_App","commit_stats":{"total_commits":11,"total_committers":3,"mean_commits":"3.6666666666666665","dds":0.4545454545454546,"last_synced_commit":"02203d3f39edb1fe3fbac9a88466b4686cca88c0"},"previous_names":["jcardonamde/to-do-list_app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcardonamde%2FTo-Do-List_App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcardonamde%2FTo-Do-List_App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcardonamde%2FTo-Do-List_App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcardonamde%2FTo-Do-List_App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jcardonamde","download_url":"https://codeload.github.com/jcardonamde/To-Do-List_App/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248975315,"owners_count":21192210,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","firebase-hosting","firebase-remote-config","html-css-javascript","ionic","ionic-framework"],"created_at":"2024-09-25T16:43:52.027Z","updated_at":"2025-04-14T23:08:59.625Z","avatar_url":"https://github.com/jcardonamde.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# To-Do List App\n\nThis project is a To-Do List application built with Ionic, Angular, and Firebase. It allows users to create, manage, and complete tasks, as well as organize them into categories. The application also leverages Firebase Remote Config to enable or disable UI features, such as logo visibility.\n\n\n## Features\n- **Task Management**: Create, mark as completed, and delete tasks.\n- **Category Management**: Create, edit, and delete task categories.\n- **Firebase Integration**: Uses Firebase Remote Config to control UI features.\n- **Cross-Platform**: Can be built for Android and iOS using Cordova.\n\n## Prerequisites\n- Node.js (Recommended version: 20.17.0)\n- NPM (Recommended version: 10.8.1)\n- Angular CLI (Recommended version: 18.2.1)\n- Ionic CLI (Recommended version: 7.x)\n- Cordova CLI\n- Android SDK (for Android builds)\n- Xcode (for iOS builds, macOS only)\n  \n\u003cbr\u003e\n\n## Installation\n\n1. **Clone the Repository**\n   ```bash\n   git clone https://github.com/jcardonamde/To-Do-List_App.git\n   cd todo-app\n\n2. **Install Dependencies**\n    ```bash\n    npm install\n\n3. **Configure Firebase**\n- Create a project in Firebase.\n- Copy the Firebase configuration into the following files: src/environments/environment.ts and src/environments/environment.prod.ts\n    ```bash\n    export const environment = {\n        production: false,\n        firebaseConfig: {\n            apiKey: \"TU_API_KEY\",\n            authDomain: \"TU_AUTH_DOMAIN\",\n            projectId: \"TU_PROJECT_ID\",\n            storageBucket: \"TU_STORAGE_BUCKET\",\n            messagingSenderId: \"TU_MESSAGING_SENDER_ID\",\n            appId: \"TU_APP_ID\"\n        }\n    };\n\n4. **Start the Development Server**\n    ```bash\n    ionic serve\n\n\u003cbr\u003e\n    \n## Demo\n\n- Video Demonstration \nWatch an explanation of the app's features: https://www.youtube.com/watch?v=IgBDQb5Y-rQ\n\n- Live Demo\nTry the app deployed on Firebase Hosting: https://todo-list-app-4cd44.web.app/home\n\n\n\u003cbr\u003e\n\n## Screenshots\n\n![App Screenshot](https://docs.google.com/drawings/d/13ZeSU9IMcefwaeJQsXjvFa1TS31F3NNpLACyWR7wdrw/pub?w=960\u0026h=720)\n\n![App Screenshot](https://docs.google.com/drawings/d/1kkUhv_ysM6Kjs32T9BA-DgWHGkKrmRQgyaMJMHHUba4/pub?w=960\u0026h=720)\n\n![App Screenshot](https://docs.google.com/drawings/d/1Sj9j-64syQ1xo6-Eaj35K7Bd1NlRDGimGdkv0TzmZmE/pub?w=928\u0026h=468)\n\n![App Screenshot](https://docs.google.com/drawings/d/1e6IU7F6FL3TD1ICwzyXHN1M5sygv3N3vgtF7ubq6Alc/pub?w=928\u0026h=465)\n\n\u003cbr\u003e\n\n## Deployment\n\n### Building for Android\n\n1. **Add the Android Platform**\n    ```bash\n    ionic cordova platform add android\n    ```\n\n2. **Build the APK**\n    ```bash\n    ionic cordova build android\n    ```\n\n3. **APK Location:** \nThe generated APK will be located in\n```bash\nplatforms/android/app/build/outputs/apk\n```\n\n### Building for iOS\n\n1. **Add the iOS Platform**\n    ```bash\n    ionic cordova platform add ios\n    ```\n\n2. **Build the iOS Project**\n    ```bash\n    ionic cordova build ios\n    ```\n\n3. **Open the Project in Xcode:**\n    ```bash\n    open platforms/ios/YourAppName.xcworkspace\n    ```\n\n4. **Compile and Run**\n- Configure a simulator or a physical device.\n- Build and run the application from Xcode.\n\n\u003cbr\u003e\n\n### Remote Config Setup with Firebase\n\n1. **Access Firebase Remote Config**\n- Go to the Firebase Console.\n- Navigate to Remote Config.\n\n\n2. **Add the enableLogo Parameter**\n- Create a new parameter named enableLogo.\n- Assign it a value of true or false, depending on whether you want to display the logo in the application.\n\n3. **Usage in the Application**\nThe enableLogo value will be used in the application to determine whether the logo is displayed in the UI.\n\n\u003cbr\u003e\n\n### Deploying to Firebase Hosting\n\n1. **Install Firebase CLI**\n  ```bash\n    npm install -g firebase-tools\n  ```\n\n2. **Log in to Firebase**\n  ```bash\n    firebase login\n  ```\n\n3. **Initialize Firebase Hosting**\n  ```bash\n    firebase init\n  ```\n\n4. **Deploy the Application**\n  ```bash\n    firebase deploy\n  ```\n\n\n### Additional Notes\n- If you are using Windows, make sure the Android SDK environment variables are properly configured.\n- On macOS, Xcode must be installed and updated to the latest version for iOS builds.\n\n\u003cbr\u003e\n\n## Running Tests\n\n1. **Run Tests**\n    ```bash\n    npm run test\n    ```\n\n2. **View Test Results**\nTest results will be displayed in the console or in the browser if configured for a graphical environment.\n\n\u003cbr\u003e\n\n## FAQ\n\n#### What were the main challenges in implementing the new features?\nOne of the key challenges was integrating Firebase Remote Config. Ensuring that the remote configuration was activated and applied correctly within the app was crucial, particularly in handling the initial loading process and preventing UI delays.\n\nAnother challenge was managing dependencies and compiling for mobile platforms (Android \u0026 iOS). The migration between Capacitor and Cordova also introduced technical difficulties that required project restructuring to meet the technical test requirements.\n\n\n#### What performance optimization techniques did you apply and why?\n\n* Virtual Scrolling: Implemented in the task list to efficiently handle large datasets without degrading performance. This improves UI smoothness by rendering only visible items in the DOM at any given time.\n\n* Optimized Change Detection: Used ChangeDetectorRef to reduce unnecessary UI updates and manage state changes more efficiently.\n\n\n#### How did you ensure code quality and maintainability?\n\nTo ensure code quality and maintainability, I followed best practices such as separation of concerns, creating dedicated services for task and category management. The Model-View-Service (MVS) design pattern was used to keep the code modular and well-organized.\n\nAdditionally, I implemented unit tests to validate core application functions, helping to catch potential issues before deployment. Documentation and inline comments were also maintained to facilitate future development. \n\n\u003cbr\u003e\n\n## Author\n\n- [@jcardonamde](https://github.com/jcardonamde)\n- [LinkedIn](https://www.linkedin.com/in/jonathan-cardona-calderon-co/)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcardonamde%2Fto-do-list_app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjcardonamde%2Fto-do-list_app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcardonamde%2Fto-do-list_app/lists"}