WalletApp

WalletApp is a modern financial tracking application designed to help users take control of their personal finances. Built with Next.js and TypeScript, it offers comprehensive transaction management, detailed reporting, and intuitive categorization systems.

💰 Overview

WalletApp empowers users to track their expenses and income across different accounts, offering detailed categorization and visualization of financial data. Whether you're managing daily expenses or planning long-term financial goals, WalletApp provides the tools you need.

✨ Features

💳 Transaction Management

• Track income and expenses with detailed descriptions and amounts
• Filter transactions by type (income/expense), time period (today, week, month, year)
• Visual indicators for transaction types (green for income, red for expenses)
• Add transactions with an intuitive dialog interface
• Real-time balance calculations

📊 Reports & Analytics

• Export transactions to Excel with comprehensive details including:
  • Transaction date and time
  • Transaction type (income/expense)
  • Detailed description
  • Category and subcategory breakdown
  • Amount with proper currency formatting
• Filter and analyze transactions based on custom date ranges
• Visual charts and graphs for spending patterns

🎯 Categories System

Expense Categories:

• Housing (rent, mortgage, utilities)
• Transportation (fuel, public transport, maintenance)
• Food (groceries, dining out, delivery)
• Utilities (electricity, water, internet)
• Insurance (health, auto, home)
• Healthcare (medical bills, prescriptions)
• Savings (emergency fund, investments)
• Personal (clothing, personal care)
• Entertainment (movies, games, subscriptions)
• Other (miscellaneous expenses)

Income Categories:

• Salary (regular employment income)
• Freelance (contract and gig work)
• Investments (dividends, capital gains)
• Rental (property rental income)
• Other (gifts, refunds, misc income)

📱 User Interface

• Modern, responsive design with dark/light mode support
• Intuitive transaction filters for type, time period, and categories
• Clear visual distinction between income and expenses using icons and colors
• Easy-to-use export functionality with preview dialog
• Mobile-optimized interface for on-the-go financial tracking

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• MongoDB database
• npm or yarn package manager
• Git

Environment Variables

Create a .env.local file in the root directory:

MONGODB_URI=your_mongodb_connection_string
CLERK_SECRET_KEY=your_clerk_secret_key
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/wizard

Installation Steps

1. Clone the repository:

git clone https://github.com/ChernetAsmamaw/walletapp.git
cd walletapp

2. Install dependencies:

npm install
# or
yarn install

3. Run the development server:

npm run dev
# or
yarn dev

4. Open your browser and navigate to: http://localhost:3000

🛠️ Tech Stack

• Frontend: Next.js with TypeScript for type safety and modern React features
• UI Components:
  • shadcn/ui for consistent, accessible components
  • Lucide React for beautiful, consistent icons
  • Tailwind CSS for utility-first styling
• Data Export: SheetJS (XLSX) for Excel file generation and export
• Authentication: Clerk with custom sign-in/sign-up flows and user management
• Database: MongoDB with Mongoose ODM for flexible data modeling
• API: Next.js API Routes with comprehensive transaction management
• Deployment: Vercel for seamless deployment and hosting

📱 Application Structure

walletapp/
├── app/
│   └── api/
│       └── transactions/
│           └── route.ts        # Transaction API endpoints
├── components/
│   ├── ExportTransactionsDialog.tsx    # Excel export functionality
│   ├── AddTransaction.tsx              # Transaction creation form
│   ├── NavBar.tsx                      # Navigation component
│   └── Providers/
│       └── RootProviders.tsx           # App-wide providers
├── models/
│   └── Transaction.ts                  # Mongoose transaction model
└── utils/
    └── db.ts                          # Database connection utility

🔐 Security Features

• Secure Authentication: Robust authentication flow with Clerk
• Protected API Routes: All API endpoints require authentication
• MongoDB Session Management: Secure database operations with session handling
• Input Validation: Comprehensive validation for all user inputs
• Data Privacy: User data is isolated and secured per account

📈 Financial Insights

WalletApp helps users understand their financial habits through:

• Monthly spending patterns
• Category-wise expense breakdown
• Income vs. expense tracking
• Trend analysis for better financial planning
• Export capabilities for external analysis

🎯 Use Cases

• Personal Finance Management: Track daily expenses and income
• Budget Planning: Analyze spending patterns to create realistic budgets
• Tax Preparation: Export transaction data for tax filing
• Financial Goal Tracking: Monitor progress towards financial objectives
• Expense Reporting: Generate reports for business or personal use