Finflow is a comprehensive finance management application designed to help users track and manage their financial transactions with ease. The application supports multiple account types like cash, bank, and card, allowing users to categorize their transactions and visualize them through various interactive charts. Finflow offers a range of features to enhance user experience, including customizable filters, detailed transaction tables, and multiple chart types. Users can also import transactions via CSV, manage their settings, and authenticate securely.
- π Interactive Financial Dashboard: Visualize your financial data with dynamic charts.
- π Changeable Chart Types: Switch between area, line, bar, pie, radar, and radial charts for better insights.
- π Account and Date Filters: Filter transactions by specific accounts and date ranges.
- πΉ Detailed Transactions Table: View all your transactions in a comprehensive table with sorting and filtering options.
- β Add Transactions Form: Easily add new transactions using a user-friendly form.
- 𧩠Customizable Select Components: Personalize your data selection for a tailored experience.
- π΅ Income and Expense Toggle: Quickly switch between viewing income and expenses.
- π CSV Transaction Imports: Import your transactions seamlessly from CSV files.
- β³ Add Skeleton UI for Loading: Improve user experience with a skeleton screen while data is loading.
- π₯ API via Hono.js: Efficient backend API handling for smooth operations.
- πͺ State Management via Tanstack React Query: Manage your application's state effectively.
- π Authentication via Next Auth: Secure user authentication for server-side rendering.
- π Bulk Delete and Search in Transactions: Efficiently manage your transactions with bulk delete and search functionalities.
- π€ User Settings Customization: Customize your user settings for a personalized experience.
- π Built with Next.js 14: Leveraging the latest features of Next.js for robust performance.
- π¨ Styled with TailwindCSS and Shadcn UI: Modern and responsive design using TailwindCSS and Shadcn UI.
- πΎ PostgreSQL & Drizzle ORM: Reliable data storage and management.
- π Deployed on Vercel: Fast and scalable deployment on Vercel.
To set up and run Finflow locally, follow these steps:
-
Clone the repository:
git clone https://github.com/your-username/finflow.git cd finflow
-
Install the dependencies:
npm install
-
Provide your own database connection string and
NEXTAUTH_SECRET
in the.env
file.DATABASE_URL=your-database-connection-string NEXTAUTH_SECRET=your-nextauth-secret
-
Start the development server:
npm run dev
- Next.js 14
- TypeScript
- Tailwind CSS
- PostgreSQL
- Neon for database
- Drizzle ORM
- Next Auth
- Hono.js for API
- Shadcn UI
Ensure you have the following environment variables set up in your .env
file:
DATABASE_URL=your-database-connection-string
NEXTAUTH_SECRET=your-nextauth-secret
You can interact with the application via this link: Finflow Manager
Contributions are welcome! Please follow these guidelines:
- Fork the repository.
- Create a new branch (
git checkout -b feature/your-feature-name
). - Make your changes.
- Commit your changes (
git commit -m 'Add some feature'
). - Push to the branch (
git push origin feature/your-feature-name
). - Open a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.