FinBoard helps users manage budgets, monitor transactions, and analyze spending trends through interactive visualizations while keeping financial data organized and accessible.
- Features
- Privacy First
- Getting Started
- Local Development Setup
- Project Structure
- Tech Stack
- Contributing
- License
A retro-themed personal finance dashboard for budgeting, transaction tracking, and financial insights.
 📊 Interactive Dashboard Monitor your financial health at a glance with powerful real-time visualizations. |
 💰 Budget Management Set limits, track expenses per category, and work toward financial goals. |
 📜 Transaction History Search, filter, and categorize transactions with complete visibility. |
 🧠 Smart Insights Identify spending patterns, income trends, and top categories over time. |
 ⚙️ Finance Settings Manage transactions, CSV upload, currency, and data reset options. |
|
Your financial data remains under your control.
- Client-side experience with minimal external dependencies
- CSV Import for transaction analysis and management
- Multi-currency Support for flexible financial tracking
- Secure storage options through the application's supported integrations
- Node.js v18 or higher
- npm (included with Node.js)
# Clone the repository
git clone https://github.com/khanirfan18/finBoard.git
# Navigate into the project
cd finBoard
# Install dependencies
npm install
# Start the development server
npm run devOpen:
http://localhost:5173
FinBoard uses Supabase for authentication and data storage.
Before running the application locally, configure your Supabase project and environment variables by following the setup guide:
If you encounter:
Missing VITE_SUPABASE_URL or VITE_SUPABASE_ANON_KEY
make sure you have completed the Supabase setup steps and created the required .env file.
A modular React-based structure with clear separation of UI components, pages, state management, and utilities.
FINBOARD/
├── src/
│ ├── assets/ # Static images and icons
│ ├── components/ # Reusable UI components
│ ├── context/ # Global state management (React Context)
│ ├── data/ # Static/mock data
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utilities, API config, helpers
│ ├── pages/ # Application pages/routes
│ │ ├── Budgets.jsx
│ │ ├── Dashboard.jsx
│ │ ├── Goals.jsx
│ │ ├── InsightsDashboard.jsx
│ │ ├── Settings.jsx
│ │ └── Transaction.jsx
│ ├── App.jsx # Main app routing
│ └── main.jsx # Entry point
│
├── test/ # Unit / utility tests
│
├── package.json # Project dependencies & scripts
├── vite.config.js # Vite configuration
├── index.html # App root HTML
├── netlify.toml # Deployment config
├── docker-compose.yml # Docker support
├── Dockerfile.* # Docker build configs
├── .env.example # Environment variables template
├── README.md
└── LICENSE
| Layer | Technologies |
|---|---|
| Frontend | React, React Router |
| Build Tool | Vite |
| Styling | Tailwind CSS, DaisyUI |
| Charts | Recharts |
| Icons | Lucide Icons, Custom SVGs |
| Backend / Database | Supabase |
Contributions are welcome.
Before opening an issue or submitting a pull request, please review:
- Follow the issue creation process outlined in the contribution guide
- Claim tasks before beginning work
- Align contributions with the project's scope and roadmap
- Write clear and meaningful commit messages and pull request descriptions
- Maintain respectful and constructive communication
Docker support is part of the long-term roadmap and is currently reserved for maintainer use. Docker-related contributions are out of scope unless explicitly requested by a maintainer.
This project is licensed under the terms specified in the LICENSE file.