Fello
AI-Powered Project Planning & Management Workspace.
“Reduced initial project setup time from hours of manual entry to seconds via live streaming parsers.”
Replace with high-res UI dashboard screenshot, mockup, or banner (Recommended 1920x1080)
Production-Grade AI Workspace
Fello bridges natural language planning and structured agile execution. Users describe project goals conversationally, and Fello's custom streaming buffer parser intercepts JSON payloads in real time to generate interactive Kanban boards with on-demand AI task companions.
Project at a Glance
A premium AI workspace that translates natural language project descriptions into structured Scrum boards, equipped with an AI Project Companion drawer for engineering specs, test plans, and technical steps.
Agile Project Planning & Generative Management
Modern Engineering & Product Teams
Q2 - Q4
Instant translation of ambiguous requirements into structured epics, features, and Jira-style task cards.
The Problem
Product managers and engineering leads spend countless hours drafting epics, defining features, and creating task cards. Generative AI tools output raw text or malformed JSON that leaks into user interfaces, leaving tasks disconnected from real execution environments.
Generative text LLMs leak raw JSON syntax into streaming chat bubbles, disrupting UX.
Task boards created by AI are typically static and cannot be dragged, reorganized, or persisted.
Developers lack detailed technical steps, edge cases, and QA criteria on auto-generated task cards.
Fragile client state loses in-progress plans on accidental reloads.
Goals
Technical Goals
- Zero-dependency streaming Markdown bubble renderer compatible with React 19.
- Buffer parser algorithm to intercept and suppress raw JSON payloads before UI render.
- Interactive Kanban board with independent column scrolling and dnd-kit integration.
- Split Task Workspace Drawer generating specifications, QA test plans, and technical blueprints.
Business Goals
- Accelerate project discovery and backlog initialization by over 80%.
- Provide engineering teams with actionable, code-ready task specifications.
- Deliver a fluid, high-performance dark-mode experience with zero layout shift.
My Role
Full-Stack AI Architect
Core Responsibilities
- Architected the streaming parser buffer to intercept plan payloads in real-time.
- Built the React 19 Kanban board using @dnd-kit/core and Framer Motion.
- Engineered the AI Task Companion drawer and prompt chains for specs, test cases, and steps.
- Designed MongoDB schemas for Projects, Epics, Features, and Tasks.
Primary Focus Areas
Solution
We engineered Fello with a streaming-first architecture. A custom buffer parser scans live LLM chat streams, cleanly truncates human-readable text before plan definitions start, parses the plan JSON in memory, and immediately renders it into an interactive Kanban board.
Stream Buffer Interceptor
Suppresses raw JSON logs from leaking to the UI and converts pending states into interactive animated tool cards.
Interactive Scrum Workspace
Drag-and-drop Kanban columns with parent Epic/Feature grouping pills and persistent lock states.
AI Project Companion Drawer
On-demand modal generating comprehensive Technical Specs, QA Test Cases, and implementation blueprints per card.
Architecture & Data Flow
End-to-end flow from natural language prompt to streaming buffer interception, MongoDB upsert, and interactive Kanban synchronization.
User Prompt Ingestion
Next.js App Router / SSEUser describes application requirements in natural language through the AI Planner chat.
Streaming Buffer Parser
Custom Buffer AlgorithmClient-side algorithm detects structured JSON boundaries, suppresses raw code, and buffers plan objects.
Database Sync & Lock State
MongoDB Driver / Next.js APIParsed Epics, Features, and Tasks are upserted into MongoDB collections; lock status persisted to localStorage.
Interactive Kanban Synchronization
@dnd-kit / Framer MotionKanban board dynamically maps cards to columns with drag-and-drop status mutation.
AI Companion Drawer Generation
Gemini / OpenAI APIClicking any card invokes prompt pipelines generating specs, QA checklists, and engineering steps.
Core Features
Zero-Dependency Stream Parser
Zero raw JSON leaksIntercepts raw JSON payloads from live LLM streams, cleanly rendering conversational text while piping structured plans to state.
Split Task Workspace Drawer
On-demand deep specsDual-column editor combining task metadata form with AI-generated Technical Specs, QA Test Cases, and Technical Steps.
High-Density Kanban Board
dnd-kit integrationIndependent column scrolling with parent Epic/Feature visual pills and full touch/drag support.
Dynamic Model Switcher & Key Encryption
Multi-provider supportAllows users to switch between Gemini, OpenAI, and Anthropic models with encrypted database key storage.
Engineering Decisions
Client-Side Buffer Parsing vs Server Parsing
Why: Allows immediate conversational text streaming to the user while asynchronously processing board generation without adding server hop latency.
MongoDB Flexible Document Schema vs Relational
Why: Epics, features, and dynamic AI-generated technical specs vary in depth and structure; document storage allowed rapid schema evolution.
Challenges
Streaming Truncation Leaks: LLMs streaming incomplete JSON tokens caused UI crashes in standard JSON.parse.
Implemented a regex token boundary scanner that truncates the displayed stream precisely before the first JSON bracket and waits for complete payload closure.
100% clean UI streams with zero visible code artifacts.
Kanban Drag Re-renders: Dragging cards in high-density columns caused lag across the entire React tree.
Isolated drag state using @dnd-kit sensors and React 19 optimistic state updates.
Silky 60fps drag-and-drop interactions across 100+ task cards.
Implementation Timeline
Stream Parser & Markdown Engine
- Zero-dependency React 19 Markdown renderer
- Streaming buffer parser algorithm
- Basic chat interface
Interactive Board & MongoDB Schema
- Kanban column layout with @dnd-kit
- Projects, Epics, Features, and Tasks collections
- Column drag-and-drop status mutations
Task Drawer & Spec Generators
- Split task workspace modal
- AI prompt pipelines for specs, tests, and steps
- Persistent storage of generated specs
Key Encryption & Analytics Dashboard
- Encrypted API credential storage
- Workspace KPI analytics dashboard
- Production release and deployment
Results & Metrics
Reduction in initial backlog creation and sprint planning time.
Zero raw JSON payload leaks in streaming UI via custom buffer parsers.
Instantaneous optimistic status transitions across columns.
Technical Spec, QA Test Checklist, and Implementation Steps per task.
Screenshots
Drop high-resolution interface screenshot here (Recommended 1920x1080)
AI Planner Chat & Real-Time Plan Generation
Natural language conversational interface streaming agile sprint definitions.
Drop high-resolution interface screenshot here (Recommended 1920x1080)
Interactive Kanban Board with Drag-and-Drop
Multi-column Scrum board with parent epic tags and status updates.
Drop high-resolution interface screenshot here (Recommended 1920x1080)
AI Task Companion Drawer (Technical Specs & QA)
Split drawer generating architectural blueprints and test plans.
Demo Video
Fello Product Walkthrough: 2-minute demonstration showing prompt-to-kanban board generation, card reordering, and the AI Task Spec drawer.
Add iframe or video src in lib/case-studies-data.ts
Demonstration Highlights:
Lessons Learned
Separating user-facing chat streaming from background structured data parsing provides a vastly superior user experience.
Optimistic UI updates are mandatory for drag-and-drop boards to feel native and responsive.
Developers value concrete QA test cases and technical steps far more than generic high-level AI advice.
Tech Stack
Frontend
Backend & Database
AI & Models
Business Impact
Fello transformed product planning for modern software teams, bridging the gap between high-level vision and actionable engineering execution.
“Fello eliminates the tedious busywork of agile planning. It takes three sentences and turns them into an engineering-ready board with test plans already written.”