💰 FinTrack

Modern Personal Finance Management Dashboard

FinTrack is a modern, responsive personal finance management application built with React, Vite, and Tailwind CSS. It helps users track income and expenses, manage budgets, monitor savings goals, analyze spending patterns, and organize their financial data through a clean and intuitive dashboard.

✨ Features

🏠 Dashboard

Get a quick overview of your financial situation from a centralized dashboard.

Total balance
Total income
Total expenses
Savings overview
Recent transactions
Quick transaction creation
Financial summary cards
Responsive dashboard layout

💳 Transaction Management

Keep track of your financial activity in one place.

Add income and expense transactions
Categorize transactions
View transaction history
Search transactions
Filter transactions
Delete transactions
Income/expense classification
Transaction dates
Persistent transaction data

📊 Financial Analytics

Understand where your money goes through visual analytics.

Income vs. expense analysis
Expense category breakdown
Spending distribution
Savings rate
Financial summary cards
Top spending categories
Interactive charts
Financial insights

💰 Budget Management

Set spending limits and monitor your financial habits.

Create budgets
Assign budgets to categories
Track spending against budgets
Monitor budget progress
Identify overspending
Visual progress indicators

🎯 Savings Goals

Set financial goals and track your progress.

Create savings goals
Set target amounts
Track current savings
Calculate completion percentage
Monitor goal progress
Goal completion states
Visual progress cards

⚙️ Settings

Customize your FinTrack experience.

Profile settings
Currency selection
Theme preferences
Notification preferences
Data management
Import data
Export data
Reset application data
Persistent settings

🎨 Theme Support

FinTrack supports multiple theme preferences:

🌙 Dark
☀️ Light
🖥️ System

Theme preferences are persisted so they remain after refreshing the application.

💱 Multi-Currency Formatting

Financial values are formatted dynamically based on the selected currency.

Currently supported:

Currency	Code
🇮🇳 Indian Rupee	INR
🇺🇸 US Dollar	USD
🇪🇺 Euro	EUR
🇬🇧 British Pound	GBP

📱 Responsive Design

FinTrack is designed to work across different screen sizes.

Desktop layouts
Tablet layouts
Mobile layouts
Responsive sidebar
Mobile navigation
Adaptive dashboard cards
Responsive charts
Mobile-friendly forms

🛠️ Tech Stack

Frontend

React
JavaScript
JSX
Vite

Styling

Tailwind CSS
Responsive utility classes
Custom UI components

Routing

React Router

Icons

React Icons
Lucide React

Data Visualization

Recharts

State Management

React Context API
React Hooks

Storage

Browser LocalStorage

🏗️ Project Architecture

FinTrack follows a component-based React architecture designed to keep UI, state management, and pages separated.

FinTrack/
│
├── public/
│
├── src/
│   │
│   ├── components/
│   │   ├── analytics/
│   │   │   ├── AnalyticsCard.jsx
│   │   │   ├── ExpenseChart.jsx
│   │   │   ├── IncomeExpenseChart.jsx
│   │   │   └── FinancialInsights.jsx
│   │   │
│   │   ├── dashboard/
│   │   │   ├── SummaryCard.jsx
│   │   │   ├── RecentTransactions.jsx
│   │   │   └── EmptyState.jsx
│   │   │
│   │   ├── forms/
│   │   │   ├── TransactionModal.jsx
│   │   │   └── GoalModal.jsx
│   │   │
│   │   ├── goals/
│   │   │   └── GoalCard.jsx
│   │   │
│   │   ├── layout/
│   │   │   ├── Layout.jsx
│   │   │   └── Sidebar.jsx
│   │   │
│   │   └── settings/
│   │       ├── SettingsSection.jsx
│   │       ├── SettingRow.jsx
│   │       └── DataManagement.jsx
│   │
│   ├── context/
│   │   ├── TransactionContext.jsx
│   │   ├── BudgetContext.jsx
│   │   ├── GoalContext.jsx
│   │   └── SettingsContext.jsx
│   │
│   ├── data/
│   │   └── mockData.js
│   │
│   ├── pages/
│   │   ├── Dashboard.jsx
│   │   ├── Transactions.jsx
│   │   ├── Analytics.jsx
│   │   ├── Budgets.jsx
│   │   ├── Goals.jsx
│   │   └── Settings.jsx
│   │
│   ├── utils/
│   │   └── currency.js
│   │
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
│
├── package.json
├── vite.config.js
├── README.md
└── ...

🔄 Application Flow

FinTrack uses React Context to share financial data between different parts of the application.

                    ┌─────────────────┐
                    │     FinTrack    │
                    │       App       │
                    └────────┬────────┘
                             │
              ┌──────────────┼──────────────┐
              │              │              │
              ▼              ▼              ▼
        ┌───────────┐  ┌───────────┐  ┌───────────┐
        │ Dashboard │  │Transactions│  │ Analytics │
        └─────┬─────┘  └─────┬─────┘  └─────┬─────┘
              │              │              │
              └──────────────┼──────────────┘
                             ▼
                    ┌─────────────────┐
                    │ Context / State │
                    └────────┬────────┘
                             │
             ┌───────────────┼───────────────┐
             ▼               ▼               ▼
      Transactions        Budgets           Goals
             │               │               │
             └───────────────┼───────────────┘
                             ▼
                       LocalStorage

This allows updates made in one part of the application to be reflected throughout the application.

For example:

Add Transaction
       ↓
Transaction Context
       ↓
LocalStorage
       ↓
 ┌─────┼─────────┐
 ↓     ↓         ↓
Home Analytics Budgets

📸 Screenshots

🏠 Dashboard

The FinTrack dashboard provides a quick overview of your financial health, including balance, income, expenses, savings, and recent transactions.

💳 Transactions

Manage your income and expenses with detailed transaction history, categories, dates, and transaction actions.

📊 Analytics

Visualize spending patterns, income versus expenses, category breakdowns, and overall financial performance.

💰 Budgets

Create spending limits for different categories and monitor your progress throughout the month.

🎯 Savings Goals

Set savings targets and track your progress toward important financial goals.

⚙️ Settings

Customize application preferences, currency, appearance, and manage your financial data.

📦 Installation

Prerequisites

Make sure you have installed:

Node.js
npm
Git

Check your versions:

node --version
npm --version
git --version

🚀 Getting Started

1. Clone the repository

git clone https://github.com/YOUR_USERNAME/FinTrack.git

2. Enter the project directory

cd FinTrack

3. Install dependencies

npm install

4. Start the development server

npm run dev

Vite will provide a local development URL, usually:

http://localhost:5173

Open it in your browser.

🏗️ Production Build

To create a production build:

npm run build

To preview the production build locally:

npm run preview

💾 Data Persistence

FinTrack currently uses LocalStorage for client-side persistence.

This means application data can remain available after:

Page refreshes
Browser navigation
Closing and reopening the application

Data is stored locally in the user's browser rather than on a remote server.

Current architecture

React Application
       ↓
Context API
       ↓
LocalStorage

No external database is required to run the current version.

🔐 Security & Privacy

FinTrack is currently a client-side application.

No financial data is intentionally sent to a remote backend in the current architecture.

Because data is stored in browser LocalStorage:

Data is tied to the browser/device
Clearing browser storage can remove application data
There is currently no cloud synchronization
There is currently no multi-device account system

Users should not treat the current version as a production banking or financial service.

📊 Current Modules

Module	Description
Dashboard	Financial overview
Transactions	Income and expense tracking
Analytics	Financial visualization
Budgets	Spending limit management
Goals	Savings goal tracking
Settings	Application preferences
Data Management	Import, export and reset

🧩 Key React Concepts Used

This project demonstrates practical usage of:

Functional components
React Hooks
useState
useEffect
useContext
Context API
Component composition
Controlled forms
Conditional rendering
Dynamic lists
React Router
Reusable components
LocalStorage integration
Responsive UI design

📈 Example User Workflow

A typical FinTrack workflow looks like:

1. Open Dashboard
        ↓
2. Add income / expenses
        ↓
3. Review transactions
        ↓
4. Create budgets
        ↓
5. Set savings goals
        ↓
6. Analyze spending
        ↓
7. Adjust financial habits
        ↓
8. Export financial data

🖥️ Pages

Dashboard

Provides an overview of:

Balance
Income
Expenses
Savings
Recent transactions

Transactions

Provides detailed transaction management.

Analytics

Provides visual representations of financial activity.

Budgets

Allows users to create and monitor spending limits.

Goals

Allows users to create and track savings targets.

Settings

Provides application customization and data management.

🧪 Testing Checklist

Before a release, the application should be tested for:

✓ Dashboard navigation
✓ Transaction creation
✓ Transaction deletion
✓ Transaction persistence
✓ Budget creation
✓ Goal creation
✓ Goal progress
✓ Analytics calculations
✓ Theme persistence
✓ Currency switching
✓ Import / Export
✓ Reset data
✓ Responsive navigation
✓ Mobile layout
✓ Invalid routes
✓ Production build

🚧 Roadmap

Version 1.0

Version 2.0 — Planned

Future development may include:

🔐 User authentication
☁️ Cloud database
🔄 Multi-device synchronization
👤 User accounts
📊 Advanced financial analytics
🤖 AI-powered financial insights
🔔 Smart notifications
📅 Recurring transactions
💳 Subscription tracking
📱 Progressive Web App support
🔒 Improved server-side security

🎯 Project Goals

FinTrack was created as a practical React project focused on building a complete frontend application rather than a simple static interface.

The main goals are to demonstrate:

Modern React development
Component-based architecture
State management with Context API
Responsive UI development
Data visualization
Client-side persistence
Reusable components
Real-world application structure
Clean and maintainable code
Practical frontend engineering skills

🤝 Contributing

Contributions, suggestions, and improvements are welcome.

Fork the repository

git fork

Create a branch

git checkout -b feature/your-feature

Commit your changes

git add .
git commit -m "Add your feature"

Push the branch

git push origin feature/your-feature

Then open a Pull Request.

📜 License

This project is available under the MIT License.

See the LICENSE file for more information.

👨‍💻 Author

Mannat

Built as a portfolio project to explore modern React development, frontend architecture, state management, data visualization, and responsive UI design.

⭐ Support

If you find FinTrack useful or interesting, consider giving the repository a ⭐ on GitHub.

It helps support the project and encourages further development.

💰 FinTrack

Track. Analyze. Plan. Grow.

Built with ❤️ using React, Vite & Tailwind CSS.

Name		Name	Last commit message	Last commit date
components		components
context		context
pages		pages
utils		utils
.gitignore		.gitignore
App.css		App.css
App.jsx		App.jsx
README.md		README.md
index.css		index.css
index.html		index.html
main.jsx		main.jsx
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

Latest commit

History

Folders and files

Repository files navigation

💰 FinTrack

Modern Personal Finance Management Dashboard

✨ Features

🏠 Dashboard

💳 Transaction Management

📊 Financial Analytics

💰 Budget Management

🎯 Savings Goals

⚙️ Settings

🎨 Theme Support

💱 Multi-Currency Formatting

📱 Responsive Design

🛠️ Tech Stack

Frontend

Styling

Routing

Icons

Data Visualization

State Management

Storage

🏗️ Project Architecture

🔄 Application Flow

📸 Screenshots

🏠 Dashboard

💳 Transactions

📊 Analytics

💰 Budgets

🎯 Savings Goals

⚙️ Settings

📦 Installation

Prerequisites

🚀 Getting Started

1. Clone the repository

2. Enter the project directory

3. Install dependencies

4. Start the development server

🏗️ Production Build

💾 Data Persistence

Current architecture

🔐 Security & Privacy

📊 Current Modules

🧩 Key React Concepts Used

📈 Example User Workflow

🖥️ Pages

Dashboard

Transactions

Analytics

Budgets

Goals

Settings

🧪 Testing Checklist

🚧 Roadmap

Version 1.0

Version 2.0 — Planned

🎯 Project Goals

🤝 Contributing

Fork the repository

Create a branch

Commit your changes

Push the branch

📜 License

👨‍💻 Author

⭐ Support

💰 FinTrack

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages