FinBoard - Customizable Finance Dashboard

FinBoard is a modern, customizable finance dashboard built with Next.js. It allows users to create real-time financial widgets by connecting to any financial API.

Screenshots

Below are example screenshots of the dashboard:

Dashboard Overview

Theme Customization

Widget Settings Panel

• Connect to any financial API with a visual field mapper
• Chart, Table, and Card widgets with multiple configuration options
• Drag and drop to rearrange widgets
• Real-time data support (API polling and WebSocket for supported sources)
• Dashboard configuration saved to localStorage
• Export and import dashboard layouts
• Theme customization with dark/light mode and accent colors
• Responsive design for all screen sizes

Tech Stack

• Next.js (frontend framework)
• TypeScript
• Tailwind CSS, CSS, Styled-Components (styling)
• Zustand (state management)
• Recharts, lightweight-charts (data visualization)
• SWR (data fetching)
• Deployed on Vercel/Netlify/AWS

Setup

1. Install dependencies

   pnpm install

2. Run the development server

   pnpm dev

3. Open http://localhost:3000/dashboard in your browser.

Project Structure

• app/ - Next.js app directory (pages, API proxy, dashboard)
• components/ - UI components and widgets
• lib/ - API utilities, data mappers, hooks, and stores
• types/ - TypeScript type definitions

Example API Endpoints

• Alpha Vantage (CSV):
  https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=IBM&apikey=demo, https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=IBM&apikey=demo" , https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=IBM&apikey=demo&datatype=csv please use your api key inplace of demo also works for csv data response from alpha vantage
• Finnhub:
  https://finnhub.io/api/v1/quote?symbol=AAPL&token=YOUR_KEY
• CoinGecko: https://api.coingecko.com/api/v3/coins/bitcoin/market_chart?vs_currency=usd&days=7

Troubleshooting

• Ensure your API keys are valid and set in .env.local
• All API calls should go through /api/proxy to handle CORS
• Use the "Test API" feature in the widget creator to preview and map fields