TaskEase - A Convenient Task Management App: Appwrite Hashnode Hackathon

Team Details

I, DEVYANK SHAW successfully built this project entirely by myself.

Description of Project

TaskEase is a user-friendly task management app designed to simplify and streamline day-to-day task organization. With TaskEase, users can effortlessly create, update, and delete tasks while enjoying a range of helpful features.

1. Task Creation and Management:

   • Users can easily create new tasks, specifying task names and any additional remarks for clarity.

   • Each task can be assigned a status, including options such as Not Started, In Progress, Under Review, or Completed.

   • Tasks can have set deadlines, allowing users to prioritize their work effectively.

   • The importance of tasks can be indicated, ensuring users stay focused on critical assignments.

2. Visual Organization:

   • Tasks are visually organized with appropriate color combinations based on their status, enabling users to quickly identify the state of each task.

   • At-a-glance icons are provided to represent the status, deadline, and importance of tasks, aiding efficient task management.

3. Search and Filter Functionality:

   • TaskEase offers a search feature, that allows users to find specific tasks by their names.

   • Users can filter tasks based on their status, helping them view and manage tasks based on their progress.

4. Seamless Mobile and Web Integration:

   • Mobile users can log in to TaskEase using their mobile numbers for authentication, ensuring secure access.

   • Web users can enjoy automatic authentication via Mobile-to-Web Cross Login Using QR, eliminating the need to repeat the authentication process from mobile to web.

   • Users can carry out the same task operations on the web as they would on mobile, providing a hassle-free experience and increasing productivity.

5. Undo Deletion Capability:

   • TaskEase includes an undo feature for task deletions, allowing users to restore accidentally deleted tasks, reducing the risk of data loss, and providing peace of mind.

With TaskEase, task management becomes effortless and efficient, empowering users to stay organized, meet deadlines, and boost productivity.

Tech Stack

• Flutter (Android, IOS, Web) - Build the app for all three platforms but have been tested for Android and Web only

• Firebase - Mainly used to set up FCM push notifications for cross-login mobile to web using QR and deploy flutter web app using hosting

  • Cloud Messaging - Server Side(Node.js)

  • Hosting

• Appwrite Cloud - The main backend as a service platform used to store and modify tasks, provide authentication, and trigger FCM push notifications via cloud function.

  • Authentication (Phone)

  • Database

  • Cloud Functions - Node.js

Challenges Faced

• Mobile-to-Web Cross Login Using QR Code

  There are mainly two ways to communicate between devices:

  • Socket Connection (Messaging Channel)

  • Push Notification (FCM)

The below steps are generally followed:

1. Web application makes a request to the server to generate a QR code

2. Server generates a QR code with an encoded unique value and sends a response to the web app. In the case of socket connection, it will be the name of the channel, and in case of push notification, it will be the registration token

3. The web app downloads the generated QR code and displays it on the web page

   • For socket connection, the web app connects to the messaging channel (Got from step 2) and waits for a message

   • For push notification, the web app just waits for a notification

4. On the mobile app, a user logs in with their phone number and otp. As a result of the login, the Android app receives a User-Token or JSON Web Token (JWT), which uniquely identifies the user and his/her session.

5. The user using the same mobile app scans the QR code from the web page screen

   • For socket connection, receives the messaging channel, and sends the user-token into the channel.

   • For push notification, receives the registration/device token, and sends the user-token to the scanned web device via the above token.

6. The web application receives the message which contains the user-token. The token can be used for the API calls made in the web app as it now will carry the user’s identity.

   I have chosen the push notification way as there were available resources and it's free to use. Now the major challenge was to setup FCM so that the devices will able to send & receive notifications to and fro. I have planned the below approach to setup, implement and test push notifications:

   • Trigger using my local system - Used Node.js for FCM server-side logic and setup FCM for mobile & web to be able to send & receive notifications. Once the test was successful locally it was ready for cloud function deployment.

   • Trigger using the Appwrite cloud function by deploying the same - Used Node.js for cloud function server-side logic. Here I faced a challenge, FCM was not triggering after deployment. But once I reached out to Appwrite team via Discord, they helped me identify where I was doing wrong and provide the solution early. The payload that I was sending to the cloud function was not correct and the documentation also had some typos which they will rectify in the next version of appwrite cloud.

• Composite Index with Single Index

  On only creating a composite index, the query will throw an error. In order to get working you also need to create single indexes for each attribute.

Public Code Repo

Github Repository Link

Website Link

Mobile APK Link

Demo Link

Youtube Demo Link