https://github.com/alien-droid/finance-dashboard
A financial dashboard that provides insights and financial summary for all your accounts. 💵
https://github.com/alien-droid/finance-dashboard
finance financial-analysis hono javascript tailwindcss tanstack-react-query typescript
Last synced: about 2 months ago
JSON representation
A financial dashboard that provides insights and financial summary for all your accounts. 💵
- Host: GitHub
- URL: https://github.com/alien-droid/finance-dashboard
- Owner: alien-droid
- Created: 2025-04-12T05:51:37.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-03T03:59:56.000Z (about 1 year ago)
- Last Synced: 2025-06-08T13:41:49.981Z (about 1 year ago)
- Topics: finance, financial-analysis, hono, javascript, tailwindcss, tanstack-react-query, typescript
- Language: TypeScript
- Homepage: https://finance-dashboard-eight-sigma.vercel.app
- Size: 397 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 💵 X-Finance - Unified Financial Dashboard
X-Finance is a sleek and intelligent financial dashboard that aggregates and visualizes your financial data across all accounts. Get powerful insights, summaries, and trends to manage your finances better — all in one place. Built with TypeScript, Hono, and React Query, and styled with Tailwind CSS for a responsive, performant experience.
🔗 Live Demo: [finance-dashboard-eight-sigma.vercel.app](https://finance-dashboard-eight-sigma.vercel.app)
---
### ✨ Features
- **Unified Financial View**: View balances, expenses, income, and summaries from all accounts.
- **Insightful Analytics**: Get detailed charts and trends to make smarter financial decisions.
- **Responsive UI**: Built with Tailwind CSS for a seamless experience across devices.
- **Optimized Data Fetching**: Efficient and reactive API handling with TanStack React Query.
- **Fast Backend**: Lightweight and high-performance backend with Hono.
---
### 🛠 Tech Stack & Dependencies
- UI Styling - [Tailwind CSS](https://tailwindcss.com/)
- Backend Framework - [Hono](https://hono.dev/)
- Frontend Framework - [TypeScript + React](https://react.dev/)
- Data Fetching - [TanStack React Query](https://tanstack.com/query/latest)
---
### 🚀 How to Use
1. Launch the app via the live link or deploy locally.
2. Connect your financial data (Upload your CSV (Statements)).
3. Explore your dashboard with summaries, trends, and visual insights.
4. Interact with charts and tables for deeper financial analysis.
---
### 🗒️ Set Up Environment Variables
Create a new file named .env in the root of your project and add the following content:
# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/
# Neon
DATABASE_URL=
# Application URL
NEXT_PUBLIC_APP_URL=
#### 🏗 Built with ❤️ using Hono, TypeScript, Tailwind CSS, and React Query