https://github.com/full-chaos/dev-health-web
Developer Teams and Individual Ecosystem Metrics Frontend for full-chaos/dev-health-ops
https://github.com/full-chaos/dev-health-web
developer-experience developer-health developer-tools engineering-leadership metric
Last synced: 4 months ago
JSON representation
Developer Teams and Individual Ecosystem Metrics Frontend for full-chaos/dev-health-ops
- Host: GitHub
- URL: https://github.com/full-chaos/dev-health-web
- Owner: full-chaos
- License: other
- Created: 2025-12-27T01:54:28.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2026-02-06T01:32:58.000Z (4 months ago)
- Last Synced: 2026-02-06T08:49:30.621Z (4 months ago)
- Topics: developer-experience, developer-health, developer-tools, engineering-leadership, metric
- Language: TypeScript
- Homepage: https://demo.fullchaos.studio
- Size: 1.02 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# Dev Health Web
[Demo](https://demo.fullchaos.studio)
This is the application frontend for [dev-health-ops](https://github.com/chrisgeo/dev-health-ops).
## Prerequisites
- Node.js 18+ (recommended: 20+)
- npm, yarn, pnpm, or bun
## Getting Started
### Full Stack (with Backend)
1. **Install dependencies:**
```bash
npm install
```
2. **Start ClickHouse** (from `dev-health-ops`):
```bash
dev-hops grafana up
```
3. **Run the API:**
```bash
dev-hops api --db "clickhouse://localhost:8123/default" --reload
```
4. **Run the web app:**
```bash
BACKEND_URL="http://127.0.0.1:8000" npm run dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser.
### Frontend Only (Demo Mode)
You can run the frontend with sample data (no backend required):
```bash
npm install
npm run dev
```
This will serve the app at [http://localhost:3000](http://localhost:3000) using static sample data.
## Environment Variables
| Variable | Description | Default |
|----------|-------------|---------|
| `BACKEND_URL` | Backend API URL | `http://127.0.0.1:8000` |
| `NEXT_PUBLIC_USE_GRAPHQL_ANALYTICS` | Enable GraphQL analytics | `false` |
| `NEXT_PUBLIC_DEV_HEALTH_TEST_MODE` | Use sample data (for testing) | `false` |
| `NEXT_PUBLIC_DOCS_URL` | Documentation link URL | — |
| `DEMO_EXPORT` | Enable static export mode | `false` |
| `BASE_PATH` | Subpath for hosting (e.g., `/app`) | — |
Copy `.env.example` to `.env.local` and configure as needed.
## Scripts
| Script | Description |
|--------|-------------|
| `npm run dev` | Start development server |
| `npm run build` | Build for production |
| `npm run start` | Start production server |
| `npm run lint` | Run ESLint |
| `npm run test:unit` | Run unit tests (Vitest) |
| `npm run test:e2e` | Run e2e tests (Playwright) |
## Documentation
- `docs/visualizations.md` — Chart selection guide (heatmaps, quadrants, flame diagrams)
- `docs/graphql-client.md` — urql GraphQL client usage
- `docs/graphql-investment.md` — Investment View GraphQL API
- `docs/hosting.md` — Demo exports, GitHub Pages, CDN hosting
- `docs/migration-guide.md` — REST to GraphQL migration
## Architecture
- **Framework:** Next.js 14+ with App Router
- **Components:** React Server Components + Client Components
- **Styling:** Tailwind CSS
- **Data:** urql GraphQL client, static sample data for demos
- **Testing:** Vitest (unit), Playwright (e2e)
