anaging a development team is hard. Tracking performance, analyzing code quality, evaluating skills, and preventing burnout—all while keeping everyone productive—requires more than spreadsheets and gut
feelings.
That's why my colleague Azizbek Matsalayev and I built TeamFlow—an AI-powered smart workspace that transforms how IT teams operate.
## The Problem We Solved
As developers ourselves, we noticed several pain points in IT team management:
- No objective performance metrics - Evaluations were subjective
- Manual time tracking - Error-prone and often ignored
- Code review bottlenecks - No automated quality insights
- Burnout blindspots - Managers couldn't see warning signs
- Scattered tools - GitHub, Jira, Slack, spreadsheets everywhere
We built TeamFlow to solve all of these with one unified platform.
## What is TeamFlow?
TeamFlow is a comprehensive team management platform that combines:
- 🤖 AI-Powered Code Analysis - Intelligent agents analyze commits and provide insights
- 📊 KPI & Performance Tracking - Objective scoring with rankings and grades
- ⏱️ Smart Time Tracking - Session-based tracking with pause/resume
- 🔥 Burnout Risk Detection - Early warning system for overworked developers
- 📈 GitHub Integration - Deep analytics on contributions and code quality
- 📋 Task Management - Kanban boards and table views with full workflow
## The Tech Stack
We chose a modern, performant stack:
### Frontend
React 19 + TypeScript 5.8
Vite 6.4 (lightning-fast builds)
TanStack Query v5 (server state)
TanStack Table v8 (advanced data grids)
Tailwind CSS v4 + Shadcn/ui
React Hook Form + Zod (type-safe forms)
### Why This Stack?
- React 19 - Latest features including improved Suspense
- TanStack Query - Eliminated 90% of our state management code
- Vite - 10x faster than Create React App
- Shadcn/ui - Beautiful, accessible components we own
- Zod - Runtime validation that syncs with TypeScript
## Key Features Deep Dive
### 1. AI Agents for Code Analysis
The heart of TeamFlow is our AI Agent system. Managers can create custom AI agents with specific prompts to analyze different aspects of code:
typescript
// Creating an AI Agent
interface Agent {
id: string;
name: string; // e.g., "Code Quality Reviewer"
prompt: string; // System prompt (up to 10,000 chars)
description?: string;
}
// Agent analyzes commits and generates insights
interface Analysis {
id: string;
project: Project;
agent: Agent;
users: User[];
response: string; // AI-generated analysis
dateFrom: string;
dateTo: string;
durationSeconds: number;
}
How it works:
1. Select a project and date range
2. Choose an AI agent (or create a custom one)
3. Select team members to analyze
4. AI processes all commits through the agent's prompt
5. Get comprehensive insights on code quality, patterns, and improvements
The analysis status flows through: started → get_commits → get_commit_details → analyzing → success
2. KPI Scoring System
We built a comprehensive KPI system with multiple scoring categories:
interface KpiScoring {
id: string;
userId: string;
date: string;
status: 'draft' | 'completed' | 'locked';
scores: KpiScoringScore[];
finalScore?: number;
grade?: 'A+' | 'A' | 'B+' | 'B' | 'C+' | 'C' | 'D' | 'F';
rank?: number;
feedback?: string;
evaluatedBy?: string;
}
Features include:
- Manual scoring by managers
- Automatic grade calculation
- Team rankings
- Historical performance tracking
- Admin dashboard with analytics
3. Smart Time Tracking
Unlike simple start/stop timers, our time tracking understands developer workflows:
interface TimeTrackingSession {
id: string;
userId: string;
startedAt: timestamp;
endedAt?: timestamp;
pausedAt?: timestamp;
resumedAt?: timestamp;
totalDuration: number; // seconds
pauseDuration?: number;
isResearching: boolean; // Learning vs coding time
}
Key features:
- Pause/Resume - Step away without losing your session
- Research Mode - Separate learning time from coding time
- Custom Pause Reasons - Track why work was interrupted
- Weekly Statistics - Visual breakdown of productive hours
4. Burnout Risk Detection
Our dashboard calculates burnout risk based on multiple factors:
// Dashboard API endpoints
POST /dashboard/burnout-risk/calculate
POST /dashboard/day-performance
POST /dashboard/work-type-comparison // Remote vs Office
POST /dashboard/trend-forecast
The system considers:
- Overtime patterns
- Work hours outside normal schedule
- Consecutive high-intensity days
- Task completion stress
- Commit frequency anomalies
5. GitHub Deep Integration
We pull comprehensive data from GitHub:
interface UserStats {
userId: string;
projectId: string;
dateFrom: string;
dateTo: string;
totalCommits: number;
totalAdditions: number;
totalDeletions: number;
totalChangedFiles: number;
fileExtensions: Record<string, number>; // Lines per language
}
This enables:
- Contribution analytics per developer
- Code velocity tracking
- Language distribution insights
- Commit pattern analysis
Architecture Highlights
Feature-Based Structure
We organized code by feature, not by type:
src/features/
├── ai-agents/ # AI agent CRUD
├── analysis/ # AI-powered analysis
├── auth/ # JWT authentication
├── dashboard/ # KPI analytics
├── github-user-stats/ # GitHub integration
├── kpi/ # Performance scoring
├── projects/ # Repository management
├── tasks/ # Task management
├── time-tracking/ # Session tracking
└── users/ # User management
Each feature contains its own:
- Components
- Hooks
- Services (API calls)
- Types
- Validation schemas
Advanced Data Tables
Our DataTable component handles enterprise-level data:
// Features included:
- Column resizing (drag to resize)
- Multi-column sorting
- Advanced filtering
- Bulk operations
- Export to Excel/CSV
- Pagination with URL state
- Scrollable tooltips for long content
JWT Authentication Flow
We implemented automatic token refresh:
// Axios interceptor for 401/403
axiosInstance.interceptors.response.use(
(response) => response,
async (error) => {
if (error.response?.status === 401 ||
error.response?.status === 403) {
// Remove old token
removeToken();
// Try to refresh
const newToken = await refreshToken();
if (newToken) {
// Save and retry request
saveToken(newToken);
error.config.headers.Authorization = `Bearer ${newToken}`;
return axiosInstance(error.config);
}
// Refresh failed - redirect to login
window.location.href = '/auth/login';
}
return Promise.reject(error);
}
);
Role-Based Access Control
Three roles with different permissions:
┌─────────────────┬─────────┬───────────────┬─────────────┐
│ Feature │ Admin │ Manager │ Developer │
├─────────────────┼─────────┼───────────────┼─────────────┤
│ User Management │ ✅ Full │ ✅ View │ ❌ │
├─────────────────┼─────────┼───────────────┼─────────────┤
│ AI Agents │ ✅ Full │ ✅ Full │ ❌ │
├─────────────────┼─────────┼───────────────┼─────────────┤
│ KPI Scoring │ ✅ Full │ ✅ Score team │ ✅ View own │
├─────────────────┼─────────┼───────────────┼─────────────┤
│ Projects │ ✅ Full │ ✅ Full │ ✅ View │
├─────────────────┼─────────┼───────────────┼─────────────┤
│ Tasks │ ✅ Full │ ✅ Full │ ✅ Assigned │
├─────────────────┼─────────┼───────────────┼─────────────┤
│ Analytics │ ✅ Full │ ✅ Team │ ✅ Personal │
└─────────────────┴─────────┴───────────────┴─────────────┘
Performance Optimizations
Code Splitting
We use manual chunking for optimal loading:
// vite.config.ts
build: {
rollupOptions: {
output: {
manualChunks: {
'vendor-react': ['react', 'react-dom', 'react-router-dom'],
'vendor-ui': ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu', ...],
'vendor-data': ['@tanstack/react-query', '@tanstack/react-table'],
'vendor-forms': ['react-hook-form', '@hookform/resolvers', 'zod'],
}
}
}
}
TanStack Query Caching
Smart caching reduces API calls:
const { data: users } = useQuery({
queryKey: ['users', filters],
queryFn: () => fetchUsers(filters),
staleTime: 60 * 1000, // 1 minute
gcTime: 5 * 60 * 1000, // 5 minutes
});
Lessons Learned
1. Feature-based architecture scales better
Organizing by feature instead of by type (components/, hooks/, etc.) made the codebase much more navigable as it grew.
2. TanStack Query is a game-changer
We removed almost all of our Redux code after adopting TanStack Query. Server state and client state are different—treat them differently.
3. Zod + TypeScript = confidence
Runtime validation with Zod catches bugs that TypeScript alone misses. Forms especially benefit from this combination.
4. AI needs good prompts
Our AI agents are only as good as their system prompts. We spent significant time crafting prompts that give consistent, useful analysis.
5. Time tracking needs to be frictionless
If starting/stopping a timer takes more than one click, developers won't use it. We added pause/resume and research mode to match real workflows.
What's Next?
We're actively developing:
- Slack/Discord integration - Notifications where teams already communicate
- Sprint velocity predictions - AI-powered sprint planning
- Automated code review suggestions - Beyond just analysis
- Mobile app - Track time on the go
Try It Yourself
TeamFlow is designed for teams of 5-100 developers who want data-driven performance management without the overhead of enterprise tools.
---
About the Authors
Matkarim Matkarimov - Full Stack Developer
- Portfolio: https://www.eduzen.uz
- GitHub: https://github.com/matkarimov099
- LinkedIn: https://linkedin.com/in/matkarim-matkarimov
Azizbek Matsalayev - Scala-developer
- GitHub: https://github.com/matsalayev
---
Have questions about building team management tools or AI integration? Drop a comment below!
---
Top comments (0)