Trello Board with Nuxt 3

Trello (kanban) board clone implemented in TypeScript with Nuxt 3.

Features

• Kanban board with columns, cards, and full drag-and-drop support.
• Responsive UI.
• Create as many boards as you wish.
• Mark cards as "done" or "favorite".
• Table view.
• Search modal.
• Data stored on backend in MongoDB.
• User authentication.
• File uploads.
• Attach uploaded files to cards.

Check out current version of the app at http://boards.hazadus.ru

See Issues tab for all planned features.

Controls

• tab: cycle columns and cards.
• space: mark card as completed.
• enter: mark card as starred.
• backspace: delete card.
• Ctrl (Cmd) + /: search cards.

Frameworks, modules and libraries used

• Nuxt as frontend and backend.
• VueUse
• Backend:
  • Mongoose: site / repo - cool ORM for MongoDB.
  • Joi: The most powerful schema description language and data validator for JavaScript.
  • bcrypt: A library to help you hash passwords.
  • multer: node.js middleware for handling multipart/form-data, which is primarily used for uploading files. It is written on top of busboy for maximum efficiency.
• State Management:
  • Pinia | Pinia Nuxt Module. If you encounter problems installing Pinia, try npm i pinia -f (reference).
• UI:
  • Tailwind CSS
    • Headless UI
    • Flowbite – Tailwind components
  • Vuedraggable, based on Sortable.js
  • Nuxt Icon Module
    • Icons
  • vue-toastification
  • vue3-easy-data-table: Docs
• Forms:
  • vee-validate

Starting the project on your own

All commands below are supposed to be executed from repo directory.

Using Docker Compose

• Clone the repo
• Install Docker, or Docker Desktop, if you don't have it.
• Run docker compose up
• Open app in the browser at http://localhost

Running in development mode

• Clone the repo
• Install dependencies with npm install --force (force if you get an error about Pinia).
• Add MongoDB URI to .env file

# .env example
MONGO_DB_ADDRESS=mongodb://localhost:27017/board
UPLOAD_DIR="./public/uploads/"

• Install Docker, or Docker Desktop, if you don't have it.
• Run docker compose up in one terminal tab to get MongoDB up and running.
• Run npm run dev in other terminal tab to have auto updates in browser window.
• Open app in the browser at http://localhost:3000
• Work with the code at your pleasure!

Recommended VSCode plugins

• Volar
  • Disable built-in TypeScript plugin for project's workspace
• Tailwind CSS Intellisense
• Iconify Intellisense by Antfu

Known issues

Quick reminder on what to improve later.

• Focus reset from task after toggling completed, favorite status.

Notes

Stuff I learned while working on this project.

• Run with Node18. Node19 throws an error Cannot start nuxt: The "name" argument must be specified.
• Downgraded Node version to 18 because of this error (reference).
• Dockerfile.dev made for dev mode, Dockerfile is somewhat "prod" version.
• Nuxt differences with plain Vue3:
  • You don't have to import components, functions from VueUse, stuff like ref(), etc.
  • composables directory content is also auto-imported.
• MongoDB preserves order of the items in arrays. So, to reorder tasks or columns, we just need to reorder array items, and save updated array in MongoDB document!
• z-index is canceled by setting transform(rotate)
  • Solution: Managing Z-Index In A Component-Based Web Application

References

• Что такое kanban-доска?
• Build a Drag-and-Drop Trello Board with Vue.js
• Deploying Nuxt Static Site to Github Pages with GitHub Actions
• Nuxt 3 Server Routes CRUD w/ MongoDB
• HeadlessUI - Menu
• HeadlessUI - Dialog (Modal)
• HeadlessUI - Transition
• Managing Z-Index In A Component-Based Web Application
• A easy-to-use data table component made with Vue.js 3.x
• File uploads in Nuxt 3 using Server API Routes
• Node.js - fs.unlink(path, callback)
• Issue with UTF-8 characters in filename
• Nuxt3: Unable to serve static files after build
• Populate nested array in Mongoose
• Nuxt 3 Sentry integration

Repo Activity