A mobile-first personal finance tracker built to solve a data entry problem.
🚧 Live Demo 🚧 • Report Bug • Request Feature
Existing budgeting apps either lack the flexibility and control I needed, or they're too cumbersome for quick mobile entry. Other tools had poor category identification and limited customization. I tried using an extensive Google Sheets setup, but editing on mobile was frustrating and clunky. I needed a solution that would let me capture transactions the moment they happen, from anywhere, with full control over my financial data.
General Ledger is a mobile-friendly web app designed for frictionless data entry. Add transactions to your database wherever and whenever you make a purchase, then track your budget in real-time with visual insights into your spending patterns.
- Transaction Management: Create and track financial transactions with amount, date, and categorization
- Category System: Organize spending with custom categories and subcategories
- Mobile-First Design: Optimized interface for quick entry on the go
- Secure Authentication: User authentication powered by Stack Auth
- Complete CRUD Operations: Full create, read, update, and delete functionality for transactions, categories, subcategories, and financial institutions
- Budget Tracking Dashboard: Visual progress bars showing spending against budget limits
- Spending Insights: Pie charts breaking down expenses by category relative to income
- Trend Analysis: Track spending patterns over time to gain insights into financial habits
Frontend
- Next.js - React framework with server-side rendering
- React - UI component library
- Shadcn/ui - Component system for clean, accessible interfaces
- TypeScript - Type safety throughout the application
Backend & Database
- Neon - Serverless Postgres database
- Prisma - Type-safe database ORM
- Stack Auth - Authentication and user management
Design System
The app uses a trustworthy, clean color palette designed for financial clarity:
- Primary Colors: Deep Blue (#2563eb) for headers and primary actions, Slate Gray (#64748b) for body text
- Financial Status: Forest Green (#10b981) for income/credits, Ruby Red (#ef4444) for expenses/debits, Amber (#f59e0b) for warnings
- Supporting Colors: Light Blue (#eff6ff) for highlights, Warm Gray (#f3f4f6) for backgrounds, White (#ffffff) for surfaces
- Node.js 18+
- npm or yarn
- A Neon database account
- A Stack Auth project
- Clone the repository
git clone https://github.com/superkat64/general-ledger.git
cd general-ledger- Install dependencies
npm install- Set up environment variables
Create a .env.local file in the root directory:
NEXT_PUBLIC_STACK_PROJECT_ID=your_stack_project_id
NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY=your_stack_client_key
STACK_SECRET_SERVER_KEY=your_stack_secret_key
DATABASE_URL=your_neon_database_url- Set up the database
npx prisma generate
npx prisma db push- Run the development server
npm run devOpen http://localhost:3000 to view the app.
This project is currently in active development. Core transaction and category management features are functional, with the dashboard and additional CRUD operations planned for completion by end of December 2024. The app will be deployed to Fly.io once the initial feature set is complete.
I chose an all-JavaScript stack to deepen my understanding of the modern JS ecosystem. The combination of Next.js, Prisma, and Neon provides excellent type safety, developer experience, and scalability for a personal finance application that needs to be reliable and maintainable.
This is a personal project, but suggestions and feedback are welcome! Feel free to open an issue if you have ideas for features or improvements.
MIT
Built with curiosity about personal finance data and a desire for better mobile UX.