all-in-one-board is a TypeScript/React framework for building your own personal, unified dashboard. Instead of browsing 10 different sites for your daily info (crypto, tokens, weather, analytics, news…), just open one page—yours—and see it all, live.
Cards handle anything you like:
- crypto prices, DeFi PnL, APY, portfolio health…
- real-time analytics from any API
- weather, news headlines, shopping promos – you decide
- anything you can fetch or compute with code
Cards are just code – you write them in TypeScript/React. Every card consists of:
- Data fetching logic:
Free-form function:
getData(): T | Promise<T> - Rendering:
Custom React UI:
render(props)
The core (kernel) provides:
- automatic theme (light/dark), coherent card colors
- responsive bento-style layout (desktops & mobiles)
- loading indicators & error states
- “refresh all data” & per-card refresh
- optional: default skeleton/error UI for fast prototyping
- One-page experience: Everything tiled in a single, fast, responsive view.
- Cards = code: No rigid widgets. You control data and UI per card. No boundaries.
- Kernel-driven orchestration: The framework manages card registration, state, refresh, layout, and theming.
- Flexible bento layout: Supports KPI tiles, big charts, mixed grid – all snap together.
- No data constraints: Fetch from REST, websockets, files, or compute directly. Anything goes.
- TypeScript-first: Your card types and logic are fully typesafe, strongly typed front-to-back.
- Install:
pnpm install
- Start the dashboard app:
pnpm --filter @aob/web dev
- Edit or add cards:
Work in
packages/cards/src/. Cards export their data-fetch + render code.
- React 19, Vite 7, TypeScript 5, node v25.x
- Turborepo monorepo
- Everything modular—bring your own styles, data sources, preferences.