Lessons learned while building Expense Tracker
Published: 2021-08-08 05:52:31

Hi, In this blog I will share my experience while building Expense Tracker using React and firebase. You can check it out [here](https://expense-tracker2.netlify.app/) and its code on [Github](https://github.com/rehaanredkar15/Expense-tracker-app)

##Contents
* Purpose
* TechStack 
* UseReducer
* Speechly
* Private Routes 
* Filter & Reduce 
* Ending


##Purpose 
  I tried some other Expense Trackers Because I was not able to track my expenses spent via UPI. Some of the Expense Trackers are amazing But I Wanted something Engaging which could motivate me to Enter the expenses. So I thought of Building one for Mine. It was challenging And fun to build.



##TechStack
* React
* ContextApi
* Firebase
* SpeechlyApi
* Chart.js
* Material Ui 

I used ContextApi for learning cause I had worked on Redux before so thought of using something different.

Note - Every Section is divided into the introduction of the Concept and how I used it.



##UseReducer
UseReducer is an alternative to the useState hook and it performs the similar task of state management but with a little twist. when we have complex state management logic useReducer is preferred over useState. It takes the reducer having state and action and returns the new state according to the dispatch method which is provided, A little bit of pre-knowledge of Reducers would be helpful here.  With ContextApi you can generally find useReducer being used. 

Why I used It?
I used it for the transactions state management in the expense tracker which means adding the transaction to the current state and removing it from the state. Also here I modified the Initial State by adding the transactions array in it while debugging which helped me solve some bugs. Before I had Initial State as an array which was causing the error.
![PrivateRoute](https://github.com/rehaanredkar15/Expense-tracker-app/blob/master/public/blog2.png?raw=true)

Example in My code where and how it is used :
Here is an example of Adding a transaction function in TransContext where I dispatched the action of adding the transaction to our state. 
![PrivateRoute](https://github.com/rehaanredkar15/Expense-tracker-app/blob/master/public/blog3.png?raw=true)
In our Context Reducer,  we receive the dispatched state and perform the expected action. Here if we have the add transaction state then we add the new transaction received to our transactions by spreading the other transactions which were present before.
![PrivateRoute](https://github.com/rehaanredkar15/Expense-tracker-app/blob/master/public/blog4.png?raw=true)





##Speechly : 

What it is?
Speechly is the  Simple Voice Interface API for Web, Mobile applications


How I used It?
So I used Speechly API for voice recognition and adding the Transactions,  I watched some tutorials of speechly and referred to their docs for setting it up. For better understanding, you should refer to  https://docs.speechly.com/quick-start/
So after setting up the entities and intents in speechly, For reading the inputs I used useEffect Hook. Further, we are filling the formdata according to the intents and we traverse through entities and get the amount, category and if all is set we filter through a check outside switch where we use segment.isFinal for confirmation then we call the create transaction function.

![PrivateRoute](https://github.com/rehaanredkar15/Expense-tracker-app/blob/master/public/blog7.png?raw=true)


##Private Routes 

What it is?
Private routes are used by React developers to perform some functions before the user is directed to that route. Private routes are a wrapper over our general route and take the component from props and destructure the rest of the properties. It  contains a render function that is inside a Route having  the other data which is unpacked using the spread operator
  

Why I used Private Routes? 
 To identify the current user and redirect him to log in if not authenticated. Below is my render function in which I have used private route, It takes props and passes them with Component.

![PrivateRoute](https://github.com/rehaanredkar15/Expense-tracker-app/blob/master/public/blog1.png?raw=true)



##Filter, Reduce functions of JS.

###Filter Function
How does it work?
Filter Function: As the name suggests Array.Filter() function Filters through the array upon some condition, Consider if we have  1 to 10 numbers in our array and we want to filter out numbers greater than 5 then we filter the array we condition iterator>5.


How I used the filter function?
In my Web App, This function is used in Various files, But one of the main files where it contributes to the center logic of the app is Use transaction Hook. Here I am receiving the transactions from TransContext using useTrans Hook, Now we need those transactions and get only those transactions that are requested to the hook, Consider If we are using the UseTransactions for Calculating Income so the title will be passed income and FILTER  function will filter out the transactions to get the Income transactions only by using the condition of Matching with the title as seen in the 4th Line.

![PrivateRoute](https://github.com/rehaanredkar15/Expense-tracker-app/blob/master/public/blog6.png?raw=true)

###REDUCE Function : - 

How do they work?
To put it Straight Reduce function simply reduces the values, It traverses through the array and performs a certain function on the element of the array, and returns a single value. This function takes two parameters   1) Call back function  2)initial value 
The call back function has 2 parameters Accumulator and Current Value, Current value traverses through an array to take the values and then the function performs an action and stores the value in the accumulator which is returned.

How I used It? 
I used Reduce function to get the total amount of a certain category, The Syntax of reduce function is in the above image 
So After I have my transactions of a certain type,  I use reduce function, to sum up, their amount values in the accumulator, and then that value is a return to the total value, similar is used in balance calculation also. Further, this data is used to create filtered categories and they are passed as datasets to our charts.


Some Minute Things that I learned And the Errors which I had to deal with :

- To have different users' data, I updated the database rules and saved the transaction collection in the document with the user's Id so while accessing the database, I check the documents according to the CurrentUser Id and hence I can achieve isolation for the user. 
- The Importance of the spread operator, Spread operator is a very useful thing to Decompose the data and Also while taking the Input of the form  
- While taking the input from the speechly I had to convert the uppercase to lowercase  to fix the category issue where the speechly was providing Uppercase category value

Now let's talk about one of the major Bug which I fixed using the Firebase docs :

While deleting and updating the transactions document in firebase, As I was using the add function to create a document in firebase the Document Id was generating when I created so 
I was finding it hard to get the id of the document to update and delete. So after trying different combinations one fine day when I was scratching my head over this issue and casually reading the docs of firebase I found out that there is a .set function that can create the document with the Id which we provided Hence  I got access to the id of the document ( It was not thought in the tutorial which I followed to learn firebase, Sigma Rule - 404  Don't Entirely Depend on the Video Tutorials)   


##Ending
So these were some of the things which I learned while building the Expense tracker and Also this was my First Blog Ever still A lot to learn about Blogging and Developing, I enjoyed developing the web app and then writing about my experiences in this Blog. If You have any suggestions you can reach me out [LinkedIn](https://www.linkedin.com/in/rehan-redkar18/). 
Thank You For Reading!!!!