The Purpose of this Project
Budget App is a simple and effective tool for tracking finances. Users can input their income and expenses to calculate their remaining budget, making personal finance management more accessible.
The Technical Implementation
The app was built using React, leveraging state management through the useState hook to track budget, expenses, and search input. Conditional rendering and array methods (map, filter, reduce) were used to display expenses, calculate totals, and implement real-time search. Visual alerts for high-cost items rely on dynamic class assignment based on conditional checks. The app is fully deployed on Netlify, showcasing experience with static site hosting and deployment workflows. Features: - Set Budget: Users can input their total budget at the start of the session. - Track Expenses: Users can add individual expenses, each with a name and cost. - Visual Alerts: Expenses costing £500 or more are highlighted in red for easy identification. - A "Remaining" box dynamically calculates and updates the leftover budget. - A "Spent So Far" box tallies all recorded expenses. - Search Functionality: A real-time search bar filters expenses by keyword, improving usability. - User Interface: UI inspired by designs from Dribbble, ensuring a clean and intuitive user experience. - Deployment: App deployed using Netlify, offering practical experience in publishing and maintaining live applications.
Results & Future Potential
Learning Outcomes: - Gained hands-on experience with React’s state management, component structure, and props handling. - Built interactive UI components and implemented dynamic updates through React hooks. - Understood the full deployment lifecycle, from development to production. Future Enhancements: - Data Visualisation: Add charts to group and display spending by category. - Savings Goals: Let users track targets and monitor progress. - Bank Integration: Enable users to sync with real bank accounts for more accurate financial planning. - Category Management: Introduce expense tagging and filtering by type (e.g., food, rent, entertainment).