- Introduction
- Features
- Upcoming new features
- Mobile responsiveness
- Installation
- Project status
- Languages and tools
TaskMaster is a simple to-do-list and notes taking app. I initially created this project to apply what I learned on AngularJS for creating Single Page Applications. I has simple functionalities such as creating a task with a deadline, taking notes and you can customize it's card appearance by changing it's color. It also has an admin dashboard for admin user to user management and visibility to all tasks and notes.
Now, let's get an quick run through on it's built.
-
For the Frontend, I used AngularJS because I wanted to explore other JavaScript frameworks. As you may notice, the color scheme of the user interface is not what we commonly see on web applications. The reason is that I attempted to implement the new design trend which is Neobrutalism or Neu brutalism, which is currently being adopted by popular sites such as Figma, Gumroad and NFT websites. This project is somewhat experimental for me, which is why I decided to incorporate it into my web application as well.
-
For the backend, I built a REST API using Django Rest Framework to facilitate data transfer between the backend and frontend.
-
Login - for the login page, I use bootstrap components. For the backend validations it determines if the username or password is incorrect then it will show an error message.
-
Register - for the sign up page, I also use bootstrap components. The following are the backend validations, checks if the username is already taken or already existing in the database, checks if the email provided is valid, validates if the password and confirm password match and all fields are required.
-
View all task - The authenticated user can view all his/her created task and can modify them using the action buttons on the bottom, the user will also be notified of the overdue task since an overdue badge should appear on the top right corner of the task card.
-
View specific task - The authenticated user can view all the details of a single task by click the more details button of the action buttons.
-
Create task - Creating a task only requires a title, description, color and a deadline. The following are the validations, checks if the title is already taken or already existing in the database, checks if the deadline provided is in the past.
-
Update task - For updating a task, an authenticated user can edit any fields that he/she wants to modify, however before doing so the edit button should be click first so that the fields and save button will be enabled. The following are the validations, checks if the taskId is existing and if the updated title is the same with other existing tasks.
-
Delete task - Deleting a task is just easy, the authenticated user just need to click the delete button of the task to be deleted then a confirmation modal will appear before proceeding on deletion.
-
Archive task - The authenticated user can also archive a task by simply clicking the archive button of the task to be archived then a confirmation modal will appear before proceeding on archiving, once done the archive button will be replaced with activate button.
-
Activate task - The authenticated user can also activate a task by simply clicking the activate button of the task to be activated then a confirmation modal will appear before proceeding on activating, once done the activate button will be replaced with archive button.
-
View all note - The authenticated user can view all his/her created notes and can modify them using the action buttons on the bottom.
-
View specific note - The authenticated user can view all the details of a single note by click the more details button of the action buttons.
-
Create a note - Creating a note only requires a title, content and color. For the validation it checks if the title is already taken or already existing in the database.
-
Update note - For updating a note, an authenticated user can edit any fields that he/she wants to modify, however before doing so the edit button should be click first so that the fields and save button will be enabled. The following are the validations, checks if the noteId is existing and if the updated title is the same with other existing note.
-
Delete note - Deleting a note is just easy, the authenticated user just need to click the delete button of the note to be deleted then a confirmation modal will appear before proceeding on deletion.
-
Admin dashboard - besides from the normal user, an admin can login to the app and manage users and view all tasks and notes.
-
View all users - admin can view all users registered to the application.
-
Set user as admin - admin has the choice to pick a normal user and provide admin privileges to it.
-
Set as normal user - admin can also revoke admin privileges and revert a user back to a normal user.
-
-
View all tasks - admin has a read only access to all created tasks of all users.
-
View all notes - admin has a read only access to all created notes of all users.
-
I am planning to make the Task and Note card to be in a drag and drop behavior so that arranging and sorting will be easy. Also, deleting a task/note will be easy when dragging it to a trash bin.
TaskMaster is also responsive on various screen sizes such as mobile, tablets, laptops and desktop screens. I followed the bootstrap breakpoints to make the frontend responsive on the said screen sizes.
Here are some snapshots.
- Mobile Screen size (576px)
Click to expand
- Medium Screen size (768px)
Click to expand
- Large Screen size (992px)
Click to expand
If you want to checkout the code and install it on your local machine you may clone my repo by simply running this command.
Then you may use the LiveServer VS code extension to run the index.html to your local server
The page will reload when you make changes.
You may also see any lint errors in the console.
As of now, I'm taking a break on development since I am also going to be busy on my day job. But please feel free to check the code and let me know if you find any bugs or potential new features.
