Kanban task management web app

This is a solution to the Kanban task management web app challenge on Frontend Mentor .

Github Live Site URL · Frontend Mentor Solution URL

中文

Table of contents

• Features
• Screenshot
• Built with
• Getting Started
  • Prerequisites
  • Installation
• Acknowledgments
• Author

Features

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Create, read, update, and delete boards and tasks
• Receive form validations when trying to create/edit boards and tasks
• Mark subtasks as complete and move tasks between columns
• Hide/show the board sidebar
• Toggle the theme between light/dark modes
• Allow users to drag and drop
  • boards icon to re-order them in the Sidebar
  • columns to re-order them in a board
  • tasks to change their status and re-order them in a column
  • subtasks to re-order them in the task detail modal
• Keep track of any changes, even after refreshing the browser (use localStorage)
• When creating/editing boards and tasks, show confirmation dialog before leaving the page

⬆︎ BACK TO TOP

Screenshot

Index - Light Mode	Index - Dark Mode
Edit Board	Task Detail
Edit Task

GIF

Index	Task
Form Validation	Leave Alert
Theme Switcher

⬆︎ BACK TO TOP

Built with

• Vue 3: JavaScript Framework
• Vue Router 4: Official router for Vue
• Pinia 2: Store library for Vue
• Nuxt 3: Vue Framework
• SCSS: CSS extension language
• VueUse: Collection of Vue Composition Utilities
• VueDraggablePlus: Drag and drop components
• nuxt-svgo: Nuxt module to load optimized SVG files as Vue components
• Nuxt Google Fonts: Google Fonts module for Nuxt
• @antfu/eslint-config: Code style

⬆︎ BACK TO TOP

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

• Node.js version 18.0.0 or newer

Installation

1. Clone the repo

   git clone https://github.com/yuna9068/kanban-task-management.git

2. Install NPM packages

   npm install

3. Compile and Hot-Reload for Development

   npm run dev

⬆︎ BACK TO TOP

Acknowledgments

• Theme Switcher
  • 實作網頁深色模式及淺色模式的切換 by Mark
  • Dark Theme Switcher in Vue.js by yestellar
• Best-README-Template by othneildrew

⬆︎ BACK TO TOP

Author

• GitHub - Yuna
• Frontend Mentor - @yuna9068

⬆︎ BACK TO TOP