ATS-Dopi

devpulse

GitHubTypeScriptJavaScriptCSSHTMLDockerfile
Sync GitHub: 9/15/2026

DevPulse

Developer Productivity Dashboard — Track commits, PRs, issues, and coding metrics across GitHub, GitLab, and Bitbucket

CI License: MIT React TypeScript

Features

  • Multi-provider support — GitHub, GitLab, and Bitbucket
  • Unified dashboard — Commits, PRs, issues, and code changes in one view
  • Activity charts — Visualize your coding activity over time
  • Language breakdown — See your language distribution across repos
  • Top repositories — Track your most active and popular repos
  • Productivity metrics — PR merge rate, avg PR size, commit streak
  • Time range filters — 7 days, 30 days, 90 days, 1 year, all time
  • Token security — Tokens stored locally in browser, sent only to your self-hosted server
  • Dark theme — Easy on the eyes for those late-night coding sessions
  • Docker-ready — Full containerized deployment with docker-compose

Architecture

Browser (React + Vite)
  │
  ├── Zustand store (persisted settings)
  │
  ▼
DevPulse API Server (Express)
  │
  ├── GitHub Provider → GitHub REST API
  ├── GitLab Provider → GitLab REST API
  │
  ▼
Aggregator → Merged DashboardData

Quick Start

Development

npm install
npm run dev          # Frontend on :5175
npm run dev:server   # API server on :3002

Docker

docker-compose up

Usage

  1. Add a provider — Go to Settings, select GitHub/GitLab, enter your username and access token
  2. Select time range — Use the sidebar to filter by 7d, 30d, 90d, 1y, or all time
  3. View your dashboard — See commits, PRs, issues, charts, and metrics
  4. Refresh — Click refresh to fetch latest data from your providers

Creating Access Tokens

  • GitHub: Settings → Developer settings → Personal access tokens (needs repo scope)
  • GitLab: Preferences → Access Tokens (needs read_api scope)
  • Bitbucket: Personal settings → App passwords (needs read permissions)

Project Structure

devpulse/
├── src/
│   ├── components/
│   │   ├── Sidebar.tsx
│   │   ├── Dashboard.tsx
│   │   ├── StatCard.tsx
│   │   ├── ActivityChart.tsx
│   │   ├── LanguageBreakdown.tsx
│   │   ├── RecentActivity.tsx
│   │   ├── TopRepos.tsx
│   │   ├── Settings.tsx
│   │   └── EmptyState.tsx
│   ├── types.ts
│   ├── store.ts
│   ├── api.ts
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── server/
│   ├── providers/
│   │   ├── github.ts
│   │   └── gitlab.ts
│   ├── aggregator.ts
│   ├── utils.ts
│   └── index.ts
├── tests/
│   ├── utils.test.ts
│   └── aggregator.test.ts
├── Dockerfile
├── Dockerfile.api
├── docker-compose.yml
├── nginx.conf
└── package.json

Development

npm install
npm run dev          # Start frontend dev server
npm run dev:server   # Start API server
npm test             # Run tests
npm run typecheck    # Type checking
npm run lint         # Lint
npm run build        # Build for production

Tech Stack

  • Frontend: React 18, Vite, TailwindCSS, Recharts, Zustand, Lucide icons
  • Backend: Express, TypeScript, node-fetch
  • Testing: Vitest
  • Deployment: Docker, Nginx

License

MIT

← Projets