React TypeScript Dashboard

React + TypeScript analytics dashboard with charts, filters and a clean layout.

Sample/demo project — created for portfolio purposes, not affiliated with any employer.

Overview

A small analytics dashboard that visualizes demo metrics (page views, signups, revenue and conversion) using Recharts. It is intentionally self-contained: data comes from an in-memory mock dataset, so the app runs fully client-side with no backend or API keys. The purpose is to show a clean, typed, modern React + TypeScript codebase that is easy to read and extend.

Features

• KPI summary cards computed from the selected date range
• Interactive date-range filter (7 / 30 / 90 days)
• Area, bar and pie charts built with Recharts
• Strictly typed domain models and hooks
• Fully responsive layout with a dark theme
• Zero backend required — works from mock data out of the box

Tech Stack

• React 18 + TypeScript 5
• Vite 5 (fast dev server and builds)
• Recharts for charting
• CSS variables for theming

Project Structure

react-typescript-dashboard/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── src/
    ├── main.tsx
    ├── App.tsx
    ├── App.css
    ├── components/
    │   ├── Charts.tsx
    │   ├── KpiCards.tsx
    │   └── RangeFilter.tsx
    ├── data/
    │   └── metrics.ts
    ├── hooks/
    │   └── useDashboard.ts
    └── types/
        └── index.ts

Getting Started

Prerequisites

• Node.js 18+ (Node 20 recommended)
• npm

Installation

npm install

Run

npm run dev

Open the printed local URL (usually http://localhost:5173).

Build for production

npm run build
npm run preview

Type check

npm run typecheck

Examples

Extend the demo dataset in src/data/metrics.ts to add your own numbers:

export const REGIONS: RegionData[] = [
  { region: "North America", sessions: 51200 },
  { region: "Europe", sessions: 38400 },
];

Add a new KPI card by appending to the summaries array in src/hooks/useDashboard.ts:

{ label: "Page Views", key: "pageViews", value: totalViews, delta: 8.4, formatter: "number" },

Configuration

No environment variables are required to run this project. Everything is self-contained.

Variable	Required	Description
(none)	No	The dashboard runs entirely from local mock data

License

MIT — see LICENSE. Copyright (c) 2026 Teja.