startup-dashboard

A SaaS metrics dashboard that tracks the numbers every founder obsesses over: MRR, churn, LTV, CAC, and customer growth. Built with Next.js, TypeScript, and Recharts.

Why This Exists

Early-stage startups need a clear view of their unit economics without paying for expensive analytics tools. This dashboard computes and visualises the core metrics from raw monthly data � the same numbers a Series A investor will ask about.

What It Tracks

• MRR & ARR â�� Monthly and annualised recurring revenue with growth trends
• Churn â�� Customer churn rate and revenue churn rate over time
• Unit Economics â�� Customer Acquisition Cost (CAC), Lifetime Value (LTV), and the LTV:CAC ratio
• Customer Growth â�� New customers vs churned customers, net growth per month
• CAC Payback â�� How many months of revenue to recover acquisition spend

Screenshot

������������������������������������������������������������
�  Startup Dashboard                          [3M][6M][12M]�
������������������������������������������������������������
� MRR  � ARR  � Cust �Churn � LTV  � CAC  � LTV:CAC        �
�$52K  �$624K � 520  �3.2%  �$1.6K �$198  � 8.1x           �
������������������������������������������������������������
�  [MRR Area Chart]         �  [Churn Line Chart]          �
�  ��������                �  ��������                    �
������������������������������������������������������������
�  [LTV vs CAC Bars]        �  [Customer Growth Bars]      �
�  �� �� �� ��              �  �� �� �� ��                �
������������������������������������������������������������
�  Month  MRR    ARR    Cust  New  Churned  Churn%  ARPU   �
�  2024-01 ...                                              �
������������������������������������������������������������

Getting Started

npm install
npm run dev

Open http://localhost:3000.

Architecture

src/
��� app/                    # Next.js app router
�   ��� layout.tsx
�   ��� globals.css
�   ��� page.tsx
��� components/
�   ��� Dashboard.tsx       # Main layout � composes everything
�   ��� KPICard.tsx         # Summary metric cards
�   ��� TimeRangeSelector.tsx
�   ��� MRRChart.tsx        # Revenue area chart
�   ��� ChurnChart.tsx      # Churn rate lines
�   ��� UnitEconomicsChart.tsx  # LTV vs CAC bars
�   ��� CustomerGrowthChart.tsx # New vs churned bars
�   ��� MetricsTable.tsx    # Full monthly detail table
��� data/
�   ��� types.ts            # Domain types (MonthlyMetrics, DerivedMetrics, etc.)
�   ��� seed.ts             # Deterministic synthetic data generator
��� hooks/
�   ��� useDashboard.ts     # State management: seed � enrich � filter � KPIs
��� utils/
    ��� metrics.ts          # Pure computation: churn, CAC, LTV, formatting

Metrics Definitions

Metric	Formula
Customer Churn Rate	churned_customers / previous_customers
Revenue Churn Rate	churned_revenue / previous_MRR
CAC	acquisition_spend / new_customers
LTV	ARPU / monthly_churn_rate
LTV:CAC Ratio	LTV / CAC (healthy > 3x)
CAC Payback	CAC / ARPU (in months)
MRR Growth	(current_MRR - previous_MRR) / previous_MRR

Testing

npm test

Tests cover the metrics computation engine and seed data generator � the business logic that needs to be correct.

Tech Stack

• Next.js 14 â�� React framework with App Router
• TypeScript â�� Strict mode throughout
• Recharts â�� Composable chart components
• date-fns â�� Date utilities

License

MIT