The Task Management App by AWS Amplify

What is this?

I'm developing a task management web app with AWS Amplify.
This app has two main functions which are a Kanban(TODO) board and a Gantt chart.

App URL https://dev.d4j503n0yjatm.amplifyapp.com/
This app is still under development. Please DO NOT provide sensitive information such as personal data. Additionally, any data that has been registered may be deleted or modified without prior notice. Thank you for your understanding.

GitHub Repository

Features

• Projects

  • You can create multiple projects and manage them.

  • Each project can have multiple users.

• Tasks

  • You can create many tasks on each project.

  • You can assign multiple users to each task.

  • Each task has a status, a priority.

  • Each task can have multiple attachment files. Only users belonging to the project can access those files.

• Kanban(TODO) board

  • You can manage tasks on the Kanban(TODO) board. It shows the task's status.

  • 

• Gantt chart

  • You can show a schedule on the Gantt chart

  • You can manage a schedule by adjusting task bars.

  • 

How to use

This app has the self-sign-up function by AWS Amplify with Cognito. You can create your account on the first page.

On the second page, you can create your project.

This is the project page. Some buttons are not implemented, so it can't work properly yet.

But you can invite(add) other users to your project. Click the invite button, and input user ID.

.You can see the User ID on the profile page. The link is the top right corner profile icon's menu. For now, if you want to invite other users, you need to ask users to send you their user ID. (I'll develop a better invitation flow later.)

On the Kanban page, you can create/update/delete tasks. Also, you can sort tasks and change task status with drag and drop between status lanes.

On the Gantt page, you can manage the project schedule. Only tasks have start/end dates are shown in this view.

You can set your day off on the user setting page from the project page > Users > Edit.

.The Gantt chart considers this day off.

Motivation

I've wanted to develop a task management app for years. Because I can't find one which has functions I want to use for free. I'm a freelancer programmer / CG artist. My business is not so big so, I want to avoid paying for management tools as much as possible.

I have been wanting to make my ideal task management app for several years and even tried to develop it once. But, I gave up doing this because of several reasons. One reason was an infra cost. But now, if I use AWS Amplify, I can suppress infra cost.
This is the commit log I made before. At that time I tried to use Django. But I switched it to AWS Amplify now. (Of cause I don't use any resources I made before for this hackathon.)

How I developed it

I'm using these technical stacks below.

• AWS Amplify / AppSync

• Typescript

• Vue.js

• Bluma

Positive Aspects

Front-end component

I used the front-end component. But I would like to use Vue.js. So I can use this component for only the sign-up/sign-in component. I'm looking forward to using this component for other elements in the future.

Storage component

Storage component for a user's profile avatar image and attachment files on tasks.

Days counting

A taskbar on the ToDo board shows work days and total days. A 'work day' is not a 'man day'. It means days which you can work actually. In this app, you can set your day off. This taskbar considers your day off, weekend and holidays.

This function is not big, but it helps me so much! I'm a freelance. So my day offs are very random. I had to count days in my head when I use other Gantt chart apps always.

The day has the color blue means Saturday, red is Sunday and yellow is the user's day off. There is a popup that has a days counter.

Multi tenants

This app is the multi-tenants(projects). The project's resources can be accessed by users are belong to the project. This access is controlled by extended resolvers.

File sharing

AWS Amplify has the Storage component. It can set an access level for each file. There are 'public', 'protected' and 'private'. 'public' and 'protected' allow everyone to see a file. 'private' allows only an owner to see a file. These functions are not enough for attachment files on a task. Only users belonging to the project should be able to read those files. I needed a new strategy.

So I developed it like below.

• Create file information in the file management table with GraphQL query. After this query, you can get the file id.

• Then upload the file with the file ID. After the file is stored, I can get the S3 key by the S3 trigger. S3 trigger updates the file management table. It updates the S3 key by file id.

• Only project users can see a file list by GraphQL API.

• When a project's users download these files, it uses the Lambda function. Users call this Lambda function with a Cognito access token and the file ID. The function authorizes the token, then gets a file with a file ID by the S3 SDK library. After this, the function encodes a file with base64 and returns this data to a client.

Because of this base64 encoded download logic, I compromised a file size. I think it should be a small size. If some users want to use more big size of files, I will design another system with an additional fee. I think that system needs the project's dedicated storage.

Fixing AWS Amplify CLI bugs

While I'm developing this app, I encountered two bugs in AWS Amplify CLI.
I struggled to develop this app with these bugs. I couldn't stand it. So I decided to fix them by myself.

Since I've made the effort, I've submitted these fixes as Pull Request to the official AWS Amplify Cli repository. I hope it will be merged soon.

These are the Pull Requests and Issues links that I made.

https://github.com/aws-amplify/amplify-cli/pull/12940
https://github.com/aws-amplify/amplify-category-api/issues/1659

https://github.com/aws-amplify/amplify-cli/pull/12906
https://github.com/aws-amplify/amplify-category-api/issues/1646

Low cost

I started to develop this app at the beginning of this month(July 2023). Despite using AWS Amplify for one month, Its cost is about only 1$!! It is amazing.

To be continued

I manage this app development tasks with this app now. I will continue to develop toward completion.