A modern family financial management application built with cutting-edge web technologies. Darkan Finance empowers families to collaborate on budgeting, track spending, manage categories, and maintain transparency in shared financial goals.
Portfolio Project | Developed by Darius Kihuha
- Family Budget Management: Create and manage budgets with real-time collaboration
- Transaction Tracking: Log, filter, and analyze spending with detailed transaction records
- Category Management: Organize transactions with customizable categories
- Family Invitations: Invite family members to collaborate with seamless onboarding
- Dashboard Analytics: Visualize financial data with interactive charts and reports
- M-Pesa Integration: Import transactions from M-Pesa payments (M-Pesa CSV import dialog)
- User Authentication: Secure authentication with email/password support via Better Auth
- Responsive Design: Mobile-friendly interface that works across all devices
- Dark Mode Support: Built-in theme switching with next-themes
- Next.js 16: React framework with App Router and server-side rendering
- React 19: Latest React version with improved rendering performance
- TypeScript: Type-safe development with full type coverage
- Tailwind CSS 4: Utility-first CSS framework with advanced features
- Radix UI: Headless component library for building accessible UIs
- React Hook Form: Efficient form handling with minimal re-renders
- Recharts: Composable charting library for data visualization
- Zod: TypeScript-first schema validation
- Next.js API Routes: Serverless API endpoints
- PostgreSQL: Robust relational database
- Better Auth: Modern authentication framework for Next.js
- pg & pg-promise: Database client libraries for PostgreSQL
- Jest: JavaScript testing framework
- React Testing Library: Testing utilities for React components
- ESLint: Code quality and linting
- TypeScript Compiler: Strict type checking
- Recharts: Charts and data visualization
- Sonner: Toast notifications
- Vaul: Drawer/off-canvas components
- Embla Carousel: Carousel/slider component
- XLSX: Excel file parsing for data imports
- Lucide React & Huge Icons: Icon libraries
- Date-fns: Date manipulation and formatting
darkan-fin/
├── app/ # Next.js App Router
│ ├── api/ # API endpoints
│ │ ├── auth/ # Authentication routes
│ │ ├── budget/ # Budget management endpoints
│ │ ├── category/ # Category endpoints
│ │ ├── family/ # Family management endpoints
│ │ └── transaction/ # Transaction endpoints
│ ├── dashboard/ # Main dashboard pages
│ │ ├── budget/ # Budget page
│ │ ├── categories/ # Categories page
│ │ ├── settings/ # Settings page
│ │ ├── transaction/ # Transactions page
│ │ └── layout.tsx # Dashboard layout
│ ├── invite/ # Family invite acceptance
│ ├── signup/ # User registration
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── components/ # React components
│ ├── budget/ # Budget components
│ ├── category/ # Category components
│ ├── forms/ # Form components
│ ├── settings/ # Settings components
│ ├── transaction/ # Transaction components
│ ├── ui/ # Reusable UI components (Radix-based)
│ ├── header.tsx # Header component
│ └── content-wrapper.tsx # Layout wrapper
├── hooks/ # Custom React hooks
├── lib/ # Utility libraries
│ ├── auth-client.ts # Authentication client
│ └── utils.ts # General utilities
├── utils/ # Backend utilities
│ ├── auth.ts # Auth utilities
│ ├── db.ts # Database utilities
│ ├── route.ts # Route utilities
│ └── services/ # Business logic services
├── types/ # TypeScript type definitions
│ ├── api.ts # API response types
│ └── domain.ts # Domain entity types
├── public/ # Static assets
├── app_migrations/ # Database migration scripts
├── __tests__/ # Test files
├── jest.config.ts # Jest configuration
├── next.config.ts # Next.js configuration
├── tsconfig.json # TypeScript configuration
├── tailwind.config.ts # Tailwind CSS configuration
├── eslint.config.mjs # ESLint configuration
└── package.json # Project dependencies
- Node.js 18+ (recommended: 20+)
- PostgreSQL 12+
- npm or yarn package manager
-
Clone the repository
git clone <repository-url> cd darkan-fin
-
Install dependencies
npm install # or yarn install -
Set up environment variables Create a
.env.localfile in the project root:DATABASE_URL=postgresql://user:password@localhost:5432/darkan_fin
-
Run database migrations
npm run migrate
-
Start the development server
npm run dev
Open http://localhost:3000 in your browser.
# Development
npm run dev # Start development server
# Production
npm run build # Build for production
npm run start # Start production server
# Code Quality
npm run lint # Run ESLint
npm run typecheck # Run TypeScript type checking
# Testing
npm test # Run Jest tests
npm run test:ci # Run tests in CI mode
npm run test:coverage # Generate coverage report- Create multiple budgets with spending limits
- Real-time budget vs. actual spending visualization
- Category-level budget allocation
- Budget tracking dashboard with charts
- Add transactions manually or via M-Pesa import
- Filter transactions by date range, category, and type
- Detailed transaction table with sorting capabilities
- Transaction history and analytics
- Invite family members via email
- Role-based access control
- Shared budget views and analytics
- Family settings management
- Email-based authentication
- Session management with Better Auth
- Secure API endpoints with authentication middleware
- Password-protected accounts
- Modern, responsive design with Tailwind CSS
- Accessible components built with Radix UI
- Interactive charts for financial insights
- Toast notifications for user feedback
- Dark mode support
The application uses PostgreSQL with the following primary entities:
- Users: User accounts and authentication
- Families: Family units for grouping
- FamilyMembers: User memberships in families
- Budgets: Budget configurations and allocations
- Categories: Transaction categorization
- Transactions: Financial transaction records
- Invitations: Family member invitations
Database migrations are versioned in:
app_migrations/: Application-specific migrationsbetter-auth_migrations/: Authentication schema migrations
The project includes comprehensive test coverage:
# Run all tests
npm test
# Run tests with coverage report
npm run test:coverage
# Run tests in watch mode
npm test -- --watchTest files are located in the __tests__/ directory and follow the same structure as the source code.
Ensures code consistency and catches potential errors:
npm run lintStrict type checking throughout the project:
npm run typecheck- Next.js Optimization: Server-side rendering and static generation where applicable
- Code Splitting: Automatic code splitting for faster page loads
- Image Optimization: Optimized image serving via Next.js Image component
- Database Indexing: Strategic indexes on frequently queried columns
- Component Memoization: Optimized React component rendering
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
Darius Kihuha
This portfolio project showcases:
- Full-stack web development with Next.js
- Modern React patterns and best practices
- TypeScript for type-safe development
- Database design and SQL
- Component architecture and reusability
- Testing and code quality practices
- UI/UX implementation with accessibility in mind
This project is licensed under the terms specified in the LICENSE file.
Built with:
- Next.js - React Framework
- Tailwind CSS - Utility CSS Framework
- Radix UI - Accessible Component Primitives
- Better Auth - Authentication Framework
- PostgreSQL - Database
For issues, questions, or suggestions, please check the project's issue tracker.
Last Updated: February 2026