{"id":41835051,"url":"https://github.com/codernotme/finboard","last_synced_at":"2026-01-25T09:03:59.149Z","repository":{"id":334187209,"uuid":"1140393387","full_name":"codernotme/finboard","owner":"codernotme","description":"Customizable Finance Dashboard where users can build their own real-time finance monitoring dashboard by connecting to various financial APIs and displaying real-time data through customizable widgets.","archived":false,"fork":false,"pushed_at":"2026-01-23T08:42:49.000Z","size":186,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-24T01:29:21.982Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codernotme.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-23T08:07:36.000Z","updated_at":"2026-01-23T08:42:53.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/codernotme/finboard","commit_stats":null,"previous_names":["codernotme/finboard"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/codernotme/finboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codernotme%2Ffinboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codernotme%2Ffinboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codernotme%2Ffinboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codernotme%2Ffinboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codernotme","download_url":"https://codeload.github.com/codernotme/finboard/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codernotme%2Ffinboard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28750659,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T09:00:19.176Z","status":"ssl_error","status_checked_at":"2026-01-25T09:00:04.131Z","response_time":113,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-25T09:03:30.626Z","updated_at":"2026-01-25T09:03:59.134Z","avatar_url":"https://github.com/codernotme.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📊 FinBoard - Customizable Finance Dashboard\n\n\u003e A powerful, real-time finance monitoring dashboard that lets you track stocks, markets, and portfolios with fully customizable widgets.\n\n![License](https://img.shields.io/badge/license-MIT-blue.svg)\n![Next.js](https://img.shields.io/badge/Next.js-13+-black)\n![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue)\n![Tailwind CSS](https://img.shields.io/badge/Tailwind-3.0+-38B2AC)\n\n---\n\n## ✨ Features\n\n### 🎯 Core Features\n- **📈 Multiple Widget Types** - Tables, Finance Cards, and Interactive Charts\n- **🎨 Drag \u0026 Drop Layout** - Rearrange your dashboard exactly how you want it\n- **⚡ Real-time Data** - Live updates from financial APIs with configurable refresh intervals\n- **🔧 Fully Customizable** - Configure every widget with custom titles, metrics, and display formats\n- **💾 Auto-Save** - Your dashboard configuration persists across browser sessions\n- **📱 Responsive Design** - Works seamlessly on desktop, tablet, and mobile devices\n\n### 🚀 Advanced Features\n- **🌓 Theme Switching** - Light and dark mode support\n- **📊 Multiple Chart Types** - Candlestick and line charts with zoom capabilities\n- **🔍 Smart Search \u0026 Filters** - Find and filter stocks instantly\n- **💰 Custom Formatting** - Display data in multiple currencies and formats\n- **📤 Export/Import** - Backup and share your dashboard configurations\n- **⚡ Smart Caching** - Optimized API usage with intelligent data caching\n\n---\n\n## 🎬 Demo\n\n🔗 **Live Demo**: [finboard-demo.vercel.app](https://finboard-demo.vercel.app) *(Coming soon)*\n\n### Screenshots\n\n| Dashboard View | Widget Configuration | Mobile Responsive |\n|----------------|---------------------|-------------------|\n| ![Dashboard](./docs/images/dashboard.png) | ![Config](./docs/images/config.png) | ![Mobile](./docs/images/mobile.png) |\n\n---\n\n## 🛠️ Tech Stack\n\n### Frontend\n- **Framework**: [Next.js 13+](https://nextjs.org/) with App Router\n- **Language**: TypeScript\n- **Styling**: Tailwind CSS + shadcn/ui\n- **State Management**: Redux Toolkit / Zustand\n- **Charts**: Recharts\n- **Drag \u0026 Drop**: dnd-kit\n\n### APIs\n- **Alpha Vantage** - Stock market data\n- **Finnhub** - Real-time financial data\n- Support for custom API integrations\n\n### Deployment\n- **Platform**: Vercel (recommended) / Netlify / AWS\n- **CI/CD**: GitHub Actions\n\n---\n\n## 🚀 Getting Started\n\n### Prerequisites\n\nMake sure you have the following installed:\n- **Node.js** 18+ ([Download](https://nodejs.org/))\n- **npm** or **yarn** or **pnpm**\n- **Git**\n\n### Installation\n\n1. **Clone the repository**\n```bash\ngit clone https://github.com/yourusername/finboard.git\ncd finboard\n```\n\n2. **Install dependencies**\n```bash\nnpm install\n# or\nyarn install\n# or\npnpm install\n```\n\n3. **Set up environment variables**\n```bash\ncp .env.example .env.local\n```\n\nEdit `.env.local` and add your API keys:\n```env\nNEXT_PUBLIC_ALPHA_VANTAGE_API_KEY=your_alpha_vantage_key\nNEXT_PUBLIC_FINNHUB_API_KEY=your_finnhub_key\n```\n\n4. **Install shadcn/ui components** (first time only)\n```bash\n# Initialize shadcn/ui\nnpx shadcn@latest init\n\n# Install all required components\nchmod +x scripts/install-shadcn.sh\n./scripts/install-shadcn.sh\n```\n\n5. **Run the development server**\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n```\n\n6. **Open your browser**\nNavigate to [http://localhost:3000](http://localhost:3000)\n\n---\n\n## 🔑 Getting API Keys\n\n### Alpha Vantage (Free)\n1. Visit [Alpha Vantage](https://www.alphavantage.co/support/#api-key)\n2. Enter your email and get your free API key\n3. **Limit**: 25 requests/day (free tier)\n\n### Finnhub (Free)\n1. Visit [Finnhub](https://finnhub.io/register)\n2. Create a free account\n3. Copy your API key from the dashboard\n4. **Limit**: 60 calls/minute (free tier)\n\n### Setting Up API Keys\n\n**Option 1: Environment Variables** (Recommended)\n```env\n# .env.local\nNEXT_PUBLIC_ALPHA_VANTAGE_API_KEY=YOUR_KEY_HERE\nNEXT_PUBLIC_FINNHUB_API_KEY=YOUR_KEY_HERE\n```\n\n**Option 2: In-App Configuration**\n1. Open FinBoard\n2. Click Settings (⚙️) in the top right\n3. Navigate to \"API Keys\" tab\n4. Enter your API keys and save\n\n---\n\n## 📖 Usage Guide\n\n### Creating Your First Widget\n\n1. **Click \"Add Widget\"** button on the dashboard\n2. **Select Widget Type**:\n   - **Table** - For viewing multiple stocks in a list\n   - **Finance Card** - For watchlists, gainers, or quick stats\n   - **Chart** - For price trends and technical analysis\n3. **Configure the Widget**:\n   - Set a custom title\n   - Choose your API endpoint\n   - Select which data fields to display\n   - Set refresh interval\n4. **Click \"Create\"** - Your widget appears instantly!\n\n### Customizing Your Dashboard\n\n**Rearranging Widgets**\n- Simply **drag and drop** widgets to your preferred position\n- Layout automatically saves\n\n**Editing a Widget**\n- Click the **settings icon** (⚙️) on any widget\n- Modify title, data fields, or refresh settings\n- Changes apply immediately\n\n**Deleting a Widget**\n- Click the **trash icon** (🗑️) on any widget\n- Confirm deletion\n- Widget removed instantly\n\n### Widget Types Explained\n\n#### 📊 Table Widget\nPerfect for monitoring multiple stocks at once.\n\n**Features**:\n- Paginated view (10, 25, 50, 100 rows)\n- Search across all columns\n- Sort by any column\n- Filter by price, volume, change %\n\n**Example Use Cases**:\n- Portfolio tracking\n- Market screening\n- Sector comparison\n\n#### 💰 Finance Card Widget\nQuick overview of specific market segments.\n\n**Types**:\n- **Watchlist** - Your favorite stocks\n- **Market Gainers** - Top performers\n- **Performance Data** - Portfolio stats\n- **Financial Data** - Key metrics (P/E, Market Cap)\n\n**Features**:\n- Compact card view\n- Color-coded gains/losses\n- List or single card display\n\n#### 📈 Chart Widget\nVisualize price movements and trends.\n\n**Chart Types**:\n- **Candlestick** - OHLC data with volume\n- **Line Chart** - Clean price trends\n\n**Time Intervals**:\n- Daily (intraday)\n- Weekly\n- Monthly\n\n**Features**:\n- Interactive tooltips\n- Zoom and pan\n- Date range selection\n\n---\n\n## 📁 Project Structure\n\n```\nfinboard/\n├── src/\n│   ├── app/                      # Next.js App Router\n│   │   ├── layout.tsx           # Root layout\n│   │   ├── page.tsx             # Home page\n│   │   ├── dashboard/           # Dashboard routes\n│   │   └── api/                 # API routes (proxy)\n│   │\n│   ├── components/              # React components\n│   │   ├── widgets/            # Widget components\n│   │   │   ├── TableWidget.tsx\n│   │   │   ├── CardWidget.tsx\n│   │   │   └── ChartWidget.tsx\n│   │   ├── layout/             # Layout components\n│   │   │   ├── Header.tsx\n│   │   │   ├── Sidebar.tsx\n│   │   │   └── DashboardGrid.tsx\n│   │   ├── modals/             # Modal dialogs\n│   │   │   ├── AddWidgetModal.tsx\n│   │   │   └── WidgetConfigModal.tsx\n│   │   ├── ui/                 # shadcn/ui components\n│   │   └── common/             # Shared components\n│   │\n│   ├── lib/                     # Utilities and configs\n│   │   ├── api/                # API clients\n│   │   │   ├── alphaVantage.ts\n│   │   │   └── finnhub.ts\n│   │   ├── store/              # State management\n│   │   │   ├── store.ts\n│   │   │   ├── widgetSlice.ts\n│   │   │   └── dashboardSlice.ts\n│   │   ├── hooks/              # Custom React hooks\n│   │   │   ├── useWidgets.ts\n│   │   │   └── useApiData.ts\n│   │   └── utils/              # Helper functions\n│   │       ├── formatters.ts\n│   │       ├── cache.ts\n│   │       └── storage.ts\n│   │\n│   ├── types/                   # TypeScript types\n│   │   ├── widget.ts\n│   │   ├── api.ts\n│   │   └── dashboard.ts\n│   │\n│   ├── styles/                  # Global styles\n│   │   └── globals.css\n│   │\n│   └── config/                  # Configuration files\n│       ├── apiEndpoints.ts\n│       └── constants.ts\n│\n├── public/                      # Static assets\n│   ├── images/\n│   └── icons/\n│\n├── scripts/                     # Utility scripts\n│   └── install-shadcn.sh\n│\n├── docs/                        # Documentation\n│   ├── PRD.md\n│   ├── SRS.md\n│   └── API.md\n│\n├── .env.example                 # Environment variables template\n├── .env.local                   # Local environment (gitignored)\n├── next.config.js              # Next.js configuration\n├── tailwind.config.ts          # Tailwind configuration\n├── tsconfig.json               # TypeScript configuration\n├── package.json                # Dependencies\n└── README.md                   # This file\n```\n\n---\n\n## 🎨 Customization\n\n### Themes\n\nFinBoard supports both light and dark themes:\n\n```tsx\n// Toggle theme programmatically\nimport { useTheme } from 'next-themes'\n\nconst { theme, setTheme } = useTheme()\n\n// Switch theme\nsetTheme(theme === 'dark' ? 'light' : 'dark')\n```\n\n### Custom API Integration\n\nAdd your own financial data source:\n\n```typescript\n// src/lib/api/customAPI.ts\nexport const fetchCustomData = async (endpoint: string) =\u003e {\n  const response = await fetch(`https://your-api.com/${endpoint}`, {\n    headers: {\n      'Authorization': `Bearer ${process.env.NEXT_PUBLIC_CUSTOM_API_KEY}`\n    }\n  })\n  return response.json()\n}\n```\n\nRegister it in the widget configuration:\n\n```typescript\n// src/config/apiEndpoints.ts\nexport const API_PROVIDERS = {\n  'alpha-vantage': { /* ... */ },\n  'finnhub': { /* ... */ },\n  'custom': {\n    name: 'Custom API',\n    baseUrl: 'https://your-api.com',\n    endpoints: { /* ... */ }\n  }\n}\n```\n\n---\n\n## 🧪 Testing\n\n### Run Tests\n```bash\n# Unit tests\nnpm run test\n\n# E2E tests\nnpm run test:e2e\n\n# Coverage report\nnpm run test:coverage\n```\n\n### Testing Strategy\n- **Unit Tests**: Component logic and utilities\n- **Integration Tests**: API integration and state management\n- **E2E Tests**: Critical user flows (Playwright)\n\n---\n\n## 🚢 Deployment\n\n### Deploy to Vercel (Recommended)\n\n1. **Push to GitHub**\n```bash\ngit add .\ngit commit -m \"Initial commit\"\ngit push origin main\n```\n\n2. **Import to Vercel**\n- Go to [vercel.com](https://vercel.com)\n- Click \"New Project\"\n- Import your GitHub repository\n- Add environment variables\n- Click \"Deploy\"\n\n3. **Add Environment Variables in Vercel**\n- Go to Project Settings → Environment Variables\n- Add `NEXT_PUBLIC_ALPHA_VANTAGE_API_KEY`\n- Add `NEXT_PUBLIC_FINNHUB_API_KEY`\n\n### Deploy to Netlify\n\n```bash\n# Install Netlify CLI\nnpm install -g netlify-cli\n\n# Build the project\nnpm run build\n\n# Deploy\nnetlify deploy --prod\n```\n\n### Deploy to AWS\n\nSee [AWS Deployment Guide](./docs/AWS_DEPLOYMENT.md) for detailed instructions.\n\n---\n\n## 📊 Performance Optimization\n\n### Implemented Optimizations\n- ✅ **Code Splitting** - Dynamic imports for widgets\n- ✅ **Lazy Loading** - Components loaded on demand\n- ✅ **Image Optimization** - Next.js Image component\n- ✅ **API Caching** - Intelligent cache with TTL\n- ✅ **Memoization** - React.memo for expensive components\n- ✅ **Virtual Scrolling** - For large tables\n\n### Performance Metrics\n- **Initial Load**: \u003c 3 seconds\n- **Time to Interactive**: \u003c 2 seconds\n- **Lighthouse Score**: 90+\n- **Bundle Size**: \u003c 500KB (gzipped)\n\n---\n\n## 🤝 Contributing\n\nWe welcome contributions! Here's how you can help:\n\n### How to Contribute\n\n1. **Fork the repository**\n2. **Create a feature branch**\n```bash\ngit checkout -b feature/amazing-feature\n```\n\n3. **Make your changes**\n4. **Commit with conventional commits**\n```bash\ngit commit -m \"feat: add amazing feature\"\n```\n\n5. **Push to your fork**\n```bash\ngit push origin feature/amazing-feature\n```\n\n6. **Open a Pull Request**\n\n### Commit Convention\nWe use [Conventional Commits](https://www.conventionalcommits.org/):\n- `feat:` - New feature\n- `fix:` - Bug fix\n- `docs:` - Documentation changes\n- `style:` - Code style changes (formatting)\n- `refactor:` - Code refactoring\n- `test:` - Adding tests\n- `chore:` - Maintenance tasks\n\n### Code Style\n- Follow the existing code style\n- Run `npm run lint` before committing\n- Add tests for new features\n- Update documentation as needed\n\n---\n\n## 🐛 Troubleshooting\n\n### Common Issues\n\n**Problem**: API requests failing with CORS errors\n**Solution**: Use Next.js API routes as proxy\n```typescript\n// src/app/api/proxy/route.ts\nexport async function GET(request: Request) {\n  const { searchParams } = new URL(request.url)\n  const endpoint = searchParams.get('endpoint')\n  \n  const response = await fetch(`https://api.example.com/${endpoint}`)\n  const data = await response.json()\n  \n  return Response.json(data)\n}\n```\n\n**Problem**: Widgets not saving\n**Solution**: Check browser storage is enabled and not full\n```typescript\n// Check localStorage availability\nif (typeof window !== 'undefined' \u0026\u0026 window.localStorage) {\n  // Safe to use localStorage\n}\n```\n\n**Problem**: API rate limit exceeded\n**Solution**: Increase cache TTL or reduce refresh frequency\n```typescript\n// Adjust in widget settings\nrefreshInterval: 300000 // 5 minutes instead of 1 minute\n```\n\n**Problem**: Charts not rendering\n**Solution**: Ensure data is in correct format\n```typescript\n// Expected format for Recharts\nconst data = [\n  { date: '2024-01', value: 100 },\n  { date: '2024-02', value: 120 }\n]\n```\n\n### Need Help?\n\n- 📖 [Documentation](./docs)\n- 💬 [Discussions](https://github.com/yourusername/finboard/discussions)\n- 🐛 [Report a Bug](https://github.com/yourusername/finboard/issues)\n- ✨ [Request a Feature](https://github.com/yourusername/finboard/issues/new?template=feature_request.md)\n\n---\n\n## 📝 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\n## 🙏 Acknowledgments\n\n- [Next.js](https://nextjs.org/) - The React framework\n- [shadcn/ui](https://ui.shadcn.com/) - Beautiful UI components\n- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS\n- [Recharts](https://recharts.org/) - Composable charting library\n- [Alpha Vantage](https://www.alphavantage.co/) - Financial data API\n- [Finnhub](https://finnhub.io/) - Stock market API\n\n---\n\n## 🗺️ Roadmap\n\n### Phase 1 - MVP ✅\n- [x] Basic widget system\n- [x] API integration\n- [x] Drag and drop\n- [x] Data persistence\n\n### Phase 2 - Enhancement 🚧\n- [ ] WebSocket for real-time data\n- [ ] More chart types\n- [ ] Advanced filters\n- [ ] Portfolio tracking\n\n### Phase 3 - Advanced Features 📋\n- [ ] User authentication\n- [ ] Cloud sync\n- [ ] Collaborative dashboards\n- [ ] AI-powered insights\n- [ ] Mobile app (React Native)\n- [ ] Alerts and notifications\n\n---\n\n## 📞 Contact\n\n**Project Maintainer**: Aryan Bajpai\n- Email: aryanbajpai2411@gmail.com\n- GitHub: [@coderntome](https://github.com/codernotme)\n- LinkedIn: [Your Profile](https://linkedin.com/in/codernotme)\n\n**Project Link**: [https://github.com/codernotme/finboard](https://github.com/codernotme/finboard)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n### ⭐ Star this repo if you find it helpful!\n\n**Made with ❤️ for the finance community**\n\n[Report Bug](https://github.com/codernotme/finboard/issues) · [Request Feature](https://github.com/codernotme/finboard/issues) · [Documentation](./docs)\n\n\u003c/div\u003e\n\n---\n\n## 📈 Project Stats\n\n![GitHub stars](https://img.shields.io/github/stars/yourusername/finboard?style=social)\n![GitHub forks](https://img.shields.io/github/forks/yourusername/finboard?style=social)\n![GitHub issues](https://img.shields.io/github/issues/yourusername/finboard)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/yourusername/finboard)\n\n**Last Updated**: January 2026","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodernotme%2Ffinboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodernotme%2Ffinboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodernotme%2Ffinboard/lists"}