Build a task management app with React and Appwrite.
Final year undergrad with good problem solving skills and an enthu for development.
A task management app built with React Js and Appwrite Cloud for the ongoing hackathon on Hashnode.
Team details:
Gokul Karki - Gokul Karki
Project Description:
MyTask is a task management application that has the following features:
Authenticate users via Email and Password with Appwrite.
Allows authenticated users to create and delete a task using Appwrite databases.
Task can be categorized into severe, medium and low.(Default: severe)
Users can drag and drop one task from any category to another category.
Each task will be assigned a deadline given by the user and user can see the timer to each task.
Subtle UI
Tech Stack
Challenges I Faced
Adding the draggable animation
One of the main task of the app was to let the users drag a task from one category to another. I overcame the challenge by studying the docs of the React DnD module and implemented it wisely.
Public Code Repo
Demo Link
Steps required to build the app:-
The first step was authenticating the users, since only authenticated users can create or delete a task. To maintain the state of the user, React Context was used.
Once authenticated, the second step was to retrieve all the tasks of the authenticated user. To maintain all the tasks of the user, React Context was used.
Once the tasks has been retrieved, it was categorized into severe, medium, low.
The fourth step was to let the users create a task and add a deadline to it. When a user creates a task, the task by default is added to the severe category, which later on the user can change.
The fifth step was to let the users know if a task has already crossed the deadline, in such case the background color of the task changes.
Last step, was to add the User logout functionality, which was pretty easy using the Appwrite logout functionality.