This budgets app enables the user to get an overview of her / his expenses and budgets by adding / deleting budgets / expenses and giving visual feedback of how much of the budget is available.
- I undertook this project in order to familiarize myself more with using React in combination with TypeScript and TailwindCSS (e.g., creating Modals)
- In particular I wanted to learn how to use TypeScript in combination with React hooks like useState, useRef and useContext
- The challenge was to take a full functioning JavaScript app and migrate it to TS
- I also intended to get more comfortable working with git branches and the process of making pull requests and merging branches in repositories
- React 17.0.2
- TypeScript 4.5.4
- TailwindCSS 3.0.15
- UUID 8.3.2
- Displaying an overview of different budgets
- Each budget displays an overview of expenses
- Adding & Removing budgets and expenses
- Re-categorize / un-categorize expenses from budgets
- Visual feedback for budget-utilization
- Using local storage for data to persist
Live demo here.
The dependencies which are necessary to run this app can be found in the package.json file.
- Clone the repo
- Navigate to the project folder in the terminal and install the necessary NPM dependencies
npm install
- Run the app typing
npm start
in your terminal and visit localhost:3000 in your browser.
- Creating a currency formatter
- Creating a dynamic progress bar with TailwindCSS
- Creating custom hooks (useLocalStorage, useBudgets) for local storage / context API
- Creating Modals with TailwindCSS
- Typing of React Hooks / props / event-handler
- Cloning a repository, creating branches, making pull requests, merging branches
- Identifying and fixing various bugs in relation to TS
- Thinking in TS (planning types beforehand, having a good understanding of what you want to achieve with your code before writing it)
The project is finished.
- This project was based in parts on this tutorial from WebDevSimplified.