💰 Finance Tracker

A personal finance tracker built with Next.js. Track your income and expenses, view your balance, and categorize your spending.

🔗 Live Demo: https://dehyabi-finance-tracker.vercel.app/

✨ Features

• Dashboard - View total balance, monthly income/expense totals, and recent transactions
• Transaction Management - Add and delete transactions with categories
• Filtering - Filter by type (income/expense) and category
• Responsive Design - Sidebar on desktop, bottom navigation on mobile
• Data Persistence - LocalStorage persistence — no backend needed
• Export - Export transactions to Excel

🛠️ Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS v4
• State Management: React Context
• Export: xlsx library for Excel export

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/dehyabi/finance-tracker.git

# Navigate to project directory
cd finance-tracker

# Install dependencies
npm install

# Run development server
npm run dev

Open http://localhost:3000 to view in browser.

Build for Production

npm run build
npm start

📱 Pages

Page	Route	Description
Dashboard	/	Overview of balance, income, expenses, recent transactions
Transactions	/transactions	Full transaction list with filters

💵 Categories

Income:

• Salary
• Freelance
• Investment
• Gift
• Other

Expense:

• Food
• Transport
• Housing
• Entertainment
• Utilities
• Healthcare
• Shopping
• Other

🎨 Design

• Theme: Dark mode
• Color Palette: Emerald (income/positive), Red (expenses/negative), Indigo (actions)
• Currency: US Dollar (USD)
• Typography: Inter font

📁 Project Structure

/app
  layout.tsx              # Root layout
  page.tsx                # Dashboard page
  /transactions
    page.tsx              # Transactions page
/components
  /ui                     # Button, Input, Select, Modal, Badge
  /layout                 # Sidebar, MobileNav
  /dashboard              # BalanceCard, StatCard, RecentTransactions
  /transactions           # TransactionList, TransactionItem, TransactionForm, FilterBar
/context
  TransactionContext.tsx  # Global state
  CategoryContext.tsx
/hooks
  useTransactions.ts
  useBackupReminder.ts
/lib
  utils.ts                # formatCurrency, etc.
  categories.ts
  exportExcel.ts

👤 Author

Dehya Qalbi

• GitHub: @dehyabi
• Email: dehyafullstack@gmail.com

📄 License

This project is open source and available under the MIT License.

---

Made with ❤️ for personal finance management