Budget Builder

A modern Angular application for tracking income and expenses across customizable monthly date ranges with spreadsheet-like functionality and real-time calculations.

🚀 Live Demo | 📦 GitHub Repository

Technologies & Patterns

Frontend Framework

• Angular 17.3+ with standalone components
• TypeScript with strict typing (no any types)
• Angular Signals for reactive state management
• OnPush change detection strategy for optimal performance

UI & Styling

• Tailwind CSS v3 utility-first styling
• SCSS for component-specific styles
• Responsive design with mobile support
• Spreadsheet-like interface with keyboard navigation

Architecture Patterns

• Stateless/Stateful Component Pattern
  • Stateless components for pure presentation
  • Stateful page components for orchestration
• Service Layer Pattern for business logic
• Signals-based State Management (no RxJS/NgRx)
• Computed Signals for derived state and real-time calculations
• Dependency Injection using modern inject() function

Modern Angular Features

• New Control Flow Syntax: @if, @for, @switch (Angular 17+)
• Standalone Components with explicit imports
• Signal-based reactivity for automatic UI updates
• Computed values for calculations and aggregations

Key Features

• ✅ Dynamic monthly date range selection
• ✅ Income and expense tracking with labels
• ✅ Real-time profit/loss calculations
• ✅ Running balance per month
• ✅ Add/delete line items with context menu
• ✅ "Apply to all months" functionality
• ✅ Full keyboard navigation (Enter, Tab, Arrow keys)
• ✅ Spreadsheet-like user experience

Quick Start

# Install dependencies
npm install

# Start development server
npm start

# Build for production
npm run build

Navigate to http://localhost:4200/

Project Structure

budget-builder/
├── src/
│   ├── app/
│   │   ├── budget/
│   │   │   ├── components/        # Stateless presentation components
│   │   │   ├── pages/             # Stateful page components
│   │   │   ├── services/          # Business logic with Signals
│   │   │   └── models/            # TypeScript interfaces and types
│   │   └── app.component.ts
│   ├── styles.scss                # Global Tailwind styles
│   └── index.html
├── tailwind.config.js
└── package.json

Architecture Highlights

Component Architecture

• Stateless Components: Pure presentation with @Input() and @Output()
• Stateful Components: Inject page service, coordinate behavior
• Page Services: Contains all business logic with Angular Signals

State Management

// Signals for reactive state
private itemsSignal = signal<Item[]>([]);

// Computed signals for derived state
readonly totalSignal = computed(() =>
  this.items().reduce((sum, item) => sum + item.value, 0)
);

Data Flow

User Action → Component → Page Service (Signals) → Computed Signals → Component Updates

Best Practices Implemented

• ✅ Strong TypeScript typing throughout
• ✅ OnPush change detection for performance
• ✅ No manual subscriptions (Signals only)
• ✅ Business logic isolated in services
• ✅ Components focused on presentation
• ✅ Immutable state updates
• ✅ Keyboard-accessible interface
• ✅ Clean, maintainable code structure