No human touched a single line of code in this project (except for this notice). It was entirely generated by AI, for learning purposes only, almost autonomously burning tokens in OpenCode, Copilot, Claude Code and Antigravity. Here the human intervention ends.
A personal banking application for importing and analyzing financial transactions from German bank accounts. Built with Next.js 16 for local-first data management with zero cloud dependency.
BanKing helps you manage and analyze your personal finances by connecting directly to your bank's API (currently DKB) to import transactions automatically. All data is stored locally on your machine with no external transmission.
- DKB API Integration: Direct connection to DKB banking API for automatic transaction sync
- Multi-Account Support: Manage multiple bank accounts in one dashboard
- Local Data Storage: File-based database (LowDB) with SHA256 deduplication
- Interactive Dashboard: Real-time balance history, income vs expenses, spending categories
- Advanced Filtering: Filter transactions by date range, account, category, amount, and search
- Transaction Management: Full table view with sorting, pagination, and export-ready data
- Financial Insights: 17 KPI metrics including savings rate, burn rate, cash flow analysis
- Demo Mode: Test the app with realistic sample data before connecting your bank
- Automatic Categorization: Smart transaction categorization into 11 categories
The application features a custom "Neo-Glass" aesthetic designed to feel premium and modern:
- Dark Mode: Deep midnight blue (
oklch(0.12 0.04 260)) with neon accents and frosted glass cards - Light Mode: Clean pearlescent white (
oklch(0.98 0.01 240)) with soft, colorful shadows - Glassmorphism: Extensive use of
backdrop-filter: blur(), semi-transparent backgrounds, and subtle borders - Animations: Smooth entry animations using Framer Motion
- Responsive: Mobile-first design from 320px to 1920px viewports
- Framework: Next.js 16.1.4 (App Router, React 19)
- React: 19.2.3
- TypeScript: 5.x (strict mode enabled)
- Node.js: 20.x or later
- Styling: Tailwind CSS 4 with PostCSS integration
- Components: shadcn/ui (Radix UI primitives)
- Icons: Lucide React
- Animations: Motion (Framer Motion v12)
- Theme: next-themes with OKLCH color space
- Fonts: Geist Sans & Geist Mono (next/font)
- Database: LowDB (file-based JSON storage)
- Validation: Zod (runtime schema validation)
- Charts: ECharts + echarts-for-react
- Dates: date-fns (date manipulation)
- Currency: Intl.NumberFormat (EUR formatting)
- Banking API: DKB REST API with cookie + CSRF auth
- Node.js 20.x or later
- npm, yarn, pnpm, or bun
- DKB bank account (for live data sync) or use demo mode
- Clone the repository:
git clone <repository-url>
cd banking- Install dependencies:
npm install- Run the development server:
npm run dev- Open http://localhost:3000 in your browser
- Open http://localhost:3000 in your browser
- Toggle Demo Mode in the header (flask icon with switch)
- Sample data with 6 months of realistic transactions will be generated automatically
- Explore all features with demo data
To sync real data from your DKB account:
Create a file named banking.config.json in the project root (do NOT commit this file):
{
"dkb": {
"cookie": "YOUR_COOKIE_STRING_HERE"
}
}Make sure the dev server is running, then trigger a sync:
curl -X POST http://localhost:3000/api/syncYour data will be imported and stored locally in /data/db.json. Refresh the dashboard to see your real transactions.
Note: DKB session credentials expire after 15-30 minutes of inactivity. When you get authentication errors, repeat Step 1 to extract fresh credentials.
npm run dev # Start development server (localhost:3000)
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLintbanking/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── layout.tsx # Root layout with theme provider
│ │ ├── page.tsx # Dashboard with charts and KPIs
│ │ ├── globals.css # Theme variables + Tailwind
│ │ ├── transactions/ # Transactions table with filters
│ │ ├── insights/ # Financial insights and analytics
│ │ └── api/sync/ # DKB sync API endpoint
│ ├── components/
│ │ ├── ui/ # shadcn/ui components (15+)
│ │ ├── layout/ # Header, Nav, Footer
│ │ ├── dashboard/ # Charts and KPI cards
│ │ ├── theme-provider.tsx # next-themes wrapper
│ │ └── theme-toggle.tsx # Dark/light mode toggle
│ ├── actions/ # Server actions
│ │ ├── accounts.actions.ts # Account queries
│ │ ├── transactions.actions.ts # Transaction queries
│ │ ├── stats.actions.ts # KPI calculations
│ │ └── sync.actions.ts # DKB sync orchestration
│ ├── lib/
│ │ ├── db/ # LowDB database layer
│ │ ├── banking/ # Banking adapters and sync
│ │ │ └── adapters/dkb/ # DKB API client
│ │ ├── stats/ # Statistics calculations
│ │ └── utils.ts # Utility functions
│ └── contexts/ # React contexts
├── docs/ # Documentation
│ ├── PROJECT-STATE.md # Current state checkpoint
│ ├── PRD.md # Product requirements
│ ├── DKB-API-SPEC.md # DKB API docs
│ └── samples/ # Sample API responses
├── data/ # Local database (gitignored)
├── next.config.ts # Next.js configuration
├── tsconfig.json # TypeScript configuration
├── eslint.config.mjs # ESLint configuration
└── package.json # Dependencies
The project uses TypeScript path aliases for cleaner imports:
"@/*" -> "./src/*"
Example:
import {Button} from "@/components/ui/button";
import {cn} from "@/lib/utils";The app uses Tailwind CSS 4's native theme configuration with CSS custom properties. Theme tokens are defined in
src/app/globals.css and support both light and dark modes.
Key theme features:
- OKLCH color space for perceptually uniform colors
- CSS custom properties for runtime theme switching
- Automatic dark mode with
next-themes - Geist font family with variable fonts
- Prettier: Double quotes, trailing commas (ES5), 2-space indent
- ESLint: Next.js recommended config with TypeScript support
- TypeScript: Strict mode enabled with path aliases
- Local Only: All data persists to
/data/db.json(gitignored) - No Cloud: Zero external data transmission except direct API calls to DKB
- No Passwords Stored: Authentication via session cookies (not stored in database)
- Deduplication: SHA256 hashing prevents duplicate transactions
- Privacy First: No analytics, no tracking, no third-party services
This is a personal project, but suggestions and feedback are welcome through issues.
[License information to be added]