InsightFlow

A business analytics dashboard with interactive data visualization, KPI tracking, AI-powered insights, and comprehensive reporting. Built with modern web technologies.

Live Demo

insightflow-brown.vercel.app

Features

• Executive Dashboard — KPI metric cards with animated counters, revenue trends, and performance summaries
• Revenue Analytics — Interactive revenue charts with time-range selectors, growth rate tracking, and breakdown by source
• Customer Insights — Customer acquisition funnel, retention rates, cohort analysis, and segmentation views
• Engagement Metrics — User engagement tracking with session duration, page views, bounce rates, and conversion funnels
• AI Insights — AI-generated business recommendations, anomaly detection, and predictive trend analysis
• Analytics Deep Dive — Drill-down charts with filtering, date range selectors, and exportable data views
• Sidebar Navigation — Collapsible sidebar with route-based active states and mobile drawer
• Responsive Design — Desktop sidebar layout with mobile-optimized navigation and touch-friendly charts
• Skeleton Loading — Graceful loading states with shimmer placeholders across all data sections
• Smooth Animations — Framer Motion entrance animations, staggered reveals, and hover interactions

Screenshots

Getting Started

Prerequisites

• Node.js 18+
• npm

Installation

# Clone the repository
git clone https://github.com/donnywin85/insightflow.git
cd insightflow

# Install dependencies
npm install

# Start the development server
npm run dev

Open http://localhost:3000 to view the dashboard.

Build

npm run build
npm start

Project Structure

insightflow/
├── src/
│   ├── app/
│   │   ├── layout.tsx              # Root layout with sidebar and top bar
│   │   ├── page.tsx                # Redirects to /dashboard
│   │   ├── (dashboard)/dashboard/  # Main dashboard with KPI cards
│   │   ├── revenue/                # Revenue analytics and charts
│   │   ├── customers/              # Customer insights and segmentation
│   │   ├── engagement/             # User engagement metrics
│   │   ├── analytics/              # Deep-dive analytics views
│   │   └── ai-insights/            # AI-powered business insights
│   ├── components/
│   │   ├── layout/                 # Sidebar, TopBar, MobileNav
│   │   └── ui/                     # MetricCard, Badge, DateRangeSelector, Skeleton
│   └── lib/
│       └── data.ts                 # Mock data and utility functions

Tech Stack

• Framework: Next.js 14 with App Router
• Language: TypeScript (strict mode)
• Styling: Tailwind CSS 3
• Charts: Recharts 3 (area, bar, pie, line)
• Animations: Framer Motion 12
• Icons: Lucide React
• Deployment: Vercel