Devorc Suite

Inspiration

The inspiration came from recognizing the fragmented nature of modern development workflows. Developers constantly switch between GitHub, project management tools, code editors, and AI assistants. We wanted to create a unified workspace that brings together repository management, visual project planning, intelligent chat assistance, and task management into one cohesive platform.

What it does

Devorc Suite is an AI-powered developer productivity platform with four core modules:

• GitHub Dashboard - Comprehensive repository management with issue tracking, pull request workflows, and branch management
• Smart Kanban - Visual task management with GitHub synchronization for seamless project tracking
• Project Canvas - Interactive brainstorming and architecture visualization tool for planning and design
• AI Chat Assistant - Intelligent code analysis with repository codebase integration, file navigation, and development insights

The platform provides deep GitHub integration, real-time collaboration features, and a modern responsive UI with comprehensive dark/light theme support.

How we built it

We built Devorc Suite using modern React patterns with Next.js 15 App Router and TypeScript 5 for type safety. The architecture follows:

• Component-based design using shadcn/ui built on Radix UI primitives
• Feature-based organization with co-located tests and modular structure
• Custom hooks for reusable logic and API state management
• React Context providers for global state (GitHub auth, theme, storage)
• Comprehensive testing with Jest and React Testing Library
• Advanced data handling with @tanstack/react-table, @dnd-kit for drag-and-drop, and recharts for visualization

The chat system includes sophisticated features like repository codebase loading, file navigation, code analysis, and hybrid storage management using both LocalStorage and IndexedDB.

Challenges we ran into

• Complex state management across multiple modules while maintaining performance
• GitHub API integration with proper authentication flows and rate limiting
• File system navigation and code analysis within the browser environment
• Storage optimization for large codebases using hybrid storage strategies
• Real-time synchronization between different views (Kanban, Canvas, Chat)
• Responsive design that works seamlessly across desktop and mobile devices

Accomplishments that we're proud of

• Comprehensive test coverage with 50+ test files covering components, hooks, and services
• Advanced chat interface with repository integration, file navigation, and code insights
• Sophisticated storage system that handles large datasets efficiently
• Clean architecture with proper separation of concerns and TypeScript safety
• Modern UI/UX with accessibility considerations and theme support
• AI-assisted development workflow that demonstrates best practices for component composition and testing

What we learned

• Advanced React patterns for complex state management and component composition
• Next.js App Router capabilities for building scalable applications
• GitHub API integration strategies and authentication flows
• Browser storage optimization techniques for handling large datasets
• AI-assisted development workflows and how they can accelerate productivity
• Testing strategies for complex React applications with external API dependencies

What's next for Devorc Suite

• Real-time collaboration features with WebSocket integration
• Advanced AI capabilities including code generation and automated testing
• Plugin system for extending functionality with custom integrations
• Team management features with role-based access control
• Performance analytics and productivity insights dashboard
• Mobile app for on-the-go project management and code review
• Integration marketplace for connecting with additional development tools

Built With

• date-fns
• dnd-kit
• github-api
• icons
• indexeddb
• jest
• localstorage
• lucide
• next.js-15-app-router
• openai-api
• radix-ui
• react
• react-19
• react-testing-library
• recharts
• shadcn/ui
• tailwind-css
• tanstack/react-table
• typescript
• zod-validation