Finboard

Description

Finboard is a customizable financial dashboard application built with Next.js. It provides users with an interactive interface to create, manage, and visualize financial data through various widget types including charts, tables, cards, and financial lists. The application features a responsive grid layout, theme support, and real-time data querying capabilities.

Features

• Customizable Dashboard: Drag-and-drop grid layout for arranging widgets
• Widget Types: Support for chart widgets, table widgets, card widgets, and financial list widgets
• Data Integration: API proxy for fetching financial data
• Theme Support: Light and dark theme options
• Responsive Design: Mobile-friendly interface using Tailwind CSS
• State Management: Efficient state handling with Zustand
• Type Safety: Full TypeScript support

Technologies Used

• Framework: Next.js 16
• Frontend: React 19
• Styling: Tailwind CSS
• UI Components: Radix UI
• Charts: Recharts
• State Management: Zustand
• Data Fetching: TanStack React Query
• Layout: React Grid Layout
• Language: TypeScript

Installation

1. Clone the repository:

   git clone <repository-url>
   cd finboard
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm run dev
   

4. Open your browser and navigate to http://localhost:3000

Usage

1. Upon launching the application, you will see the main dashboard interface
2. Use the dashboard controls to add new widgets
3. Select from available widget types: Chart, Table, Card, or Finance List
4. Configure widget settings through the edit modal
5. Arrange widgets on the grid by dragging and resizing
6. Switch between light and dark themes using the theme provider

Project Structure

• src/app/: Next.js app directory with pages and API routes
• src/components/: Reusable UI components and widgets
• src/store/: State management with Zustand
• src/hooks/: Custom React hooks
• src/lib/: Utility functions and API configurations
• src/types/: TypeScript type definitions
• src/config/: Application configuration files

Scripts

• npm run dev: Start the development server
• npm run build: Build the application for production
• npm run start: Start the production server
• npm run lint: Run ESLint for code linting

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request