This template was generated using create-vue, plus extra configuration for Tailwind CSS.

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

VS Code Setup for Tailwind

To avoid warnings about unknown @ rules like @apply, @layer, or @tailwind, add the following to your VS Code workspace settings:

1. Open (or create) .vscode/settings.json in the project root.
2. Add the following content:

{
  "css.lint.unknownAtRules": "ignore",
  "scss.lint.unknownAtRules": "ignore",
  "less.lint.unknownAtRules": "ignore"
}

NOTES

This was a really fun challenge! I got a little carried away in some of the details 😅 and I could spend a lot more time getting even more carried away, so I'll submit it now with some extra notes below on what I would have continued with!

Future Improvements

Explore the following:

• User feedback for empty tasks: Provide validation or feedback when a user attempts to add a task without a description.
• Editing behavior: Prevent or handle scenarios where a user edits a task and leaves the description empty.
• Task status and urgency: Evaluate whether toggling a task’s isDone status or editing it should reset the isTaskUrgent flag and/or update the created date.
• Category selection: Determine whether to use a default category (e.g., "Holiday") or include a placeholder option in the category selector, disabling the save action until a category is selected?
• Moving tasks between categories: Drag and drop seemed like a good solution without having to think about the user flow too much
• Bigger cleanup and create more reusable components:
• Comprehensive testing: Implement thorough tests using Vitest to cover both core functionality and edge cases.