
Ushering in a new era of financial management with cutting-edge AI. Badget redefines how you track, analyze, and optimize your finances, ensuring smarter, more secure financial decisions.
Introduction · Installation · Tech Stack + Features · Architecture · Contributing
Welcome to Badget, the "Copilot for Money" - an AI-powered financial management platform that provides unparalleled insights into your spending habits and financial patterns. Built with a family-first design, Badget empowers households to budget better, track expenses effortlessly, and achieve their financial goals through intelligent automation and real-time insights.
Key Features:
- Unified Financial Dashboard - All accounts in one place with smart categorization
- AI-Driven Insights - Intelligent spending analysis and personalized recommendations
- Family-First Design - Multi-user households with role-based permissions
- Real-time Financial Health - Instant alerts, goal tracking, and financial scoring
- Automated Budgeting - Dynamic budget creation based on spending patterns
- See AI Budgeting Guide (including Using Vercel AI) for how to leverage these features
- Advanced AI Tools - Anomaly detection, spending forecasts and natural-language insights
Badget implements a dual-layer architecture with clean separation between authentication and business logic:
- User identity and session management via Better-auth
- OAuth provider integration (Google, GitHub, etc.)
- Independent of business domain
- Financial domain models (accounts, transactions, budgets)
- Family/household organization with role-based access
- AI insights and recommendations engine
- Core application business logic
Next.js 15, Better-auth, Prisma, PostgreSQL, Shadcn/ui, Tailwind CSS, Framer Motion, and TypeScript.
All seamlessly integrated to accelerate financial management innovation.
Badget follows a clean, scalable architecture:
.
├── src # Main project lives here
│ ├── actions # Server actions for auth and business logic
│ ├── app # Next.js App Router structure
│ │ ├── (marketing) # Public marketing pages
│ │ ├── api # API routes
│ │ └── dashboard # Protected dashboard area
│ ├── components # Reusable UI components
│ │ ├── auth # Authentication components
│ │ ├── sections # Landing page sections
│ │ └── ui # Shadcn/ui components
│ ├── lib # Utilities and configurations
│ └── generated # Generated Prisma client
├── prisma # Database schema and migrations
└── README.md
Clone & create this repo locally with the following command:
git clone https://github.com/codehagen/Badget
- Install dependencies using pnpm:
pnpm install
- Initialize Prisma with custom output directory:
npx prisma init --db --output ../src/generated/prisma
- Copy
.env.example
to.env.local
and update the variables:
cp .env.example .env.local
-
Set up your environment variables:
The
.env.example
file contains detailed explanations for each variable. Key requirements:- Database: We are using Prisma Database (This is created over)
- Authentication: Configure Better-auth OAuth providers
For Google Auth Setup:
To use Google as a social provider, create a new project in the Google Cloud Console.
In Google Cloud Console > Credentials > Authorized redirect URIs, set:
- Local development:
http://localhost:3000/api/auth/callback/google
- Production:
https://yourdomain.com/api/auth/callback/google
-
Push the database schema:
# Generate Prisma client and push schema
pnpm db:generate
pnpm db:push
- Start the development server:
# Start the development server with Turbopack
pnpm dev
- Next.js 15 – React framework with App Router for optimal performance
- Better-auth – Modern authentication with OAuth providers (Google, GitHub)
- Prisma – Type-safe ORM with PostgreSQL
- React Email – Powerful email framework for notifications
- Vercel – Seamless deployment and preview environments
- Neon – Serverless PostgreSQL for scalable data management
- Resend – Reliable email delivery infrastructure
- Shadcn/ui – Beautiful components built on Radix UI and Tailwind CSS
- Magic UI – 150+ free animated components and effects for modern landing pages
- Tailark – Modern, responsive pre-built UI blocks for marketing websites
- Tailwind CSS – Utility-first CSS for rapid development
- Framer Motion – Smooth animations and micro-interactions
- Lucide – Consistent, beautiful icons
- Recharts – Financial data visualization
- Multi-tenant Family System - Role-based access control (Owner, Admin, Member, Viewer)
- Dual-layer Architecture - Clean separation of auth and business logic
- Real-time Dashboard - Live financial insights and account overview
- Responsive Design - Mobile-first approach with beautiful UI/UX
- Type Safety - End-to-end TypeScript for reliability
We love our contributors! Here's how you can contribute:
- Open an issue if you believe you've encountered a bug.
- Make a pull request to add new features/make quality-of-life improvements/fix bugs.