This application is an expense tracker that takes in information about your transactions and displays a neat pie chart visualising all your incomes and expenses. The icing on the cake is that this React app makes use of the Speechly NLP API, which enables us to use the app solely with voice commands with changes taking place instantly. This makes the process of providing inputs quite easy and enjoyable. All of the data is being stored on localStorage so your privacy is mostly taken care of.
This application was made after following this fantastic video by the channel Javascript Mastery.
- React
- Speechly
- Material Ui
- ChartJS
This web application is deployed HERE
Transactions can be entered by simply filling out the fields in the form. If we wanted to give inputs via voice instead, a pattern of instruction giving must be followed.
First press spacebar to start the recording and make sure to allow the browser to use your microphone.
Then give out instructions in the following format:
add {income|expense} of {any number} (rupees) (in category) { any category in the dropdown} (for) (any date)
The words wrapped in () are optional while | indicates either of the both
Note that income and expense has different categories. Select each and look at the categories drop down to see them all.
"Add income of fifty thousand rupees in category salary for next friday "
"Add expense of ten thousand rupees in category bills for tomorrow "