Finance Dashboard

A customizable real-time finance monitoring dashboard built with Next.js, Redux, and Recharts. Connect to any financial API and create dynamic widgets to track stocks, cryptocurrencies, and financial data.

🔗 Links

• Live Demo: https://fin-board-sneha.vercel.app/
• Project Video: Watch Demo

Features

✅ Widget Management System

• Add Widgets: Create custom finance data widgets by connecting to any API
• Remove Widgets: Easy deletion of widgets from your dashboard
• Rearrange Layout: Drag-and-drop functionality to reorganize widgets
• Multiple Display Modes:
  • Card View: Display key metrics in a clean card layout
  • Table View: Paginated data tables with search functionality
  • Chart View: Visualize data with line, bar, or area charts

✅ API Integration & Data Handling

• Dynamic Data Mapping: Select specific fields from API responses
• Real-time Updates: Configurable auto-refresh intervals
• Data Caching: Intelligent caching to minimize API calls
• Error Handling: Comprehensive error states and retry logic

✅ User Interface & Experience

• Dark/Light Theme: Toggle between dark and light modes
• Responsive Design: Works on desktop, tablet, and mobile
• Loading States: Smooth loading animations and skeleton screens
• Interactive Charts: Multiple chart types with Recharts

✅ Data Persistence

• Local Storage: All configurations persist across sessions
• State Management: Redux Toolkit for predictable state updates
• Auto-Save: Changes automatically saved

Tech Stack

• Framework: Next.js 16 with App Router
• Language: TypeScript
• State Management: Redux Toolkit
• Styling: Tailwind CSS
• Charts: Recharts
• Grid Layout: React Grid Layout
• Icons: Lucide React

Getting Started

Prerequisites

• Node.js 18+ installed
• npm or yarn package manager

Installation

1. Clone the repository:

git clone <your-repo-url>
cd finboard

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open http://localhost:3000 in your browser

Usage Guide

Adding a Widget

1. Click the "Add Widget" button in the top right
2. Enter a widget name (e.g., "Bitcoin Price Tracker")
3. Enter an API URL (see example APIs below)
4. Set a refresh interval (minimum 10 seconds)
5. Click "Test Connection" to verify the API
6. Select display mode: Card, Table, or Chart
7. If using Chart mode, choose chart type: Line, Bar, or Area
8. Select fields from the API response to display
9. Click "Add Widget" to add it to your dashboard

Example APIs

Cryptocurrency APIs (No API Key Required)

Bitcoin Price (Coinbase)

https://api.coinbase.com/v2/exchange-rates?currency=BTC

Recommended fields:

• data.currency
• data.rates.USD
• data.rates.INR

Ethereum Price (Coinbase)

https://api.coinbase.com/v2/exchange-rates?currency=ETH

Recommended fields:

• data.currency
• data.rates.USD
• data.rates.EUR

Bitcoin from CoinGecko

https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd,inr,eur

Recommended fields:

• bitcoin.usd
• bitcoin.inr
• bitcoin.eur

Multiple Crypto Prices

https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum,cardano&vs_currencies=usd

Widget Customization

Card Mode

Perfect for displaying key metrics (3-5 fields):

• Shows each field in a separate card
• Formatted numbers with proper separators
• Color-coded values

Table Mode

Best for comparing multiple data points:

• Supports pagination (10 items per page)
• Search functionality
• Sortable columns
• Handles arrays and nested objects

Chart Mode

Visualize trends over time:

• Line Charts: Best for continuous data
• Bar Charts: Compare discrete values
• Area Charts: Show cumulative totals

Managing Widgets

• Refresh: Click the refresh icon to manually update data
• Delete: Click the trash icon to remove a widget
• Resize: Drag the bottom-right corner to resize
• Reorder: Drag widgets to rearrange your dashboard

Theme Toggle

Click the sun/moon icon in the header to switch between light and dark themes.

Project Structure

finboard/
├── app/
│   ├── globals.css          # Global styles
│   ├── layout.tsx           # Root layout
│   ├── page.tsx             # Home page
│   └── providers.tsx        # Redux provider
├── components/
│   ├── dashboard/
│   │   ├── AddWidgetButton.tsx
│   │   ├── Dashboard.tsx
│   │   └── WidgetGrid.tsx
│   ├── modals/
│   │   └── AddWidgetModal.tsx
│   └── widgets/
│       ├── ChartWidget.tsx
│       ├── TableWidget.tsx
│       └── WidgetCard.tsx
├── hooks/
│   ├── useApiData.ts        # Custom hook for API calls
│   └── useWidgets.ts        # Custom hook for widget management
├── services/
│   ├── api.ts               # API service functions
│   └── storage.ts           # Local storage utilities
├── store/
│   ├── index.ts             # Redux store configuration
│   ├── themeSlice.ts        # Theme state management
│   └── widgetSlice.ts       # Widget state management
├── types/
│   └── index.ts             # TypeScript type definitions
└── utils/
    ├── constants.ts         # App constants
    └── formatters.ts        # Data formatters

API Integration Guidelines

Using APIs with Authentication

For APIs requiring API keys (like Alpha Vantage, Finnhub):

1. Create a .env.local file in the root directory:

NEXT_PUBLIC_ALPHA_VANTAGE_API_KEY=your_api_key_here
NEXT_PUBLIC_FINNHUB_API_KEY=your_api_key_here

2. Use the API with your key in the URL:

https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=IBM&apikey=YOUR_API_KEY

Rate Limiting

• Most free APIs have rate limits (e.g., 5 requests/minute)
• Use longer refresh intervals (60+ seconds) to avoid hitting limits
• The app includes automatic caching to reduce API calls

CORS Issues

If you encounter CORS errors, the API may not allow browser requests. Solutions:

• Use a proxy server
• Check if the API has a CORS-enabled endpoint
• Use APIs specifically designed for browser use

Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm start - Start production server
• npm run lint - Run ESLint

Adding New Features

The codebase is modular and extensible:

1. New Widget Types: Create a new component in components/widgets/
2. New Data Sources: Add service functions in services/api.ts
3. New Chart Types: Extend ChartWidget.tsx with Recharts components
4. State Management: Add new slices in store/

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import project in Vercel
3. Deploy with one click

Other Platforms

The app can be deployed to:

• Netlify
• AWS Amplify
• Railway
• Render

Troubleshooting

Widgets Not Loading

• Check API URL is correct and accessible
• Verify no CORS issues in browser console
• Ensure refresh interval is set properly

Data Not Updating

• Check browser console for errors
• Verify API rate limits not exceeded
• Clear browser cache and local storage

Layout Issues

• Ensure react-grid-layout CSS is imported
• Check responsive breakpoints in WidgetGrid.tsx

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

License

This project is open source and available under the MIT License.

Acknowledgments

• Next.js - React framework
• Redux Toolkit - State management
• Recharts - Charting library
• React Grid Layout - Drag and drop grid
• Tailwind CSS - Styling
• Lucide - Icons

Support

For questions or issues, please open an issue on GitHub.