A comprehensive analysis and modernization guide for a React budget planning application.

Live Demo   |    Portfolio   |    GitHub

This is a budget planning web application built in 2020 that helps users calculate potential savings based on their annual salary and expense allocation preferences. The app follows a classic React + Firebase architecture that was cutting-edge at the time but now shows significant signs of technical debt.

• User Authentication: Email/password and Google OAuth via Firebase Auth
• Budget Calculator: Interactive sliders for expense allocation (1-30% of salary)
• Visual Analytics: DevExtreme pie charts showing salary breakdown
• Data Persistence: Local storage for user preferences
• Responsive Design: Material-UI based responsive layout

This project includes comprehensive documentation for understanding the current state and planning modernization:

• Architecture Overview - Current system design and component structure
• Technical Debt Analysis - Anti-patterns, performance issues, and maintenance challenges
• Dependencies Analysis - Outdated packages and security vulnerabilities

• Modernization Roadmap - Step-by-step migration plan
• Component Migration Guide - Converting class components to functional with hooks
• State Management Strategy - Redux Toolkit and React Query implementation
• Performance Optimization - Memoization, code splitting, and bundle optimization

• Coding Standards - TypeScript, ESLint, and best practices
• Testing Strategy - Unit, integration, and E2E testing approach
• Deployment Guide - CI/CD and production deployment

• Node.js 16+ (recommended: Node.js 18+)
• npm or yarn

# Clone the repository
git clone git@github.com:simongt/budget-planner.git
cd budget-planner

# Install dependencies
npm install

# Start development server
npm start

# Open http://localhost:8080/

npm start          # Development server with hot reloading
npm run serve      # Build and serve from local server
npm run build-prod # Production build
npm run deploy     # Deploy to Firebase

• React 16.13.1 - Class components with lifecycle methods
• Material-UI v4 - Component library with HOC styling
• React Router v5 - Client-side routing
• React Final Form - Form management
• DevExtreme - Data visualization

• Firebase v7 - Authentication, Firestore, Realtime Database
• Local Storage - Client-side data persistence

• Webpack 4 - Module bundling
• Babel 7 - JavaScript compilation
• React Hot Loader - Development hot reloading

The project aims to modernize to current industry standards:

• React 18 with Concurrent Features
• TypeScript for type safety
• MUI v5 with Emotion styling
• Redux Toolkit for state management
• React Router v6 with data APIs
• Modern charting libraries (Recharts)
• Performance optimizations (memoization, code splitting)
• Comprehensive testing (Jest, RTL, Cypress)

This project is currently in the process of modernization. Contributions are welcome, especially:

1. Code Reviews of modernization changes
2. Performance Improvements suggestions
3. Testing implementations
4. Documentation improvements

This project is licensed under the ISC License.

Note: This is a legacy codebase undergoing modernization. The documentation reflects both the current state and the planned improvements. For the most up-to-date information, refer to the individual documentation files linked above.