💎 ExpenseFlow — Premium Financial Management

ExpenseFlow is a professional-grade, high-performance expense tracking application built with a stunning Glassmorphism Design System. It combines real-time financial analytics, secure authentication, and advanced document management into a single, seamless experience.

🚀 Premium Features

📊 Real-Time Analytics

• Dynamic Charting: Visual category breakdown using Recharts with unique color-coding for every expense type.
• Monthly Overview: Switch between months and years to see exactly where your money went in any specific period.
• Summary Cards: Instant visibility into your Total Balance, Monthly Income, and Monthly Expenses.

🎯 Financial Planning

• Savings Goals: Set target amounts for specific goals (e.g., "New MacBook") and track progress with animated progress bars.
• Budget Tracking: Set monthly limits and get real-time feedback on your spending percentage.
• Recurring Transactions: Easily track monthly subscriptions like Netflix, Rent, or Internet with dedicated visual indicators.

🛠️ Advanced Tools

• Receipt Uploads: Attach physical proof to your expenses. Integrated with Cloudinary for secure image hosting.
• WhatsApp-Friendly Export: One-click CSV export formatted specifically for easy sharing and readability on mobile devices.
• Multi-Currency Support: Switch instantly between USD, PKR, EUR, GBP, and INR.
• Global Search & Filter: Find any transaction in seconds with real-time title search and category filtering.

🔐 Security & Reliability

• Clerk Authentication: Secure, enterprise-grade sign-in and sign-up flows.
• Offline-First Persistence: Powered by Zustand and LocalStorage, your data is always available even after refreshing or closing the browser.
• Responsive Glassmorphism UI: A mobile-first, premium design that looks stunning on any device.

🛠️ Technology Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS v4 (Custom Glassmorphism Theme)
• State Management: Zustand (with Persist Middleware)
• Authentication: Clerk
• Visuals: Framer Motion (Animations), Recharts (Analytics), Lucide React (Icons)
• Storage: Cloudinary (Receipt Images)

📦 Installation & Setup

1. Clone the repository:

   git clone https://github.com/your-username/expense-tracker.git

2. Install dependencies:

   npm install

3. Configure Environment Variables: Create a .env.local file and add your keys:

   # Clerk
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_key
   CLERK_SECRET_KEY=your_key
   
   # Cloudinary
   NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloud_name
   NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET=your_preset

4. Run the development server:

   npm run dev

📚 Project Resources

For deeper insights into the project architecture and development roadmap, please refer to:

• Implementation Plan: The master roadmap and phase-by-phase development guide.
• Agent Instructions: Detailed coding standards and design principles used during development.

📄 License

This project is licensed under the MIT License.

---

Built with ❤️ for better financial clarity.