Kanban Board App

A flexible, multi-board kanban application built for Val Town with React, DaisyUI, and SQLite.

• Create unlimited kanban boards
• Each board can have custom columns with arbitrary names and colors
• Board search and filtering
• Board descriptions and metadata

• Add/edit/delete columns dynamically
• Custom column colors and names
• Automatic position management
• Visual column indicators

• Create, edit, and delete tasks
• Task priorities (Low, Medium, High) with visual indicators
• Due dates with smart formatting
• Task descriptions and metadata
• Visual priority borders on task cards

• Built with DaisyUI components
• 25+ built-in themes (light, dark, cupcake, cyberpunk, etc.)
• Responsive design for all screen sizes
• Smooth animations and transitions
• Intuitive drag-and-drop interface (coming soon)

• SQLite backend with configurable table names
• RESTful API with proper error handling
• Real-time updates across the interface
• Optimistic UI updates for better performance
• Comprehensive form validation

├── kanban-backend/           # Hono API server
│   ├── database/
│   │   ├── migrations.ts     # SQLite schema with configurable table names
│   │   └── queries.ts        # Database operations
│   ├── routes/
│   │   ├── boards.ts         # Board CRUD operations
│   │   ├── columns.ts        # Column management
│   │   ├── tasks.ts          # Task operations
│   │   └── static.ts         # Static file serving
│   └── index.ts              # Main server entry point
├── kanban-frontend/          # React frontend
│   ├── components/
│   │   ├── App.tsx           # Main app with theme management
│   │   ├── BoardList.tsx     # Multi-board overview
│   │   ├── BoardView.tsx     # Single board container
│   │   ├── KanbanBoard.tsx   # Board with columns
│   │   ├── KanbanColumn.tsx  # Individual columns
│   │   ├── TaskCard.tsx      # Task cards with priorities
│   │   ├── TaskForm.tsx      # Task creation/editing
│   │   ├── BoardForm.tsx     # Board management
│   │   └── ColumnForm.tsx    # Column management
│   ├── index.html            # Main HTML with DaisyUI
│   └── index.tsx             # React entry point
├── shared/
│   └── types.ts              # TypeScript interfaces
└── README.md

• GET /api/boards - Get all boards
• GET /api/boards/:id - Get board with columns and tasks
• POST /api/boards - Create new board
• PUT /api/boards/:id - Update board
• DELETE /api/boards/:id - Delete board

• GET /api/boards/:boardId/columns - Get columns for board
• POST /api/boards/:boardId/columns - Create column
• PUT /api/columns/:id - Update column
• DELETE /api/columns/:id - Delete column
• PATCH /api/columns/:id/move - Reorder column

• GET /api/columns/:columnId/tasks - Get tasks for column
• POST /api/columns/:columnId/tasks - Create task
• PUT /api/tasks/:id - Update task
• DELETE /api/tasks/:id - Delete task
• PATCH /api/tasks/:id/move - Move task between columns

The app uses SQLite with three main tables:

• id - Primary key
• name - Board name
• description - Optional description
• created_at, updated_at - Timestamps

• id - Primary key
• board_id - Foreign key to boards
• name - Column name
• position - Display order
• color - Column color
• created_at, updated_at - Timestamps

• id - Primary key
• column_id - Foreign key to columns
• title - Task title
• description - Optional description
• priority - 'low', 'medium', 'high'
• due_date - Optional due date
• position - Display order within column
• created_at, updated_at - Timestamps

1. Deploy to Val Town: Copy the code to a new Val Town project
2. Database Setup: The app automatically creates tables and a default board on first run
3. Access: Visit your Val Town URL to start using the kanban app

1. Click "New Board" from the main dashboard
2. Enter a board name and optional description
3. Add default columns (or use the preset: To Do, In Progress, Done)
4. Click "Create Board"

• Click "Add Column" to create new columns
• Use the column menu (⋮) to edit or delete columns
• Customize column colors for better organization

• Click "Add Task" in any column
• Set priority levels and due dates
• Edit tasks by clicking on them
• Use the task menu for additional options

• Click the "Theme" button in the header
• Choose from 25+ DaisyUI themes
• Your preference is automatically saved

• Drag and drop for tasks and columns
• Task assignments and collaboration
• Board templates
• Advanced search and filtering
• Export/import functionality
• Real-time collaboration

• Frontend: React 18.2.0, DaisyUI, TailwindCSS
• Backend: Hono framework, SQLite
• Platform: Val Town (Deno runtime)
• Styling: DaisyUI components with custom CSS
• Icons: Font Awesome 6.5.1

Built with ❤️ for Val Town following DRY, KISS, and YANGI principles.