This is a simple personal budget and finance management application built using React, TypeScript, reducer, and Context API. The app helps users track their expenses and remaining budget while providing an enhanced user experience through various UI elements and functionalities.
- Expense Tracking: Users can add, update, or delete their expenses with a swipe action, improving interactivity.
- Budget Overview: A circular progress graph shows how much of the overall budget has been spent.
- Date Selection: A calendar is used to select dates when adding or updating expenses.
- User-Friendly Interface: The app employs UI libraries like react-swipeable-list to allow swipe-based actions and a visually appealing interface.
- React: For building the UI components.
- TypeScript: For type safety and enhanced developer experience.
- Reducer & Context API: To manage the global state of the app efficiently.
- UI Libraries:
react-swipeable-list: For interactive expense management (swipe actions to update or delete expenses).react-circular-progressbar: For displaying the budget usage in a circular graph.- Other enhancements: Calendar for date selection, modal dialogs, and animated transitions for smooth user interactions.
- Clone the repository:
git clone https://github.com/your-username/your-repo.git cd your-repo - Install Dependencies:
npm install- Start the development server:
npm run dev
- Open your browser and go to http://localhost:5173
This project is licensed under the MIT License. See the LICENSE file for details.
Made with ❤️ by Thomas Schrödinger