💰 Spendwise: AI-Powered Expense Tracker

Your intelligent companion for tracking expenses and managing your finances with cutting-edge AI-powered insights.

---

🚀 Introduction

Spendwise is a modern, full-stack application designed to provide a seamless and intelligent expense tracking experience. By leveraging the latest technologies, it offers users beautiful data visualizations, secure authentication, and smart expense categorization powered by the Gemini API.

---

✨ Features

• Intuitive Interface: A clean and responsive UI built with Next.js 15 and Tailwind CSS.
• Powerful Visualizations: Interactive charts and graphs powered by Chart.js to help you understand your spending habits.
• AI-Powered Categorization: Automatically categorize your expenses with the intelligence of the Gemini API.
• Secure Authentication: Robust and easy-to-use authentication handled by Clerk.
• Type-Safe Backend: A reliable backend built with Server Actions and Prisma for type-safe database access.
• Serverless Architecture: Scalable and efficient infrastructure with a Neon serverless PostgreSQL database, deployed on Vercel.

---

🛠️ Tech Stack

Frontend

• Framework: Next.js 15 (with App Router)
• Library: React 19
• Language: TypeScript
• Styling: Tailwind CSS
• Charts: Chart.js

Backend & Database

• Database: Neon (Serverless PostgreSQL)
• ORM: Prisma
• API: Next.js Server Actions

AI & Authentication

• Authentication: Clerk
• AI: Google Gemini API

Deployment

• Platform: Vercel

---

⚙️ Getting Started

Follow these instructions to set up and run the project locally.

1. Clone the Repository

git clone https://github.com/sahandghavidel/next-expense-tracker-ai.git
cd next-expense-tracker-ai

2. Install Dependencies

npm install
# or
yarn install
# or
pnpm install

3. Set Up Environment Variables

# Neon PostgreSQL Database URL
DATABASE_URL=postgresql://neon....

# Clerk Authentication Keys
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_Y29v....
CLERK_SECRET_KEY=sk_test_UmdZSq...

# Clerk Redirect URLs
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/

# Google Gemini API Key
GEMINI_API_KEY=

4. Set Up the 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 the application in action!