Skip to content

trombonist76/vue-task-management

Repository files navigation

Kanban Task Management Web App - Frontend Mentor

📚 Introduction

This repo contains the Kanban task management web app solution on the frontendmentor.io.

⚒️ Used Technologies

  • Vue3 Composition API
  • Pinia
  • Tailwindcss
  • vuedraggable
  • Vite
  • Sass

💼 Task

  1. ✔️ View the optimal layout for the app depending on their device's screen size.
  2. ✔️ See hover states for all interactive elements on the page.
  3. ✔️ Create, read, update, and delete boards and tasks.
  4. ✔️ Receive form validations when trying to create/edit boards and tasks.
  5. ✔️ Mark subtasks as complete and move tasks between columns.
  6. ✔️ Hide/show the board sidebar.
  7. ✔️ Toggle the theme between light/dark modes.
  8. ✔️ Bonus: Allow users to drag and drop tasks to change their status and re-order them in a column.
  9. Bonus: Keep track of any changes, even after refreshing the browser (localStorage could be used for this if you're not building out a full-stack app).
  10. Bonus: Build this project as a full-stack application

In addition to the assigned tasks, the following features have been added

  1. ✔️ Added field color selection feature for all boards.

📺 DEMO


🎞️ Preview

Preview-1 Preview-2


📝 Todos

  1. ✔️ Use localstorage for save board and fields data
  2. Use firestore database