https://github.com/jcardonamde/to-do-list_app
This repository contains the technical test implementation for creating a To-Do List application using Ionic and Angular 18.
https://github.com/jcardonamde/to-do-list_app
angular firebase-hosting firebase-remote-config html-css-javascript ionic ionic-framework
Last synced: about 1 year ago
JSON representation
This repository contains the technical test implementation for creating a To-Do List application using Ionic and Angular 18.
- Host: GitHub
- URL: https://github.com/jcardonamde/to-do-list_app
- Owner: jcardonamde
- Created: 2024-09-01T01:37:17.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2025-03-24T01:05:40.000Z (about 1 year ago)
- Last Synced: 2025-04-14T23:08:49.688Z (about 1 year ago)
- Topics: angular, firebase-hosting, firebase-remote-config, html-css-javascript, ionic, ionic-framework
- Language: TypeScript
- Homepage: https://todo-list-app-4cd44.web.app/home
- Size: 4.25 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# To-Do List App
This 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.
## Features
- **Task Management**: Create, mark as completed, and delete tasks.
- **Category Management**: Create, edit, and delete task categories.
- **Firebase Integration**: Uses Firebase Remote Config to control UI features.
- **Cross-Platform**: Can be built for Android and iOS using Cordova.
## Prerequisites
- Node.js (Recommended version: 20.17.0)
- NPM (Recommended version: 10.8.1)
- Angular CLI (Recommended version: 18.2.1)
- Ionic CLI (Recommended version: 7.x)
- Cordova CLI
- Android SDK (for Android builds)
- Xcode (for iOS builds, macOS only)
## Installation
1. **Clone the Repository**
```bash
git clone https://github.com/jcardonamde/To-Do-List_App.git
cd todo-app
2. **Install Dependencies**
```bash
npm install
3. **Configure Firebase**
- Create a project in Firebase.
- Copy the Firebase configuration into the following files: src/environments/environment.ts and src/environments/environment.prod.ts
```bash
export const environment = {
production: false,
firebaseConfig: {
apiKey: "TU_API_KEY",
authDomain: "TU_AUTH_DOMAIN",
projectId: "TU_PROJECT_ID",
storageBucket: "TU_STORAGE_BUCKET",
messagingSenderId: "TU_MESSAGING_SENDER_ID",
appId: "TU_APP_ID"
}
};
4. **Start the Development Server**
```bash
ionic serve
## Demo
- Video Demonstration
Watch an explanation of the app's features: https://www.youtube.com/watch?v=IgBDQb5Y-rQ
- Live Demo
Try the app deployed on Firebase Hosting: https://todo-list-app-4cd44.web.app/home
## Screenshots
## Deployment
### Building for Android
1. **Add the Android Platform**
```bash
ionic cordova platform add android
```
2. **Build the APK**
```bash
ionic cordova build android
```
3. **APK Location:**
The generated APK will be located in
```bash
platforms/android/app/build/outputs/apk
```
### Building for iOS
1. **Add the iOS Platform**
```bash
ionic cordova platform add ios
```
2. **Build the iOS Project**
```bash
ionic cordova build ios
```
3. **Open the Project in Xcode:**
```bash
open platforms/ios/YourAppName.xcworkspace
```
4. **Compile and Run**
- Configure a simulator or a physical device.
- Build and run the application from Xcode.
### Remote Config Setup with Firebase
1. **Access Firebase Remote Config**
- Go to the Firebase Console.
- Navigate to Remote Config.
2. **Add the enableLogo Parameter**
- Create a new parameter named enableLogo.
- Assign it a value of true or false, depending on whether you want to display the logo in the application.
3. **Usage in the Application**
The enableLogo value will be used in the application to determine whether the logo is displayed in the UI.
### Deploying to Firebase Hosting
1. **Install Firebase CLI**
```bash
npm install -g firebase-tools
```
2. **Log in to Firebase**
```bash
firebase login
```
3. **Initialize Firebase Hosting**
```bash
firebase init
```
4. **Deploy the Application**
```bash
firebase deploy
```
### Additional Notes
- If you are using Windows, make sure the Android SDK environment variables are properly configured.
- On macOS, Xcode must be installed and updated to the latest version for iOS builds.
## Running Tests
1. **Run Tests**
```bash
npm run test
```
2. **View Test Results**
Test results will be displayed in the console or in the browser if configured for a graphical environment.
## FAQ
#### What were the main challenges in implementing the new features?
One 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.
Another challenge was managing dependencies and compiling for mobile platforms (Android & iOS). The migration between Capacitor and Cordova also introduced technical difficulties that required project restructuring to meet the technical test requirements.
#### What performance optimization techniques did you apply and why?
* 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.
* Optimized Change Detection: Used ChangeDetectorRef to reduce unnecessary UI updates and manage state changes more efficiently.
#### How did you ensure code quality and maintainability?
To 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.
Additionally, 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.
## Author
- [@jcardonamde](https://github.com/jcardonamde)
- [LinkedIn](https://www.linkedin.com/in/jonathan-cardona-calderon-co/)