Project Management - Task Tracking App

VIEW DEPLOYED APP HERE >> https://electric-blue-springbok-fez.cyclic.app/

Screenshots

User stories

Note: For simplicity sake, all roles will be considered fullly authorized. Member = User.

1. As a team member, I want to create a new task card in Trello Kanban board so that I can track my progress and collaborate with my team members.

2. As a team member, I want to be able to add labels to a task card in Trello Kanban board so that I can easily categorize and prioritize my work.

3. As a product owner, I want to add a description and attachments to a task card in Trello Kanban board so that the development team has all the information they need to complete the task.

4. As a project manager, I want to assign a task to a team member on the Trello Kanban board so that I can ensure that everyone knows what they need to work on.

5. As a project manager, I want to be able to set due dates for tasks on the Trello Kanban board so that I can monitor progress and ensure that the project stays on schedule.

6. As a project manager, I want to be able to view the overall progress of the project on the Trello Kanban board so that I can identify areas that may require additional resources or attention.

7. As a team member, I want to be able to move a task card to a different list on the Trello Kanban board so that I can keep track of its progress and prioritize my work.

8. As a team member, I want to receive notifications when a task is assigned to me or when a task card is moved to a list that I am responsible for so that I can stay on top of my work.

9. As a team member, I want to be able to add comments to a task card in Trello Kanban board so that I can communicate with my team members and provide updates on my progress.

10. As a team member, I want to be able to filter tasks on the Trello Kanban board by different criteria, such as due date or priority, so that I can easily find the tasks that I need to work on.

Wireframe

ERD Diagram

ERD Image

Editable ERD Code (Mermaid)

RESTful Routes

BOARD

• NEW: GET /boards/new *
• CREATE: POST /boards
• READ ALL: GET /boards *
• READ ONE: GET /boards/:b *
• UPDATE ONE: PUT /boards/:b
• DELETE: DELETE /boards/:b

LIST

• NEW: GET /boards/:b/lists/new
• CREATE: POST /boards/:b/lists
• UPDATE ONE: PUT /board/:b/lists/:l
• DELETE: DELETE /board/:b/lists/:l

CARD

• NEW: GET /boards/:b/lists/:l/cards/new
• CREATE: POST /boards/:b/lists/:l/cards
• UPDATE ONE: PUT /board/:b/lists/:l/cards/:c
• DELETE: DELETE /board/:b/lists/:l/cards/:c

MEMBERS

• NEW: GET /users/new
• CREATE: POST /users
• READ ONE: GET /users
• UPDATE ONE: PUT /users/:u
• DELETE: DELETE /users/:u

LABEL

• CREATE: POST /boards/:b/labels
• DELETE: DELETE /board/:b/labels/:c

To Do

Deployment

1. Deploy to Render [x]
2. Deploy to Cyclic [x]

Data and Validation

1. Fix the date in the card edit form [x]
2. Validation at view level - html [x]
3. Validation at model level - mongoose [/]
4. Validation at controller level - express [ ]

Power Feature

1. Markdown element [x]
2. S3 + Multer : File upload for board files [x]

Security

1. Google OAuth [x]

UI

1. Resize cards and lists [x]
2. Save their positions [ ]
3. Move cards within the list (sort) [ ]
4. Move cards between 2 lists [ ]

Soft Launch

• Change the labels to simply strings, because it is not expected to have extended functionality
• Explain the zero-md web component
• Date conversion to be done by library as it is more robust and proven. Also need to learn to use Date library. either Day.js or Moment.js

External Libraries and Credits

Zero MD web component is used for displaying markdown content inside the cards.

https://www.npmjs.com/package/zero-md Note: the first line is being styled like a header by default and it starts from h2, h3 onwards.