Markban Boards

Inspiration

Our inspiration for Markban Boards stemmed from a straightforward need: a quick and simple way to visualise progress from Markdown to-do lists. As dedicated users of Obsidian and those leveraging AI for task generation, we consistently find ourselves with well-organised .md files that lack visual dynamism. The goal was to bridge this gap, enabling users to transform their existing Markdown into interactive Kanban boards, providing immediate visual oversight without complex setup or data migration. This tool is for those who already use Markdown as their task single source of truth and just need a "one-shot" visual layer.

What it does

Markban Boards is a single-page web tool that converts your specifically formatted Markdown .md files into interactive Kanban boards. Users can upload a Markdown file to create a new board or update an existing one. It meticulously parses your H1 for the board name, H2s for column titles, and checklist items ([ ], [x], or (%)) for tasks. You can drag and drop tasks between columns, toggle task completion (which intelligently handles percentages), and rename or delete boards directly within the UI. All user interactions are handled via custom, themed modals for a polished experience. A prominent dark/light mode toggle with a "Gemini-inspired" gradient aesthetic completes the clean, responsive interface. Board and column progress percentages are dynamically calculated and displayed.

How we built it

Markban Boards was developed using Vite as our build tool, providing a lightning-fast development experience and optimized production builds. The interactive user interface is powered by React, allowing for a component-based structure that ensures a responsive and dynamic feel, especially for drag-and-drop interactions. Styling is efficiently handled by Tailwind CSS, used directly via CDN for rapid prototyping and a consistent, modern aesthetic across both dark and light modes. Markdown parsing logic is implemented as a dedicated React component, intelligently reading the .md file content and transforming it into our internal data structure. Persistence of board data and user preferences (like theme) is managed through localStorage, ensuring a seamless user experience across sessions.

Challenges we ran into

Integrating React within a "single HTML file" concept, while managing the Vite build process to output a highly optimized, self-contained solution, presented an interesting challenge. Ensuring the Markdown parser accurately interpreted diverse user-generated markdown (beyond the exact template) for tasks and percentages required robust parsing logic. Implementing smooth, performant drag-and-drop for tasks within and between columns, while ensuring the React state and underlying data model were consistently updated, also required careful attention. Furthermore, creating custom, themed modals to replace native browser dialogs added a significant layer of UI development, demanding precise styling and state management within the React application.

Accomplishments that we're proud of

We are incredibly proud of successfully combining the power of React and Vite to deliver a highly interactive and performant application, all while fitting within the hackathon's emphasis on efficient code and a single-page delivery. The seamless transformation of raw Markdown into a fully functional and aesthetically pleasing Kanban board is a core achievement. We're particularly pleased with the polished UI, featuring a distinct "Gemini-inspired" gradient aesthetic that adapts beautifully to both dark and light modes, and the elegant implementation of custom, themed modals that enhance user feedback. The dynamic calculation and display of board and column progress percentages add significant value and visual clarity.

What we learned

This project provided invaluable experience in leveraging modern frontend frameworks like React with cutting-edge build tools like Vite to achieve complex interactive features within a constrained environment. We deepened our understanding of component-based architecture for managing complex UI states. We refined our skills in efficient Markdown parsing for specific, structured data, and in implementing drag-and-drop functionalities that integrate seamlessly with a React component lifecycle. Furthermore, the emphasis on custom UI elements like modals reinforced the importance of meticulous design and implementation for a superior user experience, demonstrating how a polished interface can significantly elevate a functional tool.

What's next for Markban Boards

Looking ahead, we have several exciting enhancements planned for Markban Boards. Our immediate focus is on refining the direct on-page editing experience of tasks within the Kanban board, ensuring these changes seamlessly update the internal data and, ideally, allow for a "download Markdown" feature to export the modified file. We'll also explore ways to provide more diverse board customisation options, such as different column types or filtering capabilities. Longer term, we envision adding cloud storage integration (e.g., direct sync with Dropbox or Google Drive for Markdown files) to eliminate manual uploads, further solidifying Markban Boards as the ultimate visual companion for Obsidian and AI-generated Markdown task lists.