Budget_nodejs_svelte4

Asroisgood

💰 Windsurf Budget - Personal Finance Management

A comprehensive personal budget management application with multilingual support, expense tracking, savings goals, and financial reporting. Built with modular architecture following SOLID principles.

🌟 Key Features

💳 Transaction Management

✅ Add/Edit/Delete transactions with validation
✅ Income & expense tracking
✅ Category management with custom icons/colors
✅ Advanced filtering (date, category, type)
✅ Search functionality with pagination
✅ Quick transaction forms

🎯 Savings Goals

✅ Create and manage multiple savings goals
✅ Real-time progress tracking
✅ Contribution management with history
✅ Target date setting with reminders
✅ Progress visualization with charts
✅ Goal activation/deactivation

📊 Reports & Analytics

✅ Income vs expense trends
✅ Category breakdowns with charts
✅ Monthly/yearly statistics
✅ Balance tracking over time
✅ Export functionality

🌐 Multilingual Support

✅ Bahasa Indonesia & English
✅ Dynamic language switching
✅ Database-stored preferences
✅ Auto-route detection
✅ Comprehensive translations

👥 User Management

✅ Secure JWT authentication
✅ User registration & profiles
✅ Language preference storage
✅ Session management

🏗️ Tech Stack

Backend Architecture

Node.js + Express.js - RESTful API server
MySQL + MariaDB - Relational database
JWT - Token-based authentication
bcryptjs - Password hashing
Modular Architecture - SOLID principles, SOC
Repository Pattern - Data access layer
Service Layer - Business logic separation

Frontend Architecture

SvelteKit - Modern web framework
Tailwind CSS - Utility-first styling
Chart.js - Data visualization
Axios - HTTP client
Lucide - Icon library
Svelte Stores - State management
Modular Components - Reusable UI elements

Development Tools

ESLint - Code linting
Prettier - Code formatting
Nodemon - Auto-restart dev server
Concurrently - Multi-process management

🚀 Quick Start

Prerequisites

Node.js 18+ installed
MySQL/MariaDB installed
Git (optional)

1. Database Setup

# Clone repository
git clone <repository-url>
cd Windsurf_Budget

# Create database
mysql -u root -p
CREATE DATABASE budget_app;
EXIT;

# Import schema
cd backend
mysql -u root budget_app < database/schema.sql

# Seed with sample data
npm run seed

2. Environment Setup

# Backend (already configured in .env)
cd backend
# Edit .env if needed (DB_HOST, DB_USER, DB_PASSWORD, etc.)

# Frontend
cd ../frontend
# .env already created with API_URL

3. Run Application

Option 1: Automatic (Recommended)

# Windows
start-dev.bat

# Linux/Mac
chmod +x start-dev.sh
./start-dev.sh

Option 2: Manual

# Terminal 1 - Backend
cd backend
npm run dev

# Terminal 2 - Frontend
cd frontend
npm run dev

4. Access Application

Frontend: http://localhost:5173
Backend API: http://localhost:3000/api
Health Check: http://localhost:3000/health

Sample users created with seed data:

User 1: John Doe

Email: john@example.com
Password: password123
Data: 25+ transactions, 4 savings goals, 8 custom categories

User 2: Jane Smith

Email: jane@example.com
Password: password123
Data: 10+ transactions, 2 savings goals, 4 custom categories

📊 Features Overview

Transaction Management

Add/Edit/Delete transactions with validation
Income & expense tracking
Category management with custom icons/colors
Advanced filtering and search functionality
Pagination for large datasets

Savings Goals

Create and manage multiple savings goals
Real-time progress tracking with visual charts
Contribution management with detailed history
Target date setting and goal activation

Reports & Analytics

Interactive charts for income vs expense trends
Category breakdowns and spending analysis
Monthly/yearly statistics and balance tracking
Export functionality for financial data

Multilingual System

Bahasa Indonesia & English support
Dynamic language switching with persistence
Auto-route detection and comprehensive translations
Database-stored user preferences

User Experience

Responsive design for all devices
Modern UI with Tailwind CSS
Form validation and error handling
Loading states and smooth animations

🔧 Architecture & Development

Backend Structure (Modular Architecture)

backend/
├── modules/                    # Feature-based modules
│   ├── auth/                   # Authentication (login, register)
│   │   ├── auth.controller.js
│   │   ├── auth.service.js
│   │   ├── auth.repository.js
│   │   └── auth.routes.js
│   ├── user/                   # User management
│   │   ├── user.controller.js
│   │   ├── user.service.js
│   │   ├── user.repository.js
│   │   └── user.routes.js
│   ├── transaction/            # Transaction CRUD
│   │   ├── transaction.controller.js
│   │   ├── transaction.service.js
│   │   ├── transaction.repository.js
│   │   └── transaction.routes.js
│   ├── category/               # Category management
│   │   ├── category.controller.js
│   │   ├── category.service.js
│   │   ├── category.repository.js
│   │   └── category.routes.js
│   ├── savings/                # Savings goals
│   │   ├── savings.controller.js
│   │   ├── savings.service.js
│   │   ├── savings.repository.js
│   │   └── savings.routes.js
│   └── report/                 # Analytics
│       ├── report.controller.js
│       ├── report.service.js
│       ├── report.repository.js
│       └── report.routes.js
├── middlewares/                # Cross-cutting concerns
│   ├── auth.middleware.js      # JWT validation
│   ├── error.middleware.js     # Centralized error handling
│   └── validation.middleware.js
├── utils/                      # Shared utilities
│   ├── logger.js               # Logging utility
│   ├── database.js             # DB connection
│   └── helpers.js              # Common helpers
├── config/                     # Configuration
│   └── database.config.js
└── database/                   # Database setup
    ├── schema.sql              # Database structure
    └── seeds.sql               # Sample data

Frontend Structure (Feature-Based)

frontend/src/
├── routes/                     # Pages & routing
│   ├── (auth)/                 # Authentication pages
│   │   ├── login/
│   │   └── register/
│   ├── dashboard/              # Main dashboard
│   ├── transactions/           # Transaction pages
│   │   ├── +page.svelte        # List view
│   │   ├── new/                # Create form
│   │   └── [id]/               # Edit/view details
│   ├── categories/             # Category management
│   ├── savings/                # Savings goals
│   │   ├── +page.svelte        # Goals list
│   │   ├── new/                # Create goal
│   │   └── [id]/               # Goal details & contributions
│   ├── reports/                # Analytics pages
│   └── settings/               # App settings
├── lib/
│   ├── components/             # Reusable UI components
│   │   ├── ui/                 # Base UI components
│   │   ├── forms/              # Form components
│   │   └── charts/             # Chart components
│   ├── services/               # API layer
│   │   ├── auth.api.js
│   │   ├── transactions.api.js
│   │   ├── categories.api.js
│   │   ├── savings.api.js
│   │   └── api.service.js      # Base API client
│   ├── stores/                 # State management
│   │   ├── auth.store.js
│   │   ├── transactions.store.js
│   │   ├── categories.store.js
│   │   └── savings.store.js
│   ├── translations/           # Multilingual system
│   │   ├── general.js          # Common translations
│   │   └── routes/             # Route-specific translations
│   │       ├── transactions.js
│   │       ├── categories.js
│   │       ├── savings.js
│   │       └── settings.js
│   ├── settings/               # App configuration
│   │   └── language.js         # Language management
│   └── utils/                  # Helper functions
└── assets/                     # Static assets

Architecture Principles

SOLID Principles: Single responsibility, Open/closed, Liskov substitution, Interface segregation, Dependency inversion
Separation of Concerns (SOC): Clear boundaries between layers
Repository Pattern: Data access abstraction
Service Layer: Business logic encapsulation
Controller Pattern: HTTP request handling
Feature-based Structure: Organized by business features

Design Patterns

Modular Architecture: Each feature is self-contained
Dependency Injection: Loose coupling between components
Error Handling: Centralized error management
Validation: Input sanitization and validation
Authentication: JWT-based stateless auth
State Management: Svelte stores for reactive state

🌐 API Documentation

Authentication Endpoints

POST /api/auth/login - User authentication
POST /api/auth/register - User registration
GET /api/auth/profile - Get user profile
PUT /api/auth/profile - Update profile
POST /api/auth/logout - User logout

Transaction Endpoints

GET /api/transactions - List with pagination & filtering
POST /api/transactions - Create new transaction
GET /api/transactions/:id - Get transaction details
PUT /api/transactions/:id - Update transaction
DELETE /api/transactions/:id - Delete transaction

Category Endpoints

GET /api/categories - List user categories
POST /api/categories - Create category
PUT /api/categories/:id - Update category
DELETE /api/categories/:id - Delete category

Savings Goals Endpoints

GET /api/savings - List savings goals
POST /api/savings - Create savings goal
GET /api/savings/:id - Get goal details
PUT /api/savings/:id - Update goal
DELETE /api/savings/:id - Delete goal
POST /api/savings/:id/contributions - Add contribution
GET /api/savings/:id/contributions - Get contribution history
DELETE /api/savings/contributions/:id - Delete contribution

Reports Endpoints

GET /api/reports/summary - Financial summary
GET /api/reports/trends - Income/expense trends
GET /api/reports/categories - Category breakdowns
GET /api/reports/savings - Savings progress

Settings Endpoints

GET /api/settings/language - Get language preference
PUT /api/settings/language - Update language preference

🧪 Testing

Backend Testing

cd backend
npm test

Frontend Testing

cd frontend
npm run check
npm run lint

📝 Database Schema

Tables

users - User accounts
categories - Transaction categories
transactions - Financial transactions
savings_goals - Savings targets
savings_contributions - Goal contributions

Relationships

Users → Categories (1:N)
Users → Transactions (1:N)
Users → Savings Goals (1:N)
Categories → Transactions (1:N)
Savings Goals → Contributions (1:N)

🔒 Security Features

Authentication & Authorization

JWT Tokens: Stateless authentication with expiration
Password Hashing: bcryptjs with salt rounds
Session Management: Secure token handling
Route Protection: Middleware-based access control

Data Protection

Input Validation: Comprehensive request validation
SQL Injection Prevention: Parameterized queries
XSS Protection: Input sanitization and output encoding
CORS Configuration: Cross-origin request security
Rate Limiting: API abuse prevention

Best Practices

Environment Variables: Secure configuration management
Error Handling: Non-sensitive error messages
Logging: Security event tracking
HTTPS Ready: Production deployment ready

🌐 Multilingual System

Supported Languages

Bahasa Indonesia (Default)
English

Implementation Features

Dynamic Translation: Runtime language switching
Route Detection: Automatic language context
Database Storage: User preference persistence
Fallback System: Graceful degradation
Comprehensive Coverage: All UI elements translated

Translation Structure

translations/
├── general.js              # Common translations
└── routes/                 # Route-specific translations
    ├── transactions.js    # Transaction module
    ├── categories.js       # Category module
    ├── savings.js          # Savings module
    ├── reports.js          # Reports module
    └── settings.js         # Settings module

Usage Pattern

import { getLabel } from "$lib/settings/language.js";

// Automatic route detection
const title = getLabel("title");

// Manual language specification
const title = getLabel("title", "en");

🎨 UI/UX Features

Design System

Responsive Design: Mobile-first approach
Modern UI: Tailwind CSS utility framework
Interactive Charts: Chart.js data visualization
Smooth Animations: CSS transitions and Svelte animations
Accessibility: Semantic HTML and ARIA labels

User Experience

Form Validation: Real-time validation feedback
Loading States: Skeleton loaders and spinners
Error Handling: User-friendly error messages
Navigation: Intuitive routing and breadcrumbs
Feedback: Success notifications and confirmations

Performance Features

Lazy Loading: Component-level code splitting
Optimized Queries: Efficient database operations
Caching Strategy: Response caching for better performance
Bundle Optimization: Tree shaking and minification

📈 Performance & Scalability

Optimization Techniques

Database Indexing: Optimized query performance
Pagination: Efficient handling of large datasets
Connection Pooling: Database connection management
Static Asset Optimization: Image and file compression

Scalability Considerations

Modular Architecture: Easy feature additions
API Versioning: Backward compatibility
State Management: Efficient data flow
Component Reusability: DRY principle implementation

🚀 Deployment Guide

Development Environment

# Quick start with automatic scripts
./start-dev.sh        # Linux/Mac
start-dev.bat         # Windows

# Manual development setup
npm run dev:backend   # Terminal 1
npm run dev:frontend  # Terminal 2

Production Deployment

# Backend production
cd backend
npm run build
npm start

# Frontend production
cd frontend
npm run build
npm run preview

Environment Configuration

# Backend (.env)
NODE_ENV=production
DB_HOST=your-db-host
DB_USER=your-db-user
DB_PASSWORD=your-db-password
DB_NAME=budget_app
JWT_SECRET=your-jwt-secret
FRONTEND_URL=https://your-domain.com

# Frontend (.env)
VITE_API_URL=https://your-api-domain.com/api

Docker Support (Optional)

# Dockerfile configuration available
docker-compose up -d  # Full stack deployment

🤝 Contributing Guidelines

Development Workflow

Fork the repository
Create feature branch: git checkout -b feature/amazing-feature
Commit changes: git commit -m 'Add amazing feature'
Push to branch: git push origin feature/amazing-feature
Submit Pull Request

Code Standards

ESLint: Follow linting rules
Prettier: Consistent code formatting
Modular Structure: Maintain architecture patterns
Testing: Add tests for new features
Documentation: Update README and code comments

Branch Naming

feature/ - New features
bugfix/ - Bug fixes
hotfix/ - Critical fixes
docs/ - Documentation updates

🆘 Troubleshooting

Common Issues & Solutions

Database Connection Issues

# Check MySQL/MariaDB status
sudo systemctl status mysql

# Verify database exists
mysql -u root -p -e "SHOW DATABASES;"

# Recreate database
mysql -u root -p -e "DROP DATABASE IF EXISTS budget_app; CREATE DATABASE budget_app;"

CORS Problems

# Check environment variables
echo $FRONTEND_URL
echo $VITE_API_URL

# Verify backend CORS configuration
# Check backend/middlewares/auth.middleware.js

Authentication Issues

# Reset seed data
cd backend
npm run seed

# Check JWT secret
echo $JWT_SECRET

Frontend Build Issues

# Clear node modules
rm -rf node_modules package-lock.json
npm install

# Check for TypeScript errors
npm run check

Getting Help

Console Logs: Check browser and server logs
Network Tab: Verify API calls in browser dev tools
Database Logs: Check MySQL error logs
GitHub Issues: Create detailed issue reports

📞 Support & Contact

Project Information

Version: 2.0.0 (Multilingual Release)
License: MIT License
Node.js: 18+ required
Database: MySQL/MariaDB 8.0+

Contributors Welcome!

🐛 Bug Reports: Help us improve
💡 Feature Requests: Suggest improvements
📝 Documentation: Help with docs
🌐 Translations: Add new languages

🎉 Happy Budgeting with Windsurf Budget! 💰📊

Built with ❤️ using modern web technologies and best practices

Top categories

Budget_nodejs_svelte4

💰 Windsurf Budget - Personal Finance Management

🌟 Key Features

💳 Transaction Management

🎯 Savings Goals

📊 Reports & Analytics

🌐 Multilingual Support

👥 User Management

🏗️ Tech Stack

Backend Architecture

Frontend Architecture

Development Tools

🚀 Quick Start

Prerequisites

1. Database Setup

2. Environment Setup

3. Run Application

Option 1: Automatic (Recommended)

Option 2: Manual

4. Access Application

👤 Login Credentials

User 1: John Doe

User 2: Jane Smith

📊 Features Overview

Transaction Management

Savings Goals

Reports & Analytics

Multilingual System

User Experience

🔧 Architecture & Development

Backend Structure (Modular Architecture)

Frontend Structure (Feature-Based)

Architecture Principles

Design Patterns

🌐 API Documentation

Authentication Endpoints

Transaction Endpoints

Category Endpoints

Savings Goals Endpoints

Reports Endpoints

Settings Endpoints

🧪 Testing

Backend Testing

Frontend Testing

📝 Database Schema

Tables

Relationships

🔒 Security Features

Authentication & Authorization

Data Protection

Best Practices

🌐 Multilingual System

Supported Languages

Implementation Features

Translation Structure

Usage Pattern

🎨 UI/UX Features

Design System

User Experience

Performance Features

📈 Performance & Scalability

Optimization Techniques

Scalability Considerations

🚀 Deployment Guide

Development Environment

Production Deployment

Environment Configuration

Docker Support (Optional)

🤝 Contributing Guidelines

Development Workflow

Code Standards

Branch Naming

🆘 Troubleshooting

Common Issues & Solutions

Database Connection Issues

CORS Problems

Authentication Issues

Frontend Build Issues

Getting Help

📞 Support & Contact