A responsive dashboard to track income and expenses with insights.
Displays a summary of total income, expenses, and balance in a clean and intuitive layout.
Add, view, and manage income and expense records efficiently.
Transactions are divided into pages to improve performance and make large datasets easier to navigate.
Easily filter transactions based on type (income or expense) for better analysis.
Quickly find transactions by searching categories, improving accessibility and usability.
-
📊 Bar chart showing monthly income vs expense trends
-
📉 Line chart showing monthly expense trends
-
🥧 Pie chart visualizing expense distribution by category
-
📅 Highlights highest spending month
-
🏷️ Displays top spending category
Fully optimized for mobile, tablet, and desktop screens.
Simple, modern interface focused on usability and user experience.
- Built using a component-based architecture for better scalability and reusability
- Managed application state using useState
- Implemented pagination to efficiently handle large transaction datasets
- Designed reusable components for transactions, charts, and filters
- Used chart libraries to visualize monthly expenses and category distribution
- Ensured responsive design using Tailwind CSS
- Frontend: React.js
- Styling: Tailwind CSS
- Charts: Recharts
- State Management: useState
- Build Tool: Vite
- git clone https://github.com/AgnibhaDebnath/fin_dash
- cd fin_dash
- npm install
- npm run dev
- src/
- ├── components/
- ├── pages/
- ├── assets/
- ├── Data/
- └── App.jsx