Expense and budget tracker as well as keeping track on the stock market. Live demo here.
Expense tracker app is a kind of daily used app and I always wonder how it works. As per the experience of using this kind of app, I thought it would be great to have a budget warning or integrate some financial information in order to provide good user experience.
- To use the latest version of mui(v5)
- To learn how to display chart in react.js
- To consolidate the usage of contextAPI, useReducer, useState, useRef
- To use custom hooks
- To work with API and handle the error
- To practice CRUD
- To try keeping my components small or making them reusable by separating files and creating util files
- contextAPI, binded with multiple contextAPI
- useReducer(), useState(), useRef(), react events, , useEffect()
- custom hooks
- react-router-dom
- mui v5: custom theme (custom button), components, styles
- worked with API, axios, error handling
- Window localstorage
- chart.js
- plotly.js
- create / edit / delete
- Used the same component (addTransaction.jsx) to switch created mode or edited mode
- Created a popover with pure react to implement above actions
- The cahrt reflect the changes immediately whenever the transactions updated
- a progress bar with pure react
- The color of bar changs when it hits the warning amount
- The success info prompted once transaction is successfully created / edited / deleted
- The warning info prompted once failing to get data from stock API
- Reusing the same snackbar component with contextAPI
- alpha-vantage
To do:
- To limit "note" words in addTransaction.jsx
- Advanced search feature in TransactionList.jsx : intersection check