Devflow Kanban

• 

  DevFlow is a React Kanban board bridging daily tasks and dev workflows. A unique extension syncs GitHub issues in one click.

DevFlow: The Engineer's Kanban

Inspiration As an engineering student, I noticed a constant friction in my workflow: I had daily chores in a Todo list, but my "real work" lived in GitHub Issues. Switching between a browser tab for GitHub and a task manager was a productivity killer. I was inspired to create a tool that bridges this gap—a single source of truth where manual tasks and GitHub issues live together, requiring zero effort to sync.

What it does DevFlow is a specialized Kanban board designed for developers.

Hybrid Task Management: Manage personal daily goals alongside technical GitHub issues.

Zero-Click Sync: Instead of copying links, a custom integration allows users to pull issues directly into their workflow.

Engineering-First UI: Features Markdown support for code snippets, priority matrices, and a developer-centric Dark Mode.

Privacy-Focused: Operates entirely in the browser using LocalStorage, meaning your data never leaves your machine.

How we built it The project is built on a modular React architecture.

State Management: I used the React Context API to handle complex task states across columns. To ensure scalability, I followed the "Separation of Concerns" principle, keeping the UI logic distinct from the API services.

Drag & Drop: Integrated @hello-pangea/dnd for smooth, accessible card movement.

Data Layer: Built a custom useLocalStorage hook to handle data persistence without a traditional backend.

APIs: Leveraged the GitHub REST API for real-time issue fetching.

Styling: Used Tailwind CSS to build a responsive, high-performance interface that supports system-level Dark Mode.

Challenges we ran into One of the biggest hurdles was the Data Synchronization logic. GitHub issues have their own unique IDs, while manual tasks generate local IDs. Merging these into a single state without creating duplicates required a robust filtering algorithm. Another challenge was the Context Switching problem; I had to figure out how to let users import specific issues without forcing them to manually copy-paste URLs every time, which led me to research browser-level integrations and scraping logic.

Accomplishments that we're proud of Modular Codebase: I am proud that the frontend is so well-structured that we can swap the LocalStorage layer for a Firebase or Node.js backend in the future by changing just one file.

Performance: Even with 50+ tasks and Markdown rendering, the board remains lag-free thanks to optimized React rendering ($O(n)$ complexity for state updates).

UI/UX: Creating a tool that feels like a professional engineering product (similar to Jira or Linear) but remains simple enough for a normal user.

What we learned I deeply explored the Life Cycle of a Web Request, specifically how to handle rate-limiting when fetching from public APIs. I also mastered DOM manipulation via React and learned how to build "offline-first" applications that provide a seamless user experience even without a dedicated server.

What's next for DevFlow The next phase is Phase 2: The Backend Era.

Database Integration: Moving from LocalStorage to Supabase or Firebase for multi-device sync.

Real-time Collaboration: Adding WebSockets so team members can see card movements in real-time.

AI Task Decomposition: Integrating a LLM to automatically break down a single GitHub issue into smaller, manageable sub-tasks.

Built With

• contextapi
• firebase
• github
• hello-pangea/dnd
• javascript
• react
• tailwind
• vite