A premium, dark-themed founder dashboard to simulate, strategize, and scale a fictional startup.
Built with React · TanStack Start · Tailwind CSS v4 · Recharts · TypeScript
Empire OS is a fully interactive startup simulation dashboard that lets you experience running a high-growth company. Track company valuation, monthly revenue, hiring pipelines, product roadmaps, and financial analytics — all in a beautifully designed, responsive interface.
Design Philosophy: Cosmic Berry theme — dark slate backgrounds with vibrant fuchsia/magenta primary colors, lavender accents, and lime green success indicators. Every pixel is crafted to feel premium and modern.
- 5 animated KPI cards — Company Valuation, Monthly Revenue, Active Users, Growth Rate, Cash Balance
- Real-time sparkline charts with gradient fills
- Revenue vs Users dual-line chart with gradient strokes
- Revenue Mix donut chart by department
- Cash Balance area chart
- Latest Activity feed with simulation events
- Cash Flow — Inflow vs outflow area chart with gradient fills
- Burn Rate — Monthly cash burn trend line
- Funding Rounds Timeline — Visual history from Pre-Seed to Series B
- ROI by Initiative — Horizontal bar chart comparing channel performance
- Key Financial Ratios — Comprehensive table with delta indicators (Gross Margin, CAC, LTV, Churn, etc.)
- Kanban-style pipeline — Applied → Interview → Offer → Hired stages
- Add Candidate dialog — Form with Name, Role, and Source fields
- Headcount by Department — Current vs planned bar chart
- Team Growth — Animated headcount trend line
- Org Structure — Department cards with progress indicators
- Animated Product Journey — Progress bar that draws in on page load
- 5-stage pipeline — Ideation → MVP → Beta → Launch → Scale
- Upcoming Milestones — Quarterly goals with status chips (shipped, in-progress, planned)
- Global Expansion — Regional growth cards with customer counts and growth percentages
- Toggle-able widget grid — Show/hide any chart widget
- 6 pre-built widgets — Revenue Trend, Burn Rate, Revenue Mix, Cash Flow, Team Growth, ROI by Channel
- Fully responsive masonry layout
| Token | Color | Usage |
|---|---|---|
--primary |
oklch(0.65 0.28 330) — Fuchsia |
Buttons, active states, primary accents |
--accent |
oklch(0.72 0.18 290) — Lavender |
Secondary highlights, gradients |
--success |
oklch(0.78 0.22 145) — Lime Green |
Positive deltas, growth indicators |
--warning |
oklch(0.82 0.16 80) — Amber |
Caution states |
--destructive |
oklch(0.62 0.24 25) — Red |
Negative deltas, decline indicators |
--background |
oklch(0.13 0.015 280) — Dark Slate |
Page background |
--card |
oklch(0.17 0.02 280) — Slate |
Card surfaces |
| Font | Usage |
|---|---|
| Plus Jakarta Sans (400–800) | Headings, body text, UI labels |
| JetBrains Mono (400–600) | Numbers, metrics, code, timestamps |
- Tight letter-spacing (
-0.025emheadings,-0.01embody) oklch()color space for perceptually uniform colors- Glassmorphism cards with subtle inset shadows
- Smooth gradient backgrounds (fuchsia → lavender)
- Subtle ambient radial gradients on the body
| Layer | Technology |
|---|---|
| Framework | TanStack Start (file-based routing + SSR) |
| UI Library | React 19 |
| Language | TypeScript 5.8 |
| Styling | Tailwind CSS v4 + Custom CSS utilities |
| Charts | Recharts 2 |
| UI Components | Radix UI primitives (Dialog, Label, etc.) |
| Icons | Lucide React |
| Build Tool | Vite 8 |
| Linting | ESLint 9 + Prettier |
empire-builder-dash/
├── public/ # Static assets
├── src/
│ ├── components/
│ │ ├── ui/ # Radix-based primitives (Button, Dialog, Input, etc.)
│ │ ├── animated-number.tsx # Animated counter component
│ │ ├── app-shell.tsx # Layout shell — sidebar, topbar, navigation
│ │ ├── chart-card.tsx # Reusable chart container + tooltip styles
│ │ └── kpi-card.tsx # KPI metric card with sparklines
│ ├── hooks/ # Custom React hooks
│ ├── lib/
│ │ ├── mock-data.ts # Seeded pseudo-random data generators
│ │ └── utils.ts # Utility functions (cn, etc.)
│ ├── routes/
│ │ ├── __root.tsx # Root layout, SEO meta, font imports
│ │ ├── index.tsx # Overview dashboard (/)
│ │ ├── financials.tsx # Financial analytics (/financials)
│ │ ├── hiring.tsx # Hiring pipeline (/hiring)
│ │ ├── roadmap.tsx # Product roadmap (/roadmap)
│ │ └── dashboards.tsx # Custom dashboards (/dashboards)
│ ├── styles.css # Global theme — Cosmic Berry palette + tokens
│ ├── router.tsx # TanStack Router config
│ └── routeTree.gen.ts # Auto-generated route tree
├── package.json
├── tsconfig.json
├── vite.config.ts
└── eslint.config.js
- Node.js ≥ 18 — Install with nvm
- npm ≥ 9
# Clone the repository
git clone https://github.com/rishiii183/Frontend-War.git
# Navigate to the project
cd Frontend-War
# Install dependencies (use --legacy-peer-deps to resolve peer conflicts)
npm install --legacy-peer-deps
# Start the development server
npm run devThe app will be available at http://localhost:8080/
| Command | Description |
|---|---|
npm run dev |
Start Vite dev server with HMR |
npm run build |
Production build |
npm run preview |
Preview production build locally |
npm run lint |
Run ESLint |
npm run format |
Format code with Prettier |
Empire OS is fully responsive across all breakpoints:
- Mobile (< 768px) — Collapsible sidebar with hamburger menu, stacked card grid
- Tablet (768px – 1024px) — 2-column layouts, compact navigation
- Desktop (> 1024px) — Full sidebar, 3–5 column grids, max-width container at 1600px
The main layout wrapper with a persistent sidebar (desktop) or slide-in drawer (mobile), top navigation bar with breadcrumbs, search, and action buttons.
Animated metric cards displaying a value, percentage delta, icon, and embedded sparkline chart. Uses the AnimatedNumber component for smooth count-up animations.
A reusable wrapper for Recharts visualizations with consistent title, subtitle, and optional action slot. Includes a shared chartTooltipStyle() function for uniform tooltip theming.
All data is generated using a seeded pseudo-random number generator (mulberry32) to ensure consistent values between server and client renders. No external API calls needed.
This project is open source and available under the MIT License.
Built with ❤️ by rishiii183