jwilferd10/taskmaster-pro

A Kanban Board application that allows users to create tasks and systematically track the process from start to finish through the help of jQuery, Bootstrap, and Moment. This app is mobile friendly!

📅 Taskmaster Pro 📅

Empower Your Team with Effective Task Management

💻 Live Deployment: https://jwilferd10.github.io/taskmaster-pro/

💻 Github Repository: https://github.com/jwilferd10/taskmaster-pro

📂 Table of Contents:

• Preview
• Demo
• Description
• User Story
• Resources Used
• Installation
• Contributors
• Contact Information

📷 Preview:

🎥 Demo:

👋 Description:

Taskmaster Pro is a kanban board application that allows users to create tasks and systematically track the process from start to finish. To create a new task users must provide a description and due date, once the task is saved it'll create an HTML object that can be clicked and dragged between each stage of development. If users wish they can terminate ALL tasks by clicking the 'Delete All Tasks' button, to remove a single task the user can select and drag the task to where it says 'Drop Here To Remove'. Each task created is saved to localStorage.

Taskmaster Pro was brought to life by the use of jQuery for it's quick and easy setup, Bootstrap for it's pre-established and responsive design, and Moment for setting up the task due-date and color coding each task based on due date.

This application was the first time I used jQuery and was a part of my course at the UCLA Coding Bootcamp. However feeling the need to go further and proudly call this app my own, I have extended and improve upon this app by fixing bugs and adding features that weren't apart of the base project.

To further note, the base bootcamp project ended at commit 4e14bd4e5c3b758e0cecc1ca399aba6d81464c3b, anything after are ammendments that I personally made. Specifically my changes targetted the UI of the app, reliability on mobile devices, and finding and fixing bugs. Big thanks to the UCLA Coding Bootcamp for their direction, thank YOU for checking Taskmaster Pro out - I hope you enjoy it and happy coding!

📖 User Story:

AS A team looking to streamline production

• I WANT an application to track my projects progress
• SO THAT I can work in a more streamlined and organized environment

GIVEN I need a Kanban Board

• WHEN I open the app
  • THEN I am presented with sections labelled To Do, In Progress, In Review, and Done
• WHEN I click Add Task
  • THEN I am presented a modal to enter task description and due date
• WHEN I have saved a task
  • THEN a task object appears in the app
• WHEN my project progresses
  • THEN I can drag the task to the next section
• WHEN the tasks due date is today
  • THEN the task object is highlighted red
• WHEN the task is due soon
  • THEN the task object is highlighted yellow
• WHEN the task is no longer needed
  • THEN I can delete the single task
• WHEN the entire project is complete
  • THEN I can delete all tasks.

💾 Resources Used:

Main Resources:

• HTML
• CSS
• Bootstrap 4
• JavaScript
• jQuery
• Moment

💽 Installation and Usage:

Install:

• You can do this by clicking the GREEN button above and you can download it by ZIP or copy the SSH!

Usage:

• Click the 🟢 button labelled 'ADD TASK' it'll reveal a modal
• Add a description to the task
• Add a due date to the task
• Save task by clicking off each text area
• Task Object should appear on TO DO list
• Click/Tap the task object and drag it to desired section
• To delete a singular task drag the specific task object to the 🔴 colored area labelled "DROP HERE TO REMOVE""
• Click the 🔴 button labelled 'DELETE ALL TASKS' to delete all tasks

📎 Contributors

• UCLA Coding Bootcamp (Setup of main project)
• jwilferd10 (Design additions, mobile-setup, bug fixing)

📧 Contact Information:

• jwilferd10

taskmaster-pro's Issues

Add drag/drop capabilities

• Implement dragging within and between columns.
• Implement dragging to trash to delete a task.

Add due date handling

• Add a calendar datepicker for setting due dates.
• Conditionally highlight tasks that are near/overdue.

Create a Preview

This is likely the final update.

For both desktop and mobile versions

• Create stills
• Create gifs
• Adjust readme wherever necessary.

Fix Noteworthy Bugs

• Dragging a task to the bottom of the page creates a never ending gap, unless task is released
• When updating task time, clicking off of the time bugs the style instead of resetting it back to original state.

Add Info Button & Modal

• Explain what to expect with this app via an info panel

Fix LocalStorage Bug

Create a README

• Create a README detailing the app

Miscellaneous Fixes

Small-scale changes.

• Mobile add button has an animation hiccup on-click
• Review CSS and keep DRY wherever possible
• Add comments wherever needed

Add GitHub Logo

• Somewhere in the app add a GitHub logo that links to the repository

Update layout for new statuses

• Add columns for In Progress, In Review, and Done.
• Add additional Bootstrap components.

Adding Mobile Functionality

The app itself works relatively fine on mobile. There's a slight issue that needs to be addressed:

• When users drag the task, add capability to drag the screen up or down

Miscellaneous CSS Additions

Adding some custom CSS Designs should make for a more personalized version of Taskmaster-Pro:

• Add some stylistic flare to the name of the app
• Customize the cards that hold the tasks
• Customize the lorem text for the desktop version.

Customize/improve user experience

• Periodically check if tasks are overdue.
• Implement custom fonts and icons.
• Customize UI colors.

Add Some Modals

Breathe some life into this app by adding modals for certain actions

Add task editing

• Click on a task's description to turn it into an editable field.
• Click on a task's due date to turn it into an editable field.
• Clicking off of either element turns it back into its original form.

Add More Semantic HTML

Update

To follow best web-development practices:

• Add more to title
• Refactor HTML to use more semantic elements
• Add Alt Tags wherever needed