Expense Manager

A comprehensive platform to track, manage, and optimize your finances.

📚 Table of Contents

1. 🤖 Introduction
2. ✨ Features
3. 🧑‍💻 Tech Stack
4. 🔧 Local Setup
5. 📄 Feedback
6. 📸 Screenshots

🤖 Introduction

Expense Manager is an innovative Finance SaaS Platform designed to help users efficiently manage their personal finances. With a focus on user-friendly experience and comprehensive financial oversight, this application empowers users to track their income and expenses, visualize their financial data, and make informed financial decisions. Whether you're managing everyday expenses or analyzing complex financial data, Expense Manager provides intuitive tools and features to streamline and enhance your financial management.

✨ Features

• 📊 Interactive Financial Dashboard: Visualize your financial data with dynamic charts and graphs.
• 🔁 Changeable Chart Types: Switch between different chart types for better insights.
• 🗓 Account and Date Filters: Filter transactions by account and date range.
• 💹 Detailed Transactions Table: View and manage all your transactions in a comprehensive table.
• ➕ Form to Add Transactions: Easily add new transactions through a user-friendly form.
• 🧩 Customizable Select Components: Tailor your selection options to fit your needs.
• 💵 Income and Expense Toggle: Switch between viewing income and expenses.
• 🔄 CSV Transaction Imports: Import transactions via CSV files for quick data entry.
• 🔗 Bank Account Connections with Plaid: Connect to your bank accounts securely using Plaid.
• 💳 Premium Upgrades via Lemon Squeezy: Monetize your product with premium features.
• 🔐 Authentication via Clerk (Core 2): Secure authentication with Clerk.
• 🗑️ Bulk Delete and Search in Transactions: Manage transactions with bulk delete and search functionality.
• 🏦 Bank Disconnection and Subscription Management: Easily manage bank connections and subscriptions.
• 👤 User Settings Customization: Personalize user settings for a better experience.
• 🌐 Built with Next.js 14: Utilizing the latest features of Next.js.
• 🎨 Styled with TailwindCSS and Shadcn UI: Modern and responsive styling.
• 🚀 Deployed on Vercel: Fast and scalable deployment on Vercel.

🧑‍💻 Tech Stack

• ⚛️ React: UI library for building user interfaces.

• ⬜ Next.js: React framework for server-side rendering and static site generation.

• 💨 Tailwind CSS: Utility-first CSS framework for rapid UI development.

• 💎 Shadcn UI: UI components for React with a focus on accessibility.

• TS TypeScript: Superset of JavaScript adding static types.

• 🔥 Hono.js: High-performance web framework for building APIs.

• 🛠️ Zod: Schema validation for TypeScript and JavaScript.

• 🐻 Zustand: Lightweight state management for React.

• 🟪 Prisma: ORM for TypeScript and Node.js with a focus on type safety.

• 🔐 Clerk: Authentication and user management.

• 🌐 Neon Database: Serverless PostgreSQL database.

• 🐘 PostgreSQL: Open-source relational database system.

• 🎣 Tanstack React Query: Data fetching and synchronization for React.

• 💳 Lemon Squeezy: Payment processing and subscription management.

• 🔗 Plaid: Connects applications to bank accounts for financial data.

• 🚀 Vercel: Platform for frontend deployment and serverless functions.

⚙️ Local setup

1. Clone this repository:

   git clone https://github.com/Vinod-Mane3021/expense-manager.git

2. Configuring the .env File

   • First, create a new .env.local file in the root directory of your project by copying the example file:

   cp .env.local.example .env.local

   • Open the .env.local file in your code editor and update the following environment variables:

    # auth
    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
    CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
    CLERK_SECRET_KEY=your_clerk_secret_key
   
    # redirect path
    NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
    NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
   
    # postgres database
    DATABASE_URL=your_postgres_database_url
   
    NEXT_PUBLIC_APP_URL=http://localhost:3000

   • Replace the placeholders with your actual values:

     your_clerk_publishable_key: Obtain this key from your Clerk dashboard.

     your_clerk_secret_key: Obtain this key from your Clerk dashboard.

     your_postgres_database_url: Your PostgreSQL database connection string.

   • After updating the values, save the .env.local file.

3. Install dependencies:

   pnpm install

4. Start the development server:

   pnpm run dev

📄 Feedback

I'd be happy to connect with you!

📸 Screenshots

• 

• 

• 

•