loader
Ibai Fernández

Product Case Study / Own The Tool, Own The Workflow

MyBoard: A Kanban Product Built To Refuse Vendor Dependence

MyBoard starts with a simple thesis: task management should not require surrendering your data, your pricing power, or your roadmap to a third-party platform. So instead of extending someone else's SaaS, I built the product from scratch.

The result is a modular Kanban application with a React 18 + Vite frontend, an Express API, JSON persistence, drag and drop powered by `@dnd-kit`, runtime-editable categories, real-time filters, and a roadmap that already anticipates enterprise deployment and AI-assisted operations without rewriting the core model.

Phase 1 MVP complete
Cards In Use 50+ real data
API Domains 4 boards, columns, cards, categories
Data Lock-In 0 owner-controlled JSON

The card uses a designed placeholder instead of a fake screenshot. When you drop the real board capture later, it should replace this exact slot without changing the storytelling structure.

Why This Product Exists

The Problem With Existing Tools

Mainstream task platforms solve organization while creating a second dependency problem: your workflow ends up tied to someone else's pricing, hosting, feature priorities, and terms. That trade-off is tolerated by default, but it is not inevitable.

The Counter-Position

MyBoard inverts the equation. The code is owned, the data is readable, and the persistence layer starts in plain JSON. That means the product is useful now, while staying easy to migrate later to stronger infrastructure without rebuilding the user experience.

A Stack Chosen For Control, Not Trend Chasing

React 18 + Vite

Fast iteration in development, clear component boundaries, and no unnecessary SSR complexity for a SPA product.

Express API

A clean server boundary keeps business logic explicit and turns the same API into the future bridge for enterprise and AI layers.

Human-Readable Persistence

`tasks.json` is not a shortcut; it is a strategic phase-one persistence choice that keeps backups, inspection, and migration transparent.

Correct Drag & Drop

`@dnd-kit` is used to persist real positional changes, not just visual movement. Reordering logic updates the affected set, not only the dragged card.

What Phase 1 Already Delivers

Board Core

  • Kanban columns with drag & drop between and within columns
  • Multi-board navigation with create, rename, and delete flows
  • Optimistic state updates through dedicated hooks

Card System

  • Markdown description, checklist, tags, due date, and priority layers
  • Visual priority indicators and overdue highlighting
  • Persistent ordering and consistent card mutation paths

Runtime Flexibility

  • Editable categories with a 12-color palette
  • Live filters by category, priority, and tag
  • React Context avoids prop drilling and redundant fetches

Why The Architecture Is Better Than A Mere MVP

Phase 1

Personal Kanban, fully usable now

The current product is already functional and in real use, not speculative wireframe work.

Phase 2

Enterprise deploy without a rewrite

The persistence layer can graduate from JSON to a database while preserving the same application shape and UX model.

Phase 4

AI as a real client of the same API

The roadmap already anticipates Claude-driven task creation, backlog hygiene, and board chat through the same API contract, not a disconnected "magic" layer.

What Media Should Replace These Placeholders Later

Placeholder Image

Main Board Capture

Hero screenshot of the real board showing multiple columns, cards, priority badges, and the visual hierarchy of the app.

Placeholder Video

Drag & Drop Demo

Short interaction clip proving that moving cards feels clean, stable, and intentional rather than merely animated.

Placeholder Image

Category Settings Modal

UI proof that categories are editable in runtime, with color palette and no redeploy required.

Placeholder Image

API / Data Ownership Proof

One technical capture tying together the board UI, API layer, and `tasks.json` persistence to support the zero lock-in argument.

Break the Ice

Let's Get In Touch

Contact Me

Translate Button