Financial DashBoard

FinBoard is a configurable, real-time finance dashboard that allows users to build their own monitoring workspace by connecting to multiple financial APIs and visualizing data through customizable widgets.

The project focuses on scalability, performance, and flexibility, enabling non-technical users to create dashboards without hardcoding API structures.

Live Demo

URL: https://financial-dashboard-rho-kohl.vercel.app/

---

Key Highlights

• Widget-based architecture (Cards, Tables, Charts)
• API-agnostic data mapping (dynamic JSON field selection)
• Auto-refresh per widget
• Drag & drop dashboard layout
• Persistent dashboard state
• Export / Import dashboard configuration
• Dark / Light theme with persistence
• API caching & rate limiting

---

Architecture Overview

FinBoard follows a layered, configuration-driven architecture:

User Interaction
   ↓
UI Components (Widgets, Modals, Navbar)
   ↓
Zustand State Stores
   ↓
Data Fetching & Caching Layer
   ↓
External Financial APIs (Finnhub, Custom APIs)

👉 For full details, see ARCHITECTURE.md

---

Project Structure

frontend/
├── app/                      # Next.js App Router
│   │── layout.tsx
│   │── page.tsx
│   │── globals.css
│
│   ├── components/
│   │   ├── layout/
│   │   │   ├── Navbar.tsx
│   │   │   └── TemplateModal.tsx
│   │   │
│   │   ├── widget/
│   │   │   ├── AddWidget.tsx
│   │   │   ├── AddWidgetModal.tsx
│   │   │   ├── DataWidget.tsx
│   │   │   ├── DraggableWidget.tsx
│   │   │   ├── EmptyDashboard.tsx
│   │   │   ├── WidgetCard.tsx
│   │   │   └── StockChart.tsx
│   │   │
│   │   ├── ui/
│   │   │   ├── ModernTable.tsx
│   │   │   ├── Modal.tsx
│   │   │   ├── Button.tsx
│   │   │   └── ThemeToggle.tsx
│   │   │
│   │   └── ThemeProvider.tsx
│
│   ├── store/                    # Zustand stores
│   │   ├── WidgetStore.ts
│   │   └── themeStore.ts
│
│   ├── utils/                    # Core logic
│   │   ├── apiCache.ts
│   │   └── dataMapper.ts
│
│
├── public/                       # Static assets & screenshots
│
├── ARCHITECTURE.md
├── README.md
├── package.json
└── tsconfig.json

---

Core Features

1️⃣ Widget Management

• Add, remove, update widgets

• Supported widget types:

  • Card – Key metrics
  • Table – Multi-row financial data
  • Chart – Line / price charts

• Drag & drop reordering

• Per-widget refresh interval

---

2️⃣ API Integration & Data Mapping

• Supports:

  • Finnhub (pre-integrated endpoints)
  • Custom public APIs

• Dynamic JSON field explorer

• Path-based data extraction (metric.peRatio, quote.c, etc.)

• API response normalization

---

3️⃣ Real-Time & Performance

• Per-widget polling
• TTL-based API caching
• Request deduplication
• Domain-level rate limiting
• Error isolation per widget

---

4️⃣ Persistence & Recovery

• Widget configuration saved automatically
• Dashboard restored on refresh
• Export dashboard as JSON
• Import dashboard from JSON file

---

5️⃣ UI / UX

• Fully responsive layout
• Skeleton loading states
• Error handling & retry hints
• Mobile-friendly navigation
• Theme toggle (Dark / Light)

---

Tech Stack

Frontend

• Next.js (App Router)
• TypeScript
• React

Styling

• Tailwind CSS

State Management

• Zustand (primary)
• Local persistence with zustand/persist

Data Visualization

• Recharts
• Chart.js

Utilities

• Custom API cache & rate limiter
• Dynamic data mapper

API Configuration

Finnhub

1. Create a free account at https://finnhub.io
2. Generate an API key
3. Add to .env.local:

NEXT_PUBLIC_FINNHUB_API_KEY=your_api_key_here

⚠️ API keys are never committed to the repository.

Getting Started

1. Clone Repository

git clone https://github.com/your-username/financial_Dashboard.git
cd financial Dashboard

2. Install Dependencies

npm install

3. Start Development Server

npm run dev

App will be available at: http://localhost:3000

Export / Import Dashboard

• Export: Download current dashboard configuration as JSON
• Import: Upload JSON file to restore dashboard
• Includes widget order, configuration, and settings

Error Handling

• API rate-limit detection
• Invalid API URL handling
• Partial widget failures do not crash dashboard
• Import validation for corrupted JSON

Design Decisions

• Zustand over Redux → less boilerplate, UI-focused state
• Adapter-style data mapping → API-agnostic widgets
• Widget-level isolation → scalable & fault tolerant
• Client-first architecture → fast iteration & UX

Author

Shubham Yadav