Skip to content

Dhanuja416/next-Expenz

Repository files navigation

💰 ExpenZ AI

A modern, AI-powered personal finance and expense tracking web application built to help you gain clarity and control over your money. Utilizing the latest in web development and artificial intelligence, ExpenZ AI offers intelligent categorization, beautiful real-time analytics, and personalized financial insights.


✨ Features

🤖 AI-Powered Intelligence

  • Smart Categorization: AI automatically suggests the most accurate expense categories based on transaction descriptions, saving you time.
  • Financial Insights: Get personalized recommendations and proactive spending pattern analysis to help you meet your financial goals.
  • Interactive AI Chat: A conversational interface to get detailed explanations and advice for any generated financial insight or spending trend.

💼 Core Functionality

  • Effortless Expense Tracking: Easily add, edit, and delete expenses with a clean, intuitive interface.
  • Real-time Charts: Beautiful and interactive data visualizations using Chart.js for a quick overview of your finances.
  • Statistics Dashboard: A comprehensive view of your spending analytics, categorized by time and type.
  • Complete History: Full transaction history with powerful search and filter capabilities.

🎨 Modern UI/UX

  • Light & Dark Mode: Seamless and smooth theme switching to suit your preference.
  • Fully Responsive: Optimized experience across all devices, from mobile phones to desktop monitors.
  • Beautiful Aesthetics: Smooth interactions, subtle hover effects, and modern card layouts with backdrop blur.

🔐 Authentication & Security

  • Multiple Login Options: Support for popular providers like Google, GitHub, and Facebook, plus standard email/password.
  • Secure Sessions: Robust user authentication and session management handled by Clerk.
  • User Profiles: Personalized dashboards and user-specific settings.

🛠️ Tech Stack

Frontend

  • Next.js 15 - High-performance React framework with the App Router.
  • React 19 - Latest React features for modern web development.
  • TypeScript - For type-safe and robust code.
  • Tailwind CSS - Utility-first CSS for rapid and consistent styling.
  • Chart.js - For creating the dynamic and beautiful charts.

Backend & Database

  • Neon - Serverless PostgreSQL database for reliability and scalability.
  • Prisma - A powerful, type-safe database ORM (Object-Relational Mapper).
  • Server Actions - For direct, type-safe server functions within Next.js.

AI & Authentication

  • OpenRouter - AI API access for versatile and cost-effective model integration.
  • Clerk - Complete, drop-in authentication solution.
  • OpenAI Compatible API - Used for the intelligent expense categorization logic.

Deployment

  • Vercel - The serverless deployment platform for Next.js applications.

🚀 Getting Started

Follow these steps to get ExpenZ AI running on your local machine.

Prerequisites

  • Node.js (version 18+)
  • npm, yarn, or pnpm

Installation

  1. Clone your repository

    git clone [YOUR-REPO-URL].git
    cd expenz-ai
  2. Install dependencies

    npm install
    # or
    yarn install
    # or
    pnpm install
  3. Set up environment variables Create a .env file in the root directory and fill it with your keys:

    # Database
    DATABASE_URL="your-neon-database-url"
    
    # Clerk Authentication
    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="your-clerk-publishable-key"
    CLERK_SECRET_KEY="your-clerk-secret-key"
    NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"
    NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL="/"
    NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL="/"
    
    # OpenRouter AI
    OPENROUTER_API_KEY="your-openrouter-api-key"
    
    # App URL
    NEXT_PUBLIC_APP_URL="http://localhost:3000"
  4. Set up the database Generate the Prisma client and push the schema to your Neon database:

    npx prisma generate
    npx prisma db push
  5. Run the development server

    npm run dev
    # or
    yarn dev
    # or
    pnpm dev
  6. Open your browser Navigate to http://localhost:3000 to see your application!


📊 Database Schema

The application uses a simple and robust database schema built with Prisma:

  • User: Stores essential user information integrated from Clerk.
  • Record: The core table, storing expense transactions along with their AI-suggested or manually set categories and amounts.

(Optional: If you have a diagram, you can link it here, e.g., View the complete database diagram: [Link to your diagram]).


🎯 Key Features Walkthrough

1. Smart Expense Adding

  • Enter the description, date, and amount of a transaction.
  • Click the button to instantly receive AI category suggestions.
  • Option to manually select a category from predefined options.

2. AI Insights Dashboard

  • Real-time analysis of your spending patterns.
  • Insights categorized as warnings (potential overspending), tips (savings suggestions), success (good habits), and info (general trends).
  • Expandable, interactive explanations from the AI for every insight.

3. Visual Analytics

  • Interactive Chart.js charts for easy trend identification.
  • Views for daily, weekly, and monthly spending summaries.
  • Color-coded spending categories for clarity.

4. Expense Management

  • A complete, searchable, and filterable transaction history.
  • One-click deletion of records.
  • Real-time data updates across the entire application.

About

Expense Tracker AI using Next.js, Tailwind CSS, Clerk and Neon

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages