A simple kanban board app built with React, TypeScript, and Vite.

npm install # install deps
npm run dev

• Standard Board features:
  • List/Create boards
  • Add column
  • Move column (DnD)
  • Rename column
  • Delete empty column
  • Create card
  • Move card (DnD)
  • Open card
  • Update card details (name, description, status, archive)
• Testing:
  • Unit tests
  • E2E tests (Cypress test)
  • Graceful error handling (Error boundary with message)
• Other features:
  • Multiple boards
  • i18n
  • More fields
• PWA:
  • Install button (can install on desktop and mobile. Netlify deploy for testing)
  • Persistted data to local storage
  • Push notification after creating card (notification sent locally, not remote push notification)
• Performance:
  • Windowing using react-window for cards in column
  • Code splitting (lazy loading react-router pages)
• Design
  • RWD (not perfect but works looks okay on small devices)
  • Show description when list is empty (when boards list is empty)
  • 404 page
• UX
  • Auto focus on initial state (auto focus input when adding new items via dialogs)
  • Input validation (when adding new items name is required/validated)

Board data is stored in individual local storage entries. Cards in column are shown within a virtual list (react-window).

Run development server and open Cypress App:

npm run dev
npm run cypress:open

• Select E2E Testing in the Cypress App
• Select Chrome (perhaps other browsers work as well)
• Click Start E2E Testing in Chrome
• Click on bbboard.cy.js to run the e2e test

Run e2e test from command line:

npm run dev
npm run test

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    project: ["./tsconfig.json", "./tsconfig.node.json"],
    tsconfigRootDir: __dirname,
  },
};

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list