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)
| Component | Current Status | Target Status |
|---|---|---|
| React Version | 16.13.1 | 18.2.0 |
| TypeScript | ❌ Not used | ✅ Strict mode |
| State Management | ❌ Manual state | ✅ Redux Toolkit |
| Component Pattern | ❌ Class components | ✅ Functional + Hooks |
| Styling | ❌ Mixed approaches | ✅ MUI v5 + Emotion |
| Testing | ❌ No tests | ✅ Comprehensive suite |
| Performance | ❌ Unoptimized | ✅ Optimized |
This project is currently in the process of modernization. Contributions are welcome, especially:
- Code Reviews of modernization changes
- Performance Improvements suggestions
- Testing implementations
- 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.