Svelte Kanban

A local-first Kanban board built with Svelte, TypeScript, and PWA features. This application allows you to organize your tasks visually in a Kanban-style board with drag-and-drop functionality.

Features

• 🚀 Local-first: All data is stored in your browser
• 📱 PWA support: Works offline with caching
• 🎨 Colorful stickies: Organize tasks with color coding
• 🔄 Drag and drop: Move tasks between columns
• 📐 Responsive design: Works on desktop and mobile

Columns

The board has four predefined columns:

• Backlog
• To Do
• In Progress
• Done

Getting Started

Development

1. Clone this repository:

   git clone https://github.com/yourusername/svelte-kanban.git
   cd svelte-kanban
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm run dev
   

4. Open your browser and navigate to http://localhost:5173

Building for Production

To create a production version:

npm run build

You can preview the production build with:

npm run preview

Deployment

This app is configured to deploy to GitHub Pages using GitHub Actions. The workflow is set up to:

1. Build the application when changes are pushed to the main branch
2. Deploy the built files to GitHub Pages

To set this up for your own repository:

1. Fork or clone this repository
2. In your GitHub repository settings, enable GitHub Pages
3. Set the source to "GitHub Actions"
4. Push changes to the main branch to trigger a deployment

PWA Path Configuration (GitHub Pages)

When deploying under a repository path (for example /your-repo-name), keep these settings aligned so the PWA does not leak scope or cache behavior into other apps on the same domain:

1. Set the SvelteKit base path in svelte.config.js:

    paths: {
        base: dev ? '' : '/your-repo-name';
    }
   

2. Keep static/manifest.json path-safe by using relative values:

   • id: "./"
   • start_url: "./"
   • scope: "./"
   • icon sources like "favicon.png" (no leading /)

3. Register the service worker under the app base path and scope only.

4. Use a cache namespace that includes the app scope, and only delete old caches in that namespace during activation.

How to Use

Adding Tasks

1. Click the "+" button in any column
2. Enter task text
3. Choose a color (or use the default)
4. Click "Add" or press Enter

Moving Tasks

Drag and drop tasks between columns to update their status.

Editing Tasks

1. Click the edit (✏️) button on a task
2. Update text and/or color
3. Click "Save" or press Enter

Deleting Tasks

Click the delete (🗑️) button on a task to remove it.

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.