Finance Dashboard is a full-stack personal finance management application built with modern web technologies. It helps users track expenses, manage budgets, and analyze spending patterns through an intuitive dashboard interface. The application leverages Google Sheets as a backend database and integrates OpenAI for intelligent transaction parsing from receipt images. To prevent unwanted access, you must request access before using this web app.
Traditional expense tracking requires tedious manual entry. This application solves that problem by enabling users to simply upload bank statement screenshots or transaction receipts—the AI automatically extracts and categorizes transaction details. Combined with Google Sheets integration, users get a powerful, accessible finance tracking system without complex database setup.
Integrated OpenAI's vision models to extract transaction data from uploaded images. The parser identifies transaction dates, amounts, descriptions, and categories with high accuracy. Server-side sanitization prevents formula injection attacks when writing to Google Sheets, ensuring data security.
Implemented a service-account-based Google Sheets integration that serves as the primary data store. This approach provides several benefits: version-controlled data accessible through Google Drive, no database hosting costs, and familiar spreadsheet interface for data review and manual adjustments. Used the Google Sheets API v4 with JWT authentication for secure, programmatic access.
Built using Next.js 15's App Router architecture with TypeScript for type safety. Created API routes for transaction management (/api/transactions, /api/parse-transactions) that handle CRUD operations and image processing. Implemented server-side validation and error handling to ensure data integrity.
Leveraged SWR (stale-while-revalidate) for client-side caching and optimistic updates. When users add transactions, the UI updates immediately while the request processes in the background, providing a snappy user experience. Automatic revalidation ensures data consistency across all dashboard components.
Implemented NextAuth.js with Google OAuth provider for secure authentication. The application uses an email allowlist middleware to control access, making it suitable for personal use while maintaining a foundation that can scale to multi-user deployments with per-user data isolation.
This project deepened my understanding of full-stack TypeScript development and serverless architecture. Working with Google Sheets as a database taught me creative solutions to data persistence challenges and highlighted trade-offs between traditional databases and alternative storage solutions. Integrating OpenAI's API provided hands-on experience with LLM-powered features and the importance of prompt engineering for structured data extraction.
Building a personal finance tool required balancing functionality with simplicity. The AI parsing feature significantly reduces friction in expense tracking, but providing manual entry options ensures users aren't blocked if image parsing fails. Designing for a single user first, with multi-user scalability in mind, demonstrates pragmatic product development—ship value quickly while maintaining architectural flexibility.