How I built a personal expense tracker using Reactjs

Introduction

I started learning a JavaScript framework called Reactjs, and I was able to build a personal finance app using It. The app is to manage your personal income and expenditure and it would have functionalities like adding total income, adding expenses, deleting expenses, and editing expenses like every other CRUD app. I would like to acknowledge @alexandersstudi, who created the UI design in the Figma community that I used.

This is a live demo of the web application https://gabyie-personal-finance.netlify.app/.

I made use of the UseState hook and react-redux toolkit for state management. I used react-router for routing from one page to another. I used Styled components for styling.

Here is the file structure.

Prerequisites

HTML
CSS
JavaScript
Reactjs

I created a functional component with a regular JavaScript function and then exported the default, specifying that the App is the main component. It holds the two pages the web app comprises since it is a two-page application. I used the import keyword to import the Dashboard page and also the Homepage.

Since I am using the styled component library to style the application, I imported it also to set global styles to all the pages, such that any style I add here would be applied to every other page. React app does not come with page routing – it’s what organizes and manages how users navigate through your web application.

I ran this command on your terminal to install React Router to your application.

npm install react-router-dom.

Then, I imported the react-router to the app.js functional component. I wrapped my entire app.js functional component with the Routes and added individual routes for the homepage and Dashboard page. I started creating the homepage with a functional component named Homepage.

The homepage returns an empty wrapper <>...</> nested with a Main component – this begins with a capital letter to signify that it is a React component different from an HTML element which starts with a small letter. It is the container of the Homepage. Nested in it is the ImageContainer component which renders an image.

The next component is a Form component with a level one heading and three inputs with a button. To manage the changes that would occur as the user interacts with the form, I used the UseState hook to manage state change.

First, I set the input that receives the income that is inserted through the form. The HandleNameChange is an event listener that updates the income state. The next state is to set the input to receive the name of the user through the form and it is handled in the handleSubmit event listener which is attached to the form.

Inside the form, I used an if statement to conditionally render the form, such that if there’s no value inserted into the input it does nothing but if it has a value, then, you use the dispatch method to update the state, and the navigate method to route to the dashboard page. Also, I used the guard clause to validate the username input. If one doesn’t input the username, goals, or income, then the form will not be submitted. For the income input, the isNaN method is used to check if someone inputs a value for the income and it is not a number, it won’t be received by the form.

I added a state variable named goals and SetGoals to the component to handle the state for goals. The handleGoalChange event listener updates the goal state once it receives input and then updates the change when it re-renders. Also, inside the handleSubmit event listener, there is an if statement that updates the change using the dispatch method once a value is inserted into the input and displayed the new record is received. Also, the navigate method is used for routing to the dashboard page.

USING REDUX TOOLKIT FOR STATE MANAGEMENT

After installing the Redux toolkit using the appropriate command, I added a new file called store.js and imported the configureStore API from the Redux toolkit to create a store.

To connect the store to the application, I made use of the Provider component from the redux toolkit.

I imported the Provider component from the redux toolkit and the redux store in the main.jsx file. Next, I wrapped the App and Browser Router from the react-router library with the Provider function and passed the store as a prop. This makes all the components in the App have access to the redux store.

Here, I created a slice for the income which contains reducers and actions to update the income.

I created a slice for updating the state of the goals data inserted in the input. This contains reducers and actions.

I created a slice for updating the amount inserted in the input. This also contains reducers and actions.

Next, I created a slice for updating the state when someone inputs the data from the form on the modal window, the description of the expenses is displayed on the screen with the addExpense action. The removeExpense action is to delete the expenses when the delete button is clicked. Then the editItem is for editing the form from the description, to change its values and re-update what was initially selected.

I made use of styled components for styling. Styled components let you remove the mapping between components and styles, as such you create a normal React component that has styles attached to it.

This is the Dashboard page which is created by making a Dashboard component. It starts with the main component, the wrapper for the Dashboard component, and nested in it is the Navbar component, a flex parent with two children: NavLeft and NavRight.

NavLeft has a click event handler that takes you to the home page when you click on the logo. The Nav Right has routing that takes you from the homepage to the dashboard page. There is also a click event handler that reveals a modal window once the button is clicked.

I created a select element that you can select from different options for your expenses. Then below it, you have a cart and a layout for a description of your various expenses in detail.

Here’s an event handler to close the modal window.

Here, I made use of two hooks, first the useNavigate to programmatically navigate to the homepage and the useState hook to manage the change in state of the income and the amount values. I added a progress bar to show the percentage of money spent from the total capital.

I added an event handler – handleGoBack to close the show modal window.

I made use of the useSelector hook to reference the change in state as the user inputs the value for goals.

CONCLUSION

This side project was an engaging one and I was able to learn how to create components with React to manage state using redux-toolkit, and incorporate other libraries into the project. It was a good experience for learning and would love to keep doing more of these in the coming days. I would like to know your thoughts.