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

Netlify Demo

🎞️ Preview

📝 Todos

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