💻 About

The Finance App is a modern and intuitive solution for managing personal finances. It allows users to register income and expense transactions, view a complete list of all transactions, and see an automatically calculated balance. With a clean interface and smooth interactions, it simplifies financial management for everyday use.

🚀 Project

🌟 Situation:

Managing personal finances can be challenging without an organized system to track income and expenses. The goal was to create a lightweight but powerful application that keeps financial data structured and easy to understand.

🎯 Task:

Develop a personal finance management application that:

• Allows users to register both income and expense transactions.
• Displays a clear list of all transactions with their details.
• Shows an updated balance summarizing total income, outcome, and net result.
• Provides a smooth user experience with a clean and modern design.
• Ensures reusable and maintainable code with good performance.

🚀 Action:

To achieve these goals, I employed the following actions:

• Design & Styling: Implemented theme-based styling using Styled Components, ensuring a consistent and customizable UI.
• Forms & Validation: Used React Hook Form together with Zod to handle transaction forms with type-safe validation.
• State Management: Managed application state using React Context API, optimizing performance with useCallback and useMemo hooks.
• Modal & Accessibility: Integrated Radix UI for accessible modals when creating new transactions.
• Data Handling: Used Axios to fetch and post transaction data efficiently.
• Icons & UI Enhancements: Leveraged Phosphor Icons to improve visual feedback and user experience.

🏆 Result:

The Finance App successfully delivered:

• Simple Transaction Management: Users can easily add, view, and categorize transactions.
• Real-time Balance Updates: The application automatically calculates income, expenses, and total balance.
• Enhanced User Experience: Clean design with Styled Components themes and accessible modals improved usability.
• Scalable and Maintainable Codebase: The use of React.js with TypeScript, Context API, and reusable components ensures scalability and maintainability for future features.