We picked up inspiration from various voice-controlled applications around us like Amazon Music's Alexa, Google's Voice Search, Tesla's voice-controlled automobiles. So we searched for APIs to help us with the same and found one named Speechly. We decided to integrate it with an expense tracker we all need at some point in our lives to keep track of our expenditure before our savings take a hit!
What it does
This is an expense tracker that could be controlled by your voice. Of course users can also add to the income and expense inputs manually into the App. It also offers various categories in which users can enter their income or expenses at a time. Upon input via voice or buttons, the tracker immediately gives you a doughnut chart to show your inputs in a nice manner. Last but not least, the user would not lose the data upon refreshing the window, or even closing it at any point.
How we built it
We used React.Js to build the tracker to give it more dynamic features for the users to have a fluid experience with the UI. We used Speechly API to empower our tracker with voice-controlled capabilities. We had to train the Speechly model to be able to listen to the user's input. Lastly, we used the browser's local storage to store the users' data so that they don't lose their records upon refreshing or accidentally closing the window.
Challenges we ran into
Using React, we chose to go with React Context API over Redux particularly because of its simplicity to work with. But while using custom hooks, we ran into some issues with the inputs which took some time to resolve. Also after training the Speechly voice model, it was tough to make it interact with, in case insufficient information was provided by the user.
Accomplishments that we're proud of
We are proud of what we have put up within a day and a half. Although the voice model needs further training, it's sufficient for basic use and more. Also, this was our first time dealing with such an API so we are pretty stoked with what we have achieved with it.
What we learned
We learned how to tackle corner cases based on voice input. We learned how to integrate voice recognition services with our Web App. Also using a Reducer and a Provider was a challenge in itself with various state management issues.
What's next for TrackTheNorthEast
Our App currently takes US English for its voice recognition since Speechly has it's default language setting as the same. So we are looking to allow inputs in different dialects using a different voice recognition API. With some more improvements to the UI, we are looking forward to extending this as a complete solution to keeping track of finances and make something out of it in the finance sector