LedgerIQ
A full-stack personal finance application with AI-powered transaction categorization, real-time budget tracking, and interactive analytics for managing your money smarter
Tech Stack
Context
The Problem
Managing personal finances is tedious. Users need to manually categorize transactions, track budgets across spreadsheets, and lack insights into spending patterns. Most finance apps are either too complex or lack intelligent automation.
Constraints
- Real-time transaction updates with optimistic UI
- Automatic transaction categorization without manual input
- Type-safe full-stack application with end-to-end validation
- Responsive design supporting mobile, tablet, and desktop
- Secure handling of financial data with SQL injection and XSS prevention
Stakes
Portfolio piece demonstrating modern full-stack development with Next.js 14, AI integration, real-time data visualization, and production-grade architecture
My Role
Title
Full-Stack Software Engineering
Team
Personal Project
Ownership
Complete ownership: system architecture, database schema design, frontend UI/UX, backend API, AI integration, state management, and deployment
Approach & Key Decisions
Built a full-stack finance app using Next.js 14 App Router with TypeScript, Prisma ORM + PostgreSQL for data persistence, OpenAI GPT-4 for intelligent categorization, and shadcn/ui + Recharts for interactive visualizations and modern UI components.
Next.js 14 App Router with Server Components
Server Components reduce JavaScript bundle size, improve initial page load, and enable better SEO while maintaining interactivity where needed with Client Components.
Prisma ORM with PostgreSQL
Prisma provides type-safe database queries, automatic migrations, and prevents SQL injection attacks. PostgreSQL offers robust relational data modeling for transactions, budgets, and goals.
OpenAI GPT-4 for transaction categorization
AI automatically categorizes transactions based on merchant names and descriptions, eliminating manual categorization work and learning from spending patterns.
Zustand for client-side state management
Lightweight alternative to Redux with simpler API, less boilerplate, and better TypeScript support for managing UI state like filters and selections.
React Query for server state
Handles caching, background refetching, optimistic updates, and error handling for API calls, keeping server and client state synchronized automatically.
shadcn/ui component library
Copy-paste components built on Radix UI primitives provide accessible, customizable UI elements without vendor lock-in or large dependencies.
Zod for end-to-end validation
TypeScript-first schema validation ensures data integrity from API requests to database operations, catching errors early and providing type inference.
Recharts for data visualization
React-native chart library with responsive design, composable API, and support for complex financial visualizations like spending trends and budget progress.
Alternatives Considered
Considered using Plaid API for bank integrations but focused on manual transaction entry first to demonstrate core features without external dependencies
Challenges & Solutions
⚠Challenge
Real-time budget tracking across multiple categories without performance issues
✓Solution
Implemented Prisma aggregations to compute budget utilization directly in the database, combined with React Query caching to minimize redundant calculations and keep UI responsive.
⚠Challenge
AI categorization needed to understand diverse merchant names and transaction descriptions
✓Solution
Integrated OpenAI GPT-4 with custom prompts that analyze merchant names, transaction amounts, and descriptions to predict categories like Groceries, Dining, Transportation, with high accuracy.
⚠Challenge
Optimistic UI updates for instant feedback while maintaining data consistency
✓Solution
Used React Query's optimistic update pattern with automatic rollback on API errors, ensuring users see immediate changes while maintaining sync with server state.
⚠Challenge
Type safety across frontend, API routes, and database queries
✓Solution
Leveraged TypeScript with Prisma's generated types, Zod schemas for validation, and strict TypeScript config to catch type errors at compile time across the entire stack.
⚠Challenge
Complex financial calculations for spending trends and budget forecasts
✓Solution
Built aggregation pipelines using Prisma's groupBy and raw SQL queries for time-series analysis, combined with Recharts for interactive visualizations of trends and projections.
Outcomes & Impact
Type Safety
96.7% TypeScript coverage with end-to-end type safety from database to UI
Feature Set
Complete CRUD for transactions, budgets, and goals with AI categorization and analytics
Data Visualization
Interactive Recharts dashboards showing spending trends, budget progress, and financial forecasts
Performance
Server Components, code splitting, lazy loading, and optimistic UI for instant feedback
Security
Prisma prevents SQL injection, XSS protection, CSRF tokens, and secure session handling
User Experience
Responsive mobile-first design, dark mode, real-time updates, and accessible UI components